css3 - 从2012年末开始实现@ font-face

我花了几个晚上的时间来研究在当今的浏览器中实现@Font Face的最佳方法。我是一名全职网络/系统开发人员，有平面设计师的背景，我发现随着网页设计变得越来越有趣，机会和可能性也越来越大。所以，我做了一些测试，想听听是否有人对此有建议，有什么更好的想法或意见。我的测试场景是这样的。
我用许多不同的在线工具和应用程序进行了测试，但最后我将其归结为一个在线服务和一个应用程序。
Fontsquirrel，免费在线工具。http://www.fontsquirrel.com/fontface/generator
FontXchange，Mac/Win应用-99美元。http://fontgear.net/fontxchange.html
我使用的字体是我的Mac电脑附带的泰米尔桑加姆纳博尔德和泰米尔桑加姆纳博尔德，都是开放式，.otf。
塔米尔桑加曼.otf-290 kb
塔米尔桑加门博尔德.otf-271 KB
正在研究转换大小
松鼠
这是一个很好的在线工具，非常好。有几个不同的模式，我用了基本和最优的。我的.otf文件的输出是svg、ttf、eot和woff。
基本的
规则的
塔米尔桑加曼.svg 233 KB
塔米尔桑加曼.ttf 71 kb
泰米尔桑加曼电力公司25 kb
塔米尔桑加曼30 kb
总计：359 KB
大胆的
tamilsangammnbold.svg 225千字节
tamilsangammnbold.ttf 69千字节
泰米尔桑加门堡.eot 25 kb
塔米尔桑加门博尔德.woff 30 KB
总计：349 KB
最优的
我注意到优化字体的第一件事是它们比基本的变体要小得多，大约260kb！
规则的
tamilsangamn.svg 33 kb
泰米尔桑加曼.ttf 25 kb
泰米尔桑加曼15 kb
泰米尔桑加曼.woff 17 kb
总计：90公斤
大胆的
tamilsangammnbold.svg 33 KB
tamilsangammnbold.ttf 25千字节
泰米尔桑甘姆博德.eot 15 kb
tamilsangammnbold.woff 17千字节
总计：90公斤
字体转换
这个工具所能做的远不止是为网络处理字体。它可以相互转换多种格式，如opentype、true type、web字体、post脚本等。结果是总体质量非常高，文件非常大，几乎是Fontsquirrels基本版本的两倍大，比Fontsquirrels优化版本大7倍多。
规则的
tamilsangamn.svg 480 KB
塔米尔桑加曼.ttf 72 kb
泰米尔桑加曼电动汽车72kb
塔米尔桑加曼.woff 80 kb
总计：704 KB
大胆的
tamilsangammnbold.svg 463 kb
tamilsangammnbold.ttf 69千字节
泰米尔桑加门堡.eot 70 kb
塔米尔桑加门博尔德.woff 80 kb
总计：682 KB
设置css
一开始我有点困惑，字体列表中的实际顺序很重要。然后我发现有些格式采用了它认为兼容的第一种格式，而不是坚持最理想的格式——这很糟糕。经过一些努力，我发现这是格式化css的最佳方式（注意文件类型的顺序重要！）.

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

