截至 2012 年底实施 @font-face

Question

我花了几个晚上来研究在当今现代浏览器中实现 @font-face 的最佳方式。我是一名全职网络/系统开发人员，具有平面设计师背景，我发现网页设计的机会和可能性变得越来越有趣。所以，我做了一些测试，想听听是否有人对此有建议、更好的想法或意见。我的测试场景是这样的。

我使用了很多不同的在线工具和应用程序进行了测试，但最后我将其归结为一个在线服务和一个应用程序。

• FontSquirrel，在线工具 - 免费。 http://www.fontsquirrel.com/fontface/generator
• FontXChange，适用于 mac/win 的应用程序 - 99 美元。 http://fontgear.net/fontxchange.html

我使用了 Mac 附带的字体 Tamil Sangam MN 和 Tamil Sangam MN Bold，它们都是开放式 .otf。

• TamilSangamMN.otf - 290 KB
• TamilSangamMNBold.otf - 271 KB

调查转化规模

字体松鼠

这是一个很好的在线工具，非常好。有几种不同的模式，我使用了 Basic 和 Optimal。我的 .otf 文件的输出是 svg、ttf、eot 和 woff。

基本

常规

• TamilSangamMN.svg 233 KB
• TamilSangamMN.ttf 71 KB
• TamilSangamMN.eot 25 KB
• TamilSangamMN.woff 30 KB
• 总计：359 KB

粗体

• TamilSangamMNbold.svg 225 KB
• TamilSangamMNbold.ttf 69 KB
• TamilSangamMNbold.eot 25 KB
• TamilSangamMNbold.woff 30 KB
• 总计：349 KB

最佳

我注意到最佳字体的第一件事是它们比基本变体小得多~ 260 KB！

常规

• TamilSangamMN.svg 33 KB
• TamilSangamMN.ttf 25 KB
• TamilSangamMN.eot 15 KB
• TamilSangamMN.woff 17 KB
• 总计：90 KB

粗体

• TamilSangamMNbold.svg 33 KB
• TamilSangamMNbold.ttf 25 KB
• TamilSangamMNbold.eot 15 KB
• TamilSangamMNbold.woff 17 KB
• 总计：90 KB

字体转换

这个工具可以做的不仅仅是处理网络字体。它可以相互转换多种格式；比如opentype、true type、web fonts、post script等等。结果是总体质量非常高，文件非常大，几乎是 FontSquirrels Basic 版本的两倍，是 FontSquirrels Optimal 版本的 7 倍以上。

常规

• TamilSangamMN.svg 480 KB
• TamilSangamMN.ttf 72 KB
• TamilSangamMN.eot 72 KB
• TamilSangamMN.woff 80 KB
• 总计：704 KB

粗体

• TamilSangamMNbold.svg 463 KB
• TamilSangamMNbold.ttf 69 KB
• TamilSangamMNbold.eot 70 KB
• TamilSangamMNbold.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;
}

我的测试结果

常规字体

我确实用 * 标记了最佳版本

Firefox MAC (15.0.1)

• FontSquirrel Optimal：渲染得有点肥
• FontSquirrel Basic：渲染得有点肥
• FontXChange 4.0：渲染有点胖，但字距调整优于 FontSquirrel 版本 *

Firefox Windows (15.0.1)

• FontSquirrel Optimal：渲染得非常好
• FontSquirrel Basic：字体出现锯齿状/不连贯
• FontXChange 4.0：渲染得非常好*

Safari Mac (6.0)

• FontSquirrel Optimal：完美渲染
• FontSquirrel Basic：完美渲染
• FontXChange 4.0：完美渲染 *

Chrome Mac (21.0)

• FontSquirrel Optimal：有点胖
• FontSquirrel Basic：有点胖
• FontXChange 4.0：完美渲染 *

Chrome Windows (21.0)

• FontSquirrel Optimal：完美渲染
• FontSquirrel Basic：完美渲染
• FontXChange 4.0：完美渲染 *

Internet Explorer (9.0)

• FontSquirrel Optimal：完美渲染 *
• FontSquirrel Basic：完美渲染
• FontXChange 4.0：字体出现锯齿状/不连贯

粗体字

Firefox MAC (15.0.1)

