对于前端开发人员来说,一个很头痛的问题就是字体的运用,很多很酷的效果需要一些个性字体的搭配才显得完美,制作成图片是一个办法,但同时也增加了编码的工作,依赖于用户电脑中寥寥无几的字体更不靠谱,于是乎,利用服务器端字体代替客户端字体的技术出现了,例如 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 supportWOFFEOTTTF/OTFSVGOpenType features enabled?
Internet Explorer 10Since version 4YesYesNoNoYes
Internet Explorer 9Since version 4YesYesNoNoNo
Internet Explorer 8Since version 4NoYesNoNoNo
Internet Explorer 7Since version 4NoYesNoNoNo
Internet Explorer 6Since version 4NoYesNoNoNo
Firefox 3.6Since version 3.5YesNoYesNoNo
Firefox 4-14Since version 3.5YesNoYesNoYes
Safari 6Since version 3.1NoNoYesYesNo
Safari 5.1Since version 3.1NoNoYesYesNo
Chrome 20Since version 4YesNoYesNoYes
Opera 11Since version 10NoNoYesYesNo

@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 可以很好的在多浏览器下保持相同的视觉体验。