我的测试结果
常规字体
我确实用一个*
火狐Mac（15.0.1）
Fontsquirrel Optimal:使一点变胖
Fontsquirrel basic:使有点胖
FontXchange4.0：渲染有点胖，但字距比FontSquirrel版本好*
Firefox Windows（15.0.1版）
Fontsquirrel优化：渲染得非常好
Fontsquirrel basic:字体变得锯齿状/波状
Fontxchange 4.0:渲染得非常好*
Safari Mac（6.0版）
Fontsquirrel优化：完美渲染
Fontsquirrel Basic:完美渲染
Fontxchange 4.0:完美呈现*
铬Mac（21.0）
丰松鼠最佳：有点胖
Fontsquirrel basic：有点胖
Fontxchange 4.0:完美呈现*
Chrome窗口（21.0）
Fontsquirrel优化：完美渲染
Fontsquirrel Basic:完美渲染
Fontxchange 4.0:完美呈现*
Internet Explorer（9.0）
Fontsquirrel优化：完美渲染*
Fontsquirrel Basic:完美渲染
FontXchange 4.0:字体变得参差不齐/不规则
粗体字体
火狐Mac（15.0.1）
Fontsquirrel优化：使非常胖*
Fontsquirrel basic：非常胖
FontXchange4.0：呈现非常胖，但是更好的字距调整（我想为Mac选择这个，但是因为Windows版本的Firefox在这里不兼容，所以它必须走）
Firefox Windows（15.0.1版）
Fontsquirrel优化：渲染正常，不太反锯齿*
Fontsquirrel basic:字体变得锯齿状/波状
FontXchange 4.0:字体有点扭曲/锯齿状
Safari Mac（6.0版）
Fontsquirrel优化：完美渲染*
Fontsquirrel Basic:完美渲染
Fontxchange 4.0:呈现脂肪
铬Mac（21.0）
Fontsquirrel优化：完美渲染*
Fontsquirrel basic：很好的渲染效果，只有脂肪的百分之几
Fontxchange 4.0:呈现脂肪
Chrome窗口（21.0）
Fontsquirrel优化：完美渲染*
Fontsquirrel Basic:完美渲染
Fontxchange 4.0:使非常胖
Internet Explorer（9.0）
Fontsquirrel优化：完美渲染*
Fontsquirrel Basic:完美渲染
FontXchange 4.0:字体变得参差不齐/不规则
最终实施
我通常按照以下模式组织我的web字体，///

/* Regular */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
    src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
         url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

结果的图形概述（fullsize athttp://i.stack.imgur.com/atb98.png）
结论和任务
没有一个工具可以在所有浏览器的Mac和Windows上提供漂亮的字体。你必须对每种字体进行实验和测试。上面的方法只是一个简单的方法和建议，如何测试和实验@Font Face。
您认为我的方法或实现中有什么可以更改的地方吗？我错过了什么应用程序或服务吗？
全力以赴/t

最佳答案

@字体面代码
您可以添加src: local('ò?'),以查找具有此名称的本地字体，如果本地字体与您的自定义字体同名，则强制浏览器忽略这些字体。您也可以反向使用它来限制自定义字体的下载。参见移动支持
我通常在标准src之后的第二行看到?#iefix行，尽管我不能说我曾经需要它，也不知道是否需要特定的定位（除了前面列出的.eot）。
对字体的附加控制
如果你想在字体加载失败的情况下对字体进行更多的控制，或者在ie中处理fouc，我有一个jquery插件，可以让你在加载时隐藏字体，并允许你在失败时更改字体大小，这样你的回退字体就不会破坏你的布局。How to know if a font (@font-face) has already been loaded?
IE6—8缺陷
此外，IE6-8可能会对某些字体的.eot文件产生问题。这可以通过以下任一方法解决：
正在联机转换新的.eot文件。如果这不起作用，那么问题在于文件属性本身。
使用FontForge编辑字体文件的名称属性，然后重新保存并重新转换。
科斯
似乎只与ie和ff有关。所有其他浏览器（只测试最新版本）都没有问题。
cors是字体的常见问题，当您从另一个域或主机名加载字体时会发生。这包括是否使用.eot指定站点。www代码需要相对引用，css文件也需要相对引用。如果在html中定义@font-face标记，也会有问题。如果这是不可能的，或者如果您不想担心cors，那么您需要将以下代码放在字体目录中的<base>文件中：

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

MIME类型
404字体服务问题可能由不正确的mime定义引起，请参阅此处的详细信息：full guide here
移动支持
移动支持相当糟糕。android直到4.0才支持它，据我所知，windows mobile根本不支持它。我正在调查解决这个问题的方法。到目前为止，我最好使用Mime type for WOFF fonts?在字体加载失败时显示文本的图片。这真的只适用于网站标题和图标，否则这是一个可怕的糟糕的工作，不利于搜索引擎优化和糟糕的用户体验。
How to know if a font (@font-face) has already been loaded?
此外，如果您的.htaccess使用@font-face，android 2.2-x.x.x版本将失败，这也被用作ie的修复程序。如果您想覆盖所有基础，可能需要多个样式表。在此处查看更多信息：See @font-face support.
SVG和Chrome
如果在url中包含local()，chrome将不使用svg字体。它还将在svg之前使用woff，但渲染效果不好。这可能就是为什么每个人都对Chrome中糟糕的字体渲染感到恼火的原因…要克服这个问题，需要额外的@FONT FACE声明：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'myFont';
        src: url('fonts/myFont.svg') format('svg');
    }
}