使用@ font-face – 源码巴士

@font-face规则允许将自定义字体加载到网页上。一旦添加到样式表，该规则将指示浏览器从托管位置下载字体，然后按照CSS中的指定显示字体。

如果没有规则，我们的设计将仅限于用户计算机上已经加载的字体，具体取决于所使用的系统。这是现有系统字体的详细分类。

尽可能深的浏览器支持

这是目前可能获得最深层支持的方法。 @font-face规则应在任何样式之前添加到样式表中。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

然后使用它来设置元素样式，如下所示：

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

实用的浏览器支持水平

事情正朝着WOFF和WOFF 2 转移，因此我们可能可以摆脱：

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

铬	苹果浏览器	火狐浏览器	歌剧	IE浏览器	安卓系统	的iOS
5+	5.1+	3.6+	11.50+	9+	4.4+	5.1+

稍深的浏览器支持

如果您需要在全面支持和实际支持之间找到一个快乐的中介，那么它将涵盖更多基础：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

铬	苹果浏览器	火狐浏览器	歌剧	IE浏览器	安卓系统	的iOS
3.5+	3+	3.5+	10.1+	9+	2.2+	4.3+

超级渐进式浏览器支持

如果我们要在WOFF上对服务器场进行抵押，那么我们可以预期情况会在某个时间点向WOFF2转移。这意味着我们可以通过以下方式生活在最前沿：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

铬	苹果浏览器	火狐浏览器	歌剧	IE浏览器	安卓系统	的iOS
36岁以上	没有	35岁以上（含国旗）	23+	没有	37	没有

替代技术

`@import`

虽然@font-face非常适合托管在我们自己的服务器上的字体，但是在某些情况下，托管字体解决方案会更好。 Google字体提供了这种使用字体的方法。以下是使用@import从Google Fonts加载Open Sans字体的示例：

@import url(//fonts.googleapis.com/css?family=Open+Sans);

然后，我们可以使用它来设置元素的样式：

body {
  font-family: 'Open Sans', sans-serif;
}

如果打开字体的URL ，则实际上可以看到所有@font-face幕后工作。

使用托管服务的一个好处是，它可能包含所有字体文件变体，从而确保了跨浏览器的深度兼容性，而不必自己托管所有这些文件。

有关CodePen上CSS-Tricks（ @ css-tricks ）的自定义字体，请参见使用@import的笔。

<link>制作样式表

同样，您可以在HTML文档的<head>中而不是CSS中链接到与其他CSS过滤器相同的资产。使用来自Google字体的相同示例，这是我们要使用的方法：

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

然后，我们可以像其他方法一样对元素进行样式设置：

body {
  font-family: 'Open Sans', sans-serif;
}

再次，这是导入@font-face规则，但不是将它们注入到我们的样式表中，而是将它们添加到我们HTML <head> 。

看到笔使用 > 通过CodePen上CSS-Tricks（ @ css-tricks ）获得自定义字体。

这是同一回事...两种技术都会下载所需的资产。

了解字体文件类型

这篇文章顶部的原始代码片段引用了许多带有奇怪扩展名的文件。让我们遍历每个，更好地理解它们的含义。

WOFF / WOFF2

代表： Web开放字体格式。

WOFF字体是为在Web上使用而创建的，并由Mozilla与其他组织联合开发，通常比其他格式加载速度更快，因为它们使用OpenType（OTF）和TrueType（TTF）字体使用的结构的压缩版本。此格式还可以在字体文件中包含元数据和许可证信息。这种格式似乎是获胜者，所有浏览器都在这里。

WOFF2是下一代WOFF，并且压缩效果比原始WOFF2好。

SVG / SVGZ

代表：可缩放矢量图形（字体）

SVG是字体的矢量重新创建，它使文件大小更轻巧，并且非常适合移动使用。此格式是iOS版Safari的4.1版及更低版本所允许的唯一格式。 Firefox，IE或IE Mobile当前不支持SVG字体。 Firefox已无限期推迟实施以专注于WOFF。

SVGZ是SVG的压缩版本。

EOT

代表：嵌入式开放式。

此格式由Microsoft（ @font-face的原始创新者）创建，是仅IE支持的专有文件标准。实际上，这是使用@font-face时IE8及更低版本唯一能识别的格式。

OTF / TTF

代表： OpenType字体和TrueType字体。

WOFF格式最初是作为对OTF和TTF的一种响应而创建的，部分原因是这些格式可以轻松（且非法）被复制。但是，OpenType具有许多设计人员可能感兴趣的功能（连字等）。

性能说明

Web字体非常适合设计，但了解它们对Web性能的影响也很重要。自定义字体通常会导致网站性能下降，因为必须先下载字体，然后再显示字体。

常见的症状是短暂的一刻，字体首先作为后备加载，然后闪烁到下载的字体。保罗·爱尔兰（ Paul Irish）对此发表了较旧的文章（称为“ FOUT”：无样式文本的闪光）。

这些天来 ，浏览器一般都隐藏在默认情况下自定义字体加载之前的文本。更好或更差？你决定。您可以通过多种技术对此进行一些控制。这篇文章有点超出范围，但这是Zach Leatherman撰写的三篇文章，可以帮助您入门：

在实现自定义字体时，还有更多注意事项：

观看文件大小

字体可能令人惊讶地沉重，因此倾向于提供较浅版本的选项。例如，使用50KB的字体集而不是400KB的字体集。

限制字符集（如果可能）

您真的需要一种字体的粗体和粗体吗？将字体集限制为仅加载使用的字体是一个好主意，这里有一些不错的技巧。

考虑小屏幕的系统字体

许多设备卡在糟糕的连接上。一种技巧可能是在使用@media加载自定义字体时，以较大的屏幕为目标。

在此示例中，小于1000px的屏幕将使用系统字体，而宽于或大于1000px的屏幕将使用自定义字体。

@media (min-width: 1000px) { 
  body {
    font-family: 'FontName', Fallback, sans-serif; 
  }
}

字体服务

有许多服务将托管字体并提供对商业许可字体的访问。使用服务的好处通常归结为有效交付大量合法字体（例如，在快速的CDN上提供它们）。

以下是一些托管字体服务：

那图标字体呢？

的确，@ font-face可以加载一个包含图标的字体文件，该图标可用于图标系统。但是，我认为使用SVG作为图标系统要好得多。这是两种方法的比较。