通过 @font-face 实现 webfonts 快速指南

Question

CSS3 的 @font-face 特性允许我们以一种可访问、可操作和可扩展的方式在网络上使用自定义字体。 但是，您可能会说：如果我们有 Cufon、sIFR 并在图像中使用文本，为什么还要使用 @font-face？

将@font-face 用于自定义字体的一些好处：

• 通过 Find (Ctrl-F)
• 屏幕阅读器等辅助技术的可访问性
• 文本是可翻译的，通过浏览器内翻译或翻译服务
• CSS 具有调整印刷显示的全部能力： line-height, letter-spacing, text-shadow, text-align, 和选择器喜欢 ::first-letter和 ::first-line

@font-face 的本质

在最基本的情况下，我们声明一个新的自定义远程字体，如下所示：

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

然后投入使用：

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

在这个 @font-face 声明中，我们使用 font-family属性来明确命名字体。 它可以是任何东西，不管字体实际上叫什么； font-family: 'SuperDuperComicSans';会很好，尽管可能不利于您的声誉。 在里面 src属性我们指向浏览器可以找到字体资产的位置。 根据浏览器的不同，一些有效的字体类型是 eot、ttf、otf、svg 或 数据 URI 。 嵌入整个字体数据的

	otf & ttf	svg	woff	eot
IE	IE9		IE9	IE5+
Firefox	FF3.5	FF3.5	FF3.6
Chrome	Chrome 4	Chrome 0.3	Chrome 5
Safari	3.1	3.1
Opera	Opera 10.00	Opera 9
iOS		iOS 1
Android	2.2

当然，没有什么比它应该的更简单。 上述代码的初始限制是它没有为 IE 6-8 提供 EOT。 防弹 @font-face 语法 提出了一种解决这个问题的方法； 接下来是一个健壮的版本。

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('☺'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

字体 松鼠生成器

诱发头痛了吗？ 如果您只想快速开始，请使用 Font Squirrel 生成器 ，该工具可以为您简化整个过程，获取您的字体并为您准备它的变体和 CSS。 今天将 webfonts 付诸实践是必不可少的。

移动支持？

Mobile Safari 支持 从 iOS 3.1 开始， SVG 网络字体，从 2.2 版开始，Android 支持 otf/ttf。 但是您的移动用户应该获得这种增强的排版体验吗？ 我建议不要。 主要原因是 WebKit 如何通过 @font-face 处理等待自定义字体的文本：文本是不可见的。 因此，在低带宽移动连接上，您的用户将看不到任何文本，直到加载了约 50k 的字体数据。 Webkit 团队正在寻求一种在几秒钟过期后打开后备字体的解决方案，但在实现之前，我认为让您的用户在他们与您的内容之间设置这样的障碍是不公平的。

网络字体服务

许多服务将 @font-face 功能包装在一个简单的 API 中，通常允许您将单个 CSS 或脚本行添加到 HTML 和一些配置中，然后您就完成了。 许多像 WebInk 、 Typekit 和 Fontslive 将允许您按月付费使用字体（有时达到带宽上限）。 使用这些服务对于临时开发人员来说非常方便，可以解决跨浏览器解决方案的一些复杂问题

Google Font API 允许您通过链接到样式表并让 Google 处理跨浏览器和性能问题来使用一组小型的、精选的免费许可字体。 这是开始使用 webfonts 的最快方式。

为@font-face寻找专业字体

设计师普遍感到惊讶的是，仅仅因为您购买了字体许可证（例如，用于您的图形设计），并不意味着您可以在@font-face 中使用它。 @font-face（或网络嵌入）的许可证通常单独出售。 仔细阅读协议，如有疑问，请随时联系字库。

Fontspring 是一家字体精品店，销售数百种优质专业字体，所有字体都已获准与@font-face 一起使用。 FontFont 和其他铸造厂已开始直接销售 @font-face 许可证，尽管目前仅针对 WOFF 和 EOT，这遗漏了相当大（但正在缩小）的浏览器市场部分。 许多铸造厂正在将网络字体许可证添加到他们的目录中，但如果您找不到适合您选择的字体的许可，请联系他们询问。

处理 FOUT

是 Unstyled Text 的 Flash Firefox 和 Opera 中的一种现象，很少有网页设计师喜欢。 当您通过@font-face 应用自定义字体时，在加载页面时会有短暂的片刻，字体尚未下载和应用，并且下一个字体在 font-family使用堆栈。 在升级之前，这会导致不同（通常不太好看）的字体闪烁。

HTML5 幻灯片组出现无样式文本的闪光 。

伴随 Google Font API 的是 WebFont Loader ，这是一个 javascript 库，旨在提供大量事件挂钩，让您对加载有很多控制。 让我们来看看如何让其他浏览器模仿 WebKit 在加载 @font-face 字体时隐藏回退文本的行为。

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
 <脚本>
 WebFont.load({
   风俗： {
     家庭：['Tagesschrift']，
     网址：['http://paulirish.com/tagesschrift.css']
   }
 });
 </脚本>
 

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

如果 JavaScript 被禁用，文本将一直保持可见，如果字体出现某种错误，它会安全地回退到基本的衬线体。 暂时将此视为权宜之计； 大多数 webfont 专家希望将后备文本隐藏 2-5 秒，然后再显示出来。 低带宽和移动设备从这个超时中受益匪浅。 可以理解的是，Mozilla 希望尽快纠正这一问题。

一个更轻量级但效率较低的解决方案是 font-size-adjust属性，目前仅在 Firefox 中支持。 它使您有机会在字体堆栈中标准化 x 高度 ，从而减少 FOUT 中的可见变化量。 事实上， Font Squirrel 生成器 刚刚添加了一项功能，它会告诉您上传字体的 x 高度比，因此您可以准确地设置 font-size-adjust价值。

概括

Webfonts 为设计师提供了相当多的自由，并且随着 自由连字和风格替代等 即将推出的功能，他们将拥有更多的灵活性。 现在，您可以放心地实施 CSS3 的这一部分，因为它涵盖了 98% 的已部署浏览器。