CSS学习笔记:@font-face
来源:互联网 发布:男士发簪 淘宝 编辑:程序博客网 时间:2024/06/05 00:08
概述
@font-face规则允许开发者为网页指定在线字体。
@font-face是连接服务器上的字体的一种方式,浏览器会根据这条指令把对应的字体文件下载到本地缓存,使用它去显示文本。通过这种方式可以消除对用户电脑字体的依赖。
@font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。
语法
@font-face的取值有以下几个:
- font-family:设置文本的字体名称。之后可以在定义字体的字体栈中使用这个名称。
- font-style:设置文本样式
- font-variant:设置文本是否大小写
- font-weight:设置文本的粗细
- font-stretch:设置文本是否横向拉伸变形
- font-size:设置文本字体大小
- src:设置自定义字体的相对路径或者绝对路径。
注意:此属性只能在@font-face规则里使用。
@font-face { font-family: "Bitstream Vera Serif Bold"; src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); }
浏览器支持度
不同的浏览器会要求不同的字体文件类型。
- TrueType(TTF)和OpenType(OTF)字体文件在绝大多数的浏览器上都能正常工作。
- IE4—IE8要求使用特殊的字体文件格式:嵌入式OpenType(EOT)
- 唯一能够在Safari上正常工作的字体文件格式就是SVG,SVG在chrome、Opera上也能正常工作,但在Firefox上不行。
- WOFF的含义是Web开放字体格式。越来越多的浏览器都在添加对它的支持。
这些字体格式中的一些能够互相转换。
一般在font-face中都引入各个类型的字体文件以适配所有浏览器。
使用
@font-face { font-family: 'Glyphicons Halflings'; src: url("../fonts/glyphicons-halflings-regular.eot"); src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");}
首先声明了引入字体的名称。
然后src定义了字体文件路径:
- 首先为ie8及以前的版本指明了EOT版本的字体文件路径。这个声明和其他声明分开的原因是因为IE浏览器无法理解在src中使用逗号来分割的多个值。
- 第二个src值列出了针对非IE浏览器的所有字体文件。
- 每个浏览器都会扫描这个字体文件列表,直到找到一个合适的字体文件为止,然后它就会下载文件,也只有下载下来的文件才会显示成文本。
- 每个字体文件声明都包括一个字体文件的路径,以及格式的提示,如format(“woff”)。格式提示是可选的,但包含这个的话能够提醒浏览器每个字体文件的具体格式,能避免浏览器下载不能使用的文件。
所有的浏览器,除了IE8及以前的版本之外,在CSS规则的字体定义中真正使用这个字体之前,是不会做任何下载的。这意味着你可以在样式表中声明大量的@font-face规则,只要你的页面中并没有什么地方实际使用到这些字体,浏览器就不会发起一个额外的HTTP请求下载字体。
相反地,IE8及之前版本的浏览器只要遇到EOT文件的声明就会下载他。
woff字体放在最前面是因为它是标准,我们希望浏览器如果支持的话会首先使用它。它同样也是尺寸最小的格式,因此最好让浏览器首先识别并使用它。
在src中有时会有local()的用法。它的用途是在@font-face中指定用户机器上本地安装的字体版本。因此如果用户已经安装了和你嵌入的字体一样的版本,就无需额外下载文件了。
- 指定font-weight的话,如果其font-family的名字和其他@font-face指定的名字相同,同时指定了bold或其他粗细度,那么在使用粗体字的时候就会使用当前声明字体。
@font-face { font-family: myFirstFont; src: local("Times New Roman"); font-weight:normal;}@font-face { font-family: myFirstFont; src: local(Consolas); font-weight:bold;}
在这里,粗体字就会使用Consolas,而正常粗细的字采用字体Times New Roman。
在CSS中添加@font-face并不会实际上使用某种字体,它只是简单链接了这些字体,使你在需要使用它们的时候可以下载并使用。
要真正使用的话就是像别的字体一样添加到font或font-family声明的字体栈中。
性能
由于字体的下载,可能会造成滞后的效果。
对于非西方语言的字体,如中文或日文,包含成千上万的字符,大小通常会按兆来计算。这些巨大的字体文件一般会花费很长的时间下载。
有很多方法可以减少这种等待:
- 保持字体文件尽可能小。
- 把@font-face规则放在CSS的最上方,这会增加字体文件优先加载的几率,比如它就可能比背景图片更早加载。
- 让浏览器尽快启动字体文件的加载。比如在页面开始处的隐藏元素里面就请求对字体的使用。有很多图片预加载技术可以应用到字体文件上。
- 将HTTP缓存的超时设置的很长,这样能保证字体文件只被下载一次。浏览器会缓存这个字体文件,并且很长时间之内不再发送请求。这对页面的第一次访问没有任何帮助,但对后续的请求还是很有好处的。
- 使用Gzip压缩字体文件。
- CSS学习笔记:@font-face
- CSS学习-@font-face属性
- css @font-face
- css网络字体@font-face
- CSS生成字体@font-face
- CSS @font-face(CSS 自定义字体)
- CSS @font-face(CSS 自定义字体)
- CSS @font-face(CSS 自定义字体)
- CSS @font-face(CSS 自定义字体)
- CSS自定义字体(@font-face选择符)
- CSS自定义字体(@font-face选择符)
- CSS使用网络字体(@font-face)详析
- css中定义font-face的使用方法
- 关于css里的@font-face 和font-family属性
- 网页中引入字体@font-face 笔记
- @font-face
- @font-face
- font-face
- HTML+CSS学习笔记二
- 【caffe学习笔记之4】利用MATLAB接口运行cifar数据集
- maven配置文件引入jdk1.8和阿里云仓库
- 线性表顺序存储结构小结
- android studio开发(android res和asset等特殊文件夹 )
- CSS学习笔记:@font-face
- MATLAB 中有哪些命令,让人相见恨晚?
- webpack前端代码优化插件
- Netty权威指南 第2版学习笔记3——Netty NIO开发指南
- 读书笔记之《Windows内核原理与实现》
- 比特币优劣比较
- CentOS7 Docker安装
- MAC设置HOST
- 每天一个 Linux 命令(16):which命令