首页 > 开发 > CSS > 正文

深入理解CSS @font-face性能优化

2024-07-11 08:31:27
字体:
来源:转载
供稿:网友

本文主要介绍字体加载优化的常用策略,大部分内容为引用和翻译。

一、 font-face基本用法

font-face的基本用法想必大家都是知道的,基本上就是类似这样:

@font-face { font-family: Lato; src: url('font-lato/lato-regular-webfont.woff2') format('woff2'), url('font-lato/lato-regular-webfont.woff') format('woff'), url(font-lato/lato-regular-webfont.ttf) format("opentype");}p { font-family: Lato, serif; }

这样就可以使我们的网页用上自定义字体了。 除了font-family 和 src属性之外,还拥有font-style以及font-weight属性。 src可以指定多种字体,会按顺序依次适用,比如上面的示例中会先加载woff2字体,如果失败再加载woff字体,否则加载opentype字体。 src所支持的字体可以有以下类型:

src参数带不带引号都可以,参数的格式不同含义也不尽相同,比如下面:

src: url(fonts/simple.woff); /* 加载simple.woff,地址相对于样式表的地址 */src: url(/fonts/simple.woff); /* 加载simple.woff,地址是网站的绝对地址 */src: url(fonts/coll.otc#foo); /* 从coll.otc字符集中加载foo字体 */src: url(fonts/coll.woff2#foo); /* 从coll.woff2字符集中加载foo字体 */src: url(fonts.svg#simple); /* 加载id 为'simple'的SVG字体 */

src中加载的字体地址受跨域的约束,如果想跨域加载字体,需要设置CORS。

这就是font-face的最基础的用法。 接下来我们会进一步分析font-face的用法,并尽可能的找出优化策略。

二、 什么时候会下载字体?

上面讲了字体的基本知识,那你有没有想过,字体是在什么时候下载的呢?当我们仅仅在CSS中定义如下样式的时候, 页面加载,字体会自动下载吗?

@font-face { font-family: Lato; src: url('font-lato/lato-regular-webfont.woff2') format('woff2'), url('font-lato/lato-regular-webfont.woff') format('woff'), url(font-lato/lato-regular-webfont.ttf) format("opentype");}

很遗憾,字体并不会下载。 通常情况 下,只有当我们的页面元素用到了font-face中定义的字体的情况下,才会下载对应的字体。

注意: 这里我们说了是通常情况,这是因为,IE8在只要是定义了font-face,即使页面元素没有使用对应的字体,也会下载。

在其它浏览器中也不尽相同,

比如在 Firefox 和 IE 9+ 中,遇到如下情况也会下载字体:

html

<div id="test"></div>

css

#test { font-family: Lato;}

有什么特别之处呢? 你可能注意到了,这个元素虽然使用到了font-family: Lato样式,但是这个元素并没有任何文本啊!!!。 按照我们的理想情况,应该是,只有有文字内容才会去下载字体嘛。 而这就是Chrome, Safari (WebKit/Blink 等)浏览器的行为。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表