@font-face 最佳实践

要想在网页上用一种好看的字体或者 iconfont,都离不开 @font-face,实际使用起来为了兼容各个浏览器,经常需要写一长串的 @font-face 定义,今天来研究一下 @font-face 定义的最佳写法。

浏览器支持情况

IE 6-8 仅支持 eot 格式,现代浏览器基本都能支持四种格式:otf、ttf、woff 和 svg,部分较老的版本可能只支持到 otf 和 ttf。其中 woff 是 W3C 推荐的字体格式。svg 主要用来兼容老的 iOS,如 iOS 4.1 及更早版本。现在应该几乎没人用这么老的 iOS 了吧,所以基本上 eot、ttf 加 woff 就可以很好地兼容目前的桌面和移动浏览器了。

更具体的支持情况可以上 caniuse.com 查询。

最佳实践

@font-face {
  font-family: "MyFont";
  font-weight: normal;
  font-style: normal;
  src: url("myfont.eot");
  src: url("myfont.eot?#iefix") format("embedded-opentype"),
       url("myfont.woff") format("woff"),
       url("myfont.ttf") format("truetype"),
       url("myfont.svg#myfont") format("svg");
}

声明中有两条 src 定义,第二条覆盖了第一条,所以浏览器都会先来读取第二个 src。跟 font-family 的查找一样,浏览器会逐个读取,找到一个支持的格式使用。eot 格式后面所附带的 ?#iefix 是针对 IE 6-8 的 hack。

IE 6-8 是不支持 format() 这种格式说明的,只会读取类似 src:url() 这样的格式,所以 IE 6-8 会把第一个引号到最后一个引号之间的内容都当做字体的 URL,结果就会返回一个 404。因此可以加上一个 ?,后面的内容就成为一个查询字符串,解决了 404 的问题。iefix 在这里是类似于注释的东西,你可以随便写。另外在一部分 Apache 服务器中,缺少了 # 会返回 403,所以再加上 #

阅读全文 »

flight