指定名为"myFirstFont"的字体,并指定在哪里可以找到它的URL:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}

以下实例为在div中使用的字体:

div
{
font-family: myFirstFont;
}

语法

@font-face
{
font-properties
}
字体描述 说明
font-family name 必需的。定义字体的名称。
src URL 必需的。定义该字体下载的网址(S)
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
可选。定义该字体应该如何被拉长。默认值是"正常"
font-style normal
italic
oblique
可选。定义该字体应该是怎样样式。默认值是"正常"
font-weight normal
bold
100
200
300
400
500
600
700
800
900
可选。定义字体的粗细。默认值是"正常"
unicode-range unicode-range 可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"

CSS3 @font-face 规则的更多相关文章

  1. [转]真正了解CSS3背景下的@font face规则

    本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http:/ ...

  2. CSS3:@font-face规则

    前言 过去,Web设计师为了保证网站能够正常显示,只能使用“Web安全字体”,即每台机器都预装的字体.但Web安全字体有时并不好看... @font-face能够使得任何一台机器能够显示理想中的字体. ...

  3. css font简写规则

    是不是在很很多网站的公共样式中会看到这样的代码?font: 12px/150% Arial, Verdana, "\5b8b\4f53";意思为:字体大小/行高 字体族 " ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成

    CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...

  5. CSS3高性能动画

    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,在CSS动画中使用w ...

  6. CSS自学笔记(12):CSS3文字特效

    在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...

  7. CSS3+HTML5特效7 - 特殊的 Loading 效果

    效果如下     实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...

  8. CSS3+HTML5特效4 - 横向无缝滚动

    先看例子 This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This ...

  9. CSS3+HTML5特效3 - 纵向无缝滚动

    老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...

  10. 个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)

    先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animatio ...

随机推荐

  1. 洛谷P4343 [SHOI2015]自动刷题机

    题目 易得该题目中的\(n\)和\(k\)具有单调性,满足二分的性质,因此该题目而已用二分来枚举\(n\),然后对于每个\(n\)模拟出它所对应的\(k\),然后注意注意代码细节,并且当当前\(k\) ...

  2. Alpha冲刺(5/6)

    队名:無駄無駄 组长博客 作业博客 组员情况 张越洋 过去两天完成了哪些任务 摸鱼 准备"Alpha事后诸葛亮" 提交记录(全组共用) 接下来的计划 沟通前后端成员,监督.提醒他们 ...

  3. kerberos 配置错误记录

    服务端错误记录: 1.服务端在创建数据库的时候报如下错误: # kdb5_util -s -r HADOOP.HOME 错误提示:kdb5_util: Improper format of Kerbe ...

  4. 微信小程序之数据缓存

    关于缓存,举个示例,假定我不是通过微信授权登录的方式,小程序又是如何识别我登录后的身份呢???效果图: 这个功能我是通过缓存实现的. 关键核心代码如下: wx.setStorage({ key: 'u ...

  5. CNeo编程语言概述

    C语言诞生于1970年,当时在AT&T实验室由Dennis Ritchie主导开发的.据说当时仅用了一周的时间就做好了C语言编译器,所以尽管C语言从90年正式纳入ISO标准委员会,其编号为IS ...

  6. FactorVAE论文学习-1

    Disentangling by Factorising 我们定义和解决了从变量的独立因素生成的数据的解耦表征的无监督学习问题.我们提出了FactorVAE方法,通过鼓励表征的分布因素化且在维度上独立 ...

  7. Docker CentOS / Ubuntu容器开启 SSH 服务

    Docker CentOS / Ubuntu容器开启 SSH 服务 在CentOS容器内执行 yum install passwd openssl openssh-server -y # Ubuntu ...

  8. babelrc笔记

    Babel默认只是转换新的语法(简单转换语法糖),如箭头函数等,但不会转换新的API,如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promise ...

  9. Lyrics of the song 99 Bottles of Beer

    99 bottles of beer on the wall, 99 bottles of beer.Take one down and pass it around, 98 bottles of b ...

  10. Spring boot使用Aspose.Slides操作ppt转PDF、转图片

    最近要将ppt转为PDF和图片,Apache poi ,jacob都试了下 Apache poi 转图片乱码,处理了,还会存在部分乱码 jacob对系统依赖比较大,必须是windows还得安装MS O ...