关于 @font-face 的那些事

/

对于前端开发人员来说,一个很头痛的问题就是字体的运用,很多很酷的效果需要一些个性字体的搭配才显得完美,制作成图片是一个办法,但同时也增加了编码的工作,依赖于用户电脑中寥寥无几的字体更不靠谱,于是乎,利用服务器端字体代替客户端字体的技术出现了,例如 Cufon,sIFR,FLIR,@font-face 等,一些国外网站赞誉为“网页印刷术”。@font-face 跟同类技术相比,更加简单和灵活,相对来说也较为流行。

如何使用 @font-face

在 css 中定义字体

@font-face {
	font-family: MyFontFamily;
	src: url('Path_to_Fonts/MyFont.otf');
}

跟使用普通字体一样,在需要的地方设置 font-family

.entry-content {
	font-family: MyFontFamily, Georgia, Times New Roman, serif;
}

@font-face 各浏览器兼容性

Current Version(s) @font-face support WOFF EOT TTF/OTF SVG OpenType features enabled?
Internet Explorer 10 Since version 4 Yes Yes No No Yes
Internet Explorer 9 Since version 4 Yes Yes No No No
Internet Explorer 8 Since version 4 No Yes No No No
Internet Explorer 7 Since version 4 No Yes No No No
Internet Explorer 6 Since version 4 No Yes No No No
Firefox 3.6 Since version 3.5 Yes No Yes No No
Firefox 4-14 Since version 3.5 Yes No Yes No Yes
Safari 6 Since version 3.1 No No Yes Yes No
Safari 5.1 Since version 3.1 No No Yes Yes No
Chrome 20 Since version 4 Yes No Yes No Yes
Opera 11 Since version 10 No No Yes Yes No

@font-face 生成

fontsquirrel 提供了许多免费字体生成的 @font-face 字体包,你也可以通过上传字体生成自己的字体包。如果 fontsquirrel 生成失败,可以试试 fontface,也是一个不错的选择。

兼容性最好的 @font-face 句法

fontspring 所说,目前兼容性最好的 @font-face 句法如下,跟 fontsquirrelfontface 生成的一致。

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

@font-face 中文应用的局限性

fontsquirrel 可以上传字体的最大尺寸是2m,很少有英文字体超过2m,英文只有26个字母,加数字和标点符号,字体尺寸一般都很小,这能充分保证服务器端字体很快被加载,不至于影响页面加载速度从而干扰浏览体验,所以包括 @font-face 在内的服务器端字体技术更适用于英文站点,其他语种的站点如生成的字体尺寸很小,也是适用的,像中文这类字体尺寸动辄几十兆的,想想还是算了吧,我想没有任何浏览的用户真的有耐心等待加载完。

劼墨誌在局部使用了 @font-face 字体,那就是代码段,代码段是字母、数字和标点符号的集合,利用 @font-face 可以很好的在多浏览器下保持相同的视觉体验。

Comments