Tag Archives: WebFont

Google Font API网络字体

Posted on by

Google在今年的Google I/O大会上发布了一个新的服务 Font API，让我们可以方便的使用网络字体。
它使用css 的@font-face来引入字体，事实上这东西很早就有了，只是目前才又将其重新拿了出来扯淡。到目前为止大部分的浏览器支持该属性，以下是浏览器兼容性表。

浏览器 最低版本 支持字体
Internet Explorer 4.0 只支持OpenType字体(eof格式)
Firefox (Gecko) 3.5 (1.9.1) TrueType(ttf格式)和OpenType 字体
Opera 10.0 TrueType和OpenType 字体
Safari (WebKit) 3.1 (525) TrueType和OpenType 字体

当然除了兼容性问题外，各个浏览器对其处理的行为也不一致。

  • Chrome会继续渲染页面剩下的部分，但是在web字体被载入之前，使用该字体的文本位置显示为空白。
  • Firefox先用默认字体显示，当web字体载入后再使用它重新渲染一次。
  • Safari会继续渲染页面剩下的部分，但是在web字体被载入之前，使用该字体的文本位置显示为空白。
  • IE会继续渲染页面剩下的部分，但是在web字体被载入之前，使用该字体的文本位置显示为空白。

另外，在IE中最好将link标签放到<head>中的第一个,如果link放在了<script>标签之后，整张网页在字体被载入前会被阻塞并且不显示任何内容。
所以Google 就搞了个WebFont Loader出来，将所有浏览器的行为搞得跟Firefox一致。

WebFont这玩意也只适合英文网站，中文字体太大，目前的网速来看，要快速下载下来，还是有点困难滴。
-EOF-