
CSS @font-face 网页字体加载策略
本文主要介绍网页字体加载策略:
@font-face 用法
CSS @font-face
用户定义网站使用的字体,用法如下:
@font-face {
font-family: 'diyfont';
src: url('diyfont.eot'); /* IE9+ */
src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('diyfont.woff') format('woff'),
/* chrome、firefox */ url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
在浏览器中使用字体需要注意:
- 需要兼容当前的主流浏览器,需同时使用 TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg) 四种字体格式。
- 嵌入 HTML 文档的字体是指将 OpenType 字体(压缩的 TrueType 字体)文件映射到客户端系统,用来提供 HTML 文档使用该字体,或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
- .eot(Embedded Open Type) 为 IE 的私有字体格式。Safari3.1 开始支持 .ttf(TrueType) 和 .otf(OpenType)。
- 未来 .woff(Web Open Font Format) 将会取代 .ttf(TrueType) 和 .otf(OpenType) 两种字体格式。
什么时候会下载字体?
上面讲了字体的基本知识,那你有没有想过,字体是在什么时候下载的呢?当我们仅仅在 CSS 中定义如下样式的时候, 页面加载,字体会自动下载吗?
很遗憾,字体并不会下载。 通常情况下,只有当我们的页面元素用到了 @font-face
中定义的字体的情况下,才会下载对应的字体。
注意: 这里我们说了是通常情况,这是因为,IE8 在只要是定义了
@font-face
,即使页面元素没有使用对应的字体,也会下载。
比如在 Firefox 和 IE 9+ 中,遇到如下情况也会下载字体:
<style>
#test {
font-family: Lato;
}
</style>
<div id="test"></div>
有什么特别之处呢?你可能注意到了,这个元素虽然使用到了 font-family: Lato
样式,但是这个元素并没有任何文本啊!!!。按照我们的理想情况,应该是,只有有文字内容才会去下载字体嘛。而这就是 Chrome, Safari (WebKit/Blink 等) 浏览器的行为。
Chrome, Safari (WebKit/Blink 等)浏览器只有在如下类似情况才会去下载字体:
<style>
#test {
font-family: Lato;
}
</style>
<div id="test">这里是有文本的哦</div>