• FontSquirrel Optimal：渲染得非常肥大*
• FontSquirrel Basic：渲染得很肥
• FontXChange 4.0：渲染非常肥大，但字距调整更好（我想为 mac 选择这个，但由于 windows 版本的 firefox 在这里不兼容，所以必须去）

Firefox Windows (15.0.1)

• FontSquirrel Optimal：渲染正常，抗锯齿效果不是很好*
• FontSquirrel Basic：字体出现锯齿状/不连贯
• FontXChange 4.0：字体有点扭曲/锯齿

Safari Mac (6.0)

• FontSquirrel Optimal：完美渲染 *
• FontSquirrel Basic：完美渲染
• FontXChange 4.0：渲染肥大

Chrome Mac (21.0)

• FontSquirrel Optimal：完美渲染 *
• FontSquirrel Basic：渲染效果不错，有几个百分比变胖
• FontXChange 4.0：渲染肥大

Chrome Windows (21.0)

• FontSquirrel Optimal：完美渲染 *
• FontSquirrel Basic：完美渲染
• FontXChange 4.0：渲染得很肥

Internet Explorer (9.0)

• FontSquirrel Optimal：完美渲染 *
• FontSquirrel Basic：完美渲染
• FontXChange 4.0：字体出现锯齿状/不连贯

最终实现

我通常按照以下模式组织我的网络字体， / / /

/* 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;
}

结果的图形概览（原图http://i.stack.imgur.com/atb98.png）

结论和任务

没有一种工具可以提供在所有浏览器中都能在 Mac 和 Windows 上呈现良好的字体。您必须对每种字体进行试验和测试。上面发布的方法只是一个简单的方法和建议如何测试和试验@font-face's。

您认为我的方法或实现有什么可以改变的吗？有没有我错过的应用程序或服务？

一切顺利/T

Answer 1

@font-face 代码

您可以添加src: local('ò?'), 以查找具有此名称的本地字体，如果它们恰好与您的自定义字体具有相同的名称，则强制浏览器忽略本地字体。您也可以反过来使用它来限制自定义字体的下载。 查看移动支持

我通常在标准.eot src 之后看到?#iefix 行，虽然我不能说我曾经需要它，也不知道是否需要特定定位（除了.eot 被列在最前面） .

对字体的额外控制

如果您在字体加载失败的情况下寻找对字体的更多控制，或者在 IE 中处理 FOUC，我有一个 jQuery 插件，它可以让您在加载时隐藏字体，并允许您在失败时更改字体大小，这样您的后备字体就不会破坏您的布局。 How to know if a font (@font-face) has already been loaded?

IE6-8 错误

此外，IE6-8 的某些字体的 .eot 文件可能存在问题。这可以通过 (full guide here) 解决：

1. 在线转换新的 .eot 文件。如果这不起作用，那么问题在于文件属性本身。
2. 使用 FontForge 编辑字体文件的名称属性，然后重新保存并重新转换。

CORS

似乎只与IE和FF有关。所有其他浏览器（仅测试最新版本）都没有问题。

CORS 是字体的常见问题，当您从另一个域或主机名加载字体时会发生这种问题。这包括是否使用www 指定您的站点。 @font-face 代码需要相对引用，CSS 文件也是如此。如果在您的 html 中定义 <base> 标记，您也会遇到问题。如果这不可行，或者您不想担心 CORS，则需要将以下代码放在字体目录中的 .htaccess 文件中：

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

MIME 类型

字体服务的 404 问题可能是由不正确的 MIME 定义引起的，请在此处查看更多信息：Mime type for WOFF fonts?

移动支持

移动支持非常糟糕。 Android 直到 4.0 才正确支持它，据我所知，Windows Mobile 根本不支持它。我正在调查任何解决方法或解决方案。到目前为止，我最好的方法是使用How to know if a font (@font-face) has already been loaded? 在字体加载失败时显示文本图片。这真的只适用于网站标题和图标，否则这是一个非常糟糕的工作，不利于 SEO 和糟糕的用户体验。

See @font-face support.

此外，如果您的@font-face 使用local()，Android 2.2 - x.x.x 版本将失败，local() 也用作 IE 的修复程序。如果你想覆盖所有的基础，可能需要多个样式表。在此处查看更多信息：https://stackoverflow.com/a/4520467/1455709

SVG 和 Chrome

如果您在 url 中包含 #fontName，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');
    }
}