98

自从使用Cufon带来麻烦之后，我就冒险不使用外部字体资源，但是最近，我一直在寻找替代方法来加载字体，以查看是否有更好的方法。更好的方法有一种突如其来的出现方式。

那里有很多新方法，每种方法似乎都有变化。我应该使用typekit吗？或Google webfonts（使用js或css）？我应该继续使用本地加载的字体（例如fontsquirrel.com生成的方法）吗？

我将在下面列出一些测试方法，这些方法似乎是最受人们欢迎的方法，但是真的值得一试使用webfont吗？似乎它将承担较高的资源负载（http请求），而文件格式类型较少（兼容性较差）等。但是在大多数情况下，文件似乎是异步且高效地加载的。

这只是情况和需求的问题吗？如果是这样，它们是什么？
这些方法之间是否存在巨大差异？
有没有我没有列出的更好的方法？
专业人士的表现/缺点是什么？看？依赖？兼容性？

我确实在这里寻找最佳实践，性能是一件大事，但可伸缩性和易用性也是如此。更不用说，外观和感觉。

Google CSS

仅使用外部样式表
仅使用最小的兼容文件类型
可以使用@import或<link>获取styleshee（@font-face）的内容，并将其直接放入您自己的样式表中。

检测结果

  78ms load of html
  36ms load of css

在此处输入图片说明

Google JS方法

用于webfont.js加载样式表
仅使用最小的兼容文件类型
:root用类追加元素
将脚本添加到头部。

检测结果

    171ms load of html
    176ms load of js
    32ms load of css

在此处输入图片说明

Typekit方法

:root用类追加元素。
可以使用*.js摘要或外部加载的文件*.js文件
使用data:font/opentype代替字体文件。
将脚本添加到头部
将嵌入式CSS添加到头部
将外部样式表添加到头部

您可以从typekit.com轻松添加/删除/调整字体和目标选择器

检测结果

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

在此处输入图片说明

…＆字体松鼠法

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

…或使用data：font方法…

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

— 亲爱的
source

4

这是一个很好的问题。

— dachi 2014年

1

我不确定这是否是最好的方法，但我总是这样使用Google CSS<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>

— lefoy 2014年

我已经开发了一个像font-squirrel的网站，仅用于本地Georgianwebfonts。我正在使用字体松鼠方法，并且我也想看到一个很好的答案。

— dachi 2014年

1

这是一篇关于如何声明防弹@font-face声明的非常不错的文章，也许您可以找到有用的信息。paulirish.com/2009/bulletproof-font-face-implementation-syntax

— lefoy 2014年

如果您不接受任何答案，我会在有机会获得更好/改进答案的情况下开始悬赏。

— 2014年

34

首先，我将澄清有关Google产品的一些信息。它实际上将加载您的浏览器可以处理的最小格式。WOFF提供小的文件大小，并且您的浏览器支持它，因此您会看到它。WOFF也得到了广泛的支持。但是，例如在Opera中，您可能会获得字体的TrueType版本。

我相信，文件大小逻辑也是为什么Font Squirrel按该顺序尝试它们的原因。但这主要是我的猜测。

如果您在每个请求和字节都很重要的环境中工作，则必须进行一些性能分析以找出最适合您的用例的情况。人们会只浏览一页，而不再浏览吗？如果是这样，则缓存规则并不重要。如果他们正在浏览或返回，则Google的缓存规则可能比您的服务器更好。延迟是更大的问题还是带宽？如果存在延迟，请减少请求数量，因此请在本地托管并尽可能合并文件。如果有带宽，则以最后一个最小的代码和最小的字体格式选择。

现在，讨论CSS vs JS。让我们看一下以下HTML：

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

在许多情况下，script1，style1，和style2会阻塞。这意味着在资源被加载之前，浏览器无法继续显示文档（尽管现代浏览器对此稍有误解）。实际上这可能是一件好事，尤其是对于样式表。它防止了未样式化内容的闪烁，并且还防止了应用样式时可能发生的巨大变化（而且对用户而言，转移内容确实很烦人）。

另一方面，script2不会被阻止。稍后可以加载它，浏览器可以继续分析和显示文档的其余部分。这样也可以是有益的。

具体讲字体（更具体地说是Google提供的字体），我可能会坚持使用CSS方法（我喜欢，@import因为它一直使用样式表进行样式设置，但那可能只是我自己）。脚本（http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js）加载的JS文件比@font-face声明要大，并且看起来需要做很多工作。而且我不认为加载实际的字体本身（WOFF或TTF）会阻塞，因此不应延迟太多。我个人并不是CDN的忠实拥护者，但事实是它们确实非常快。Google的服务器将以压倒性优势击败大多数共享托管计划，并且由于它们的字体如此受欢迎，人们甚至可能已经对其进行了缓存。

这就是我所拥有的。

我没有使用Typekit的经验，因此没有进行理论上的探讨。如果有任何不准确之处，请不要将浏览器之间的概括性作为参数考虑在内。

— 扎克兔
source

我认为大部分情况都是视情况而定，但是您也对阻塞和FOUT问题做了很好的说明。我在这里读到：paulirish.com/2009/fighting-the-font-face-fout＆stevesouders.com/blog/2009/10/13/font-face-and-performance。我将运行一些测试并在今晚发布性能差异。感谢您的宝贵见解。

— darcher 2014年

11

我认为您已经很好地解决了加载时间问题。从我的角度来看，应该将一些来源添加到列表中，还应该检查一些其他注意事项以全面了解这些选项。

其他一些著名的字体来源

云印刷术

http://www.typography.com/cloud/

据我所知，字体是作为数据嵌入到CSS文件中的：

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
}

这是我的规格：

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

这是他们对其部署的非常高级的描述。

Fonts.com

我没有使用过这项服务，但他们是一家非常成熟的字体供应商，他们在其网站上列出的信息令人印象深刻。我没有确切的方法规范，但是我确实知道它们具有以下功能：

世界上一些最知名的字体
一个非常大的字体库（超过20,000个）
用于制作模型的桌面字体下载
用于在浏览器中测试Web字体的自定义工具
精细的排版控件和子集
自托管选项

字体春天

与FontSquirrel关联。可以在这里以固定价格购买字体。随附随附CSS的字体文件，可以将其部署在您自己的服务器上，就像FontSquirrel一样。

扩展规格

关于每种字体服务的总体优缺点，以下是一些比较：

字体库大小

Fonts.com：20,000
FontSpring：1000+
字体松鼠：300+
谷歌：600+
打字工具：900+
Typography.com（cloud.typography.com）：可能超过300个（35个家庭）

价钱

Fonts.com：每月$ 20，可获得500,000次页面浏览
FontSpring：因字体而异（一次性购买字体）
FontSquirrel：免费
Google：免费
Typekit：每月$ 4，可浏览500,000次网页
Typography.com：$ 12.50 / month for 1,000,000 page views

字型品质

网络字体的质量可能会相差很大。这可以包含字母形式本身或字符集的间距或大小之类的内容。所有这些决定了字体的整体质量印象。虽然免费选项提供了一些不错的选择，但是它们也提供了一些质量不高的字体，因此您需要从这些资源中仔细选择。

Fonts.com：高
FontSpring：混合到高
FontSquirrel：混合
Google：混合
打字工具：高
Typography.com：非常高（我给它起“非常高”的称号，因为Fonts.com，FontSpring和Typekit支持多种类型的铸造厂，而这只是H＆FJ铸造厂的字体，在世界上是最好的）

字体质量II：字体

桌面字体有很多改进，这些改进确实很难用到网络字体中。其中一些服务提供了交付这些服务的方法。

Fonts.com：字距调整，字符间距，连字，替代字符，分数，等等。
FontSpring：无
FontSquirrel：无
Google：无
Typekit：无
Typography.com：小写字母，连字，备用字符，备用数字样式，分数等。

浏览器支持

这主要归结为每种服务支持的字体格式。主要的是：

EOT：适用于Internet Explorer（IE 4+）
TrueType和OpenType：传统格式（Safari 3.1 +，FF 3.5 +，Opera 10+）
WOFF：网络字体的新标准（FF 3.6 +，Chrome 5+）
SVG：IOS <4.2

更多信息，请参见@ Font-Face规则和有用的Web字体技巧

所有这些服务都支持主要的字体格式。对于自托管字体，只要使用正确的语法，就应该涵盖在内。这是FontSpring 2011年防弹语法的更新：

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

成效I：下载

据我了解，使用以上语法可以使浏览器获取适用于它们的特定格式，因此不会浪费下载不起作用的字体格式。

诸如Fonts.com，Typekit或Typography.com之类的付费服务使用方法来检测正确的格式，然后提供正确的字体格式（通常作为CSS文件中的base64数据）。

据我所知，对于高速互联网用户，上面列出的方法的差异可以忽略不计（似乎相差小于200毫秒），但对于速度较慢的网络上的设备（尤其是未缓存的网页点击），可能值得考虑。

表现二：子集

如果您只知道要使用某些字符，则可以使用字符的子集来构建字体，从而减小下载的大小。

Fonts.com：非常详细的控件
FontSpring：可以通过FontSquirrel Webfont生成器重新编译为子集
FontSquirrel：可以通过webfont生成器重新编译为子集
Google：非常详细的控件
Typekit：“所有字符”或“默认”的有限选项
Typography.com：非常详细的控件

绩效三：交付

Fonts.com：全局CDN 或您自己的服务器
FontSpring：基于您的服务器
FontSquirrel：基于您的服务器
Google：全球超级CDN
Typekit：全球CDN
Typography.com：全球CDN（125,000台服务器）

语言支持

Fonts.com：40种语言，包括亚洲和中东
FontSpring：西方，取决于字体
FontSquirrel：西方，取决于字体
Google：西方语言，具体取决于字体
Typekit：西方，取决于字体
Typography.com：西方，取决于字体

测试与实施

Fonts.com：非常容易，具有广泛且可自定义的工具
FontSpring：技术（自己动手做）
FontSquirrel：技术性（自己动手做）
Google：简单
打字工具：简单
Typography.com：易于测试，一旦部署将涉及更多更改

— 恩沃尔顿
source

这不能回答OP的问题。它只是比较了几种Webfonts。

— stackErr 2014年

这是每个供应商提供的信息最多的信息，感谢您提供的所有信息！

— darcher 2014年

10

好吧，正如你所追求的

...在这里寻找最佳实践，性能很重要，但可伸缩性和易用性也很重要。更不用说，外观和感觉。

答案是（就像在网页设计中一样）：这取决于！

可以肯定的是，我不建议您使用JS方法（如您的第二个示例所示）。

我个人不喜欢根据Javascript来制作演示性内容和CSS样式，即使绝大多数用户都启用了它。这是一个不要混淆的问题。

正如您在给定示例中看到的那样，存在某种FOUC（未样式化内容），因为在字体可用之前，浏览器已经渲染了该页面。页面一被重绘。站点越大，对（性能）的影响越大！

因此，我永远不会使用任何JS解决方案来嵌入字体。

现在让我们看一下纯CSS方法。
由于相当长的一段时间，这里是关于“ vs. @import”的讨论。我个人更喜欢避免使用@import，并且始终<link>仅使用。但这主要是个人喜好问题。实际上，您永远不应该做的一件事就是将两者混在一起！

本地与CDN
决定是在本地托管字体文件还是使用CDN时，恕我直言，这主要取决于不同字体的数量以及要嵌入的相应字体。

为什么这很重要或起作用？
从性能的角度来看，我建议在（一个）样式表中包括编码的Base64字体。但是只有.woff格式，因为几乎所有现代浏览器都使用.woff格式，这对大多数访问者而言都是如此。对于所有其他用户，您可以接受其他请求。

但是由于Base64编码引起的“开销”和字体文件的大小（即使是.woff格式），如果您使用的字体不超过3种或4种以上，则仅应使用此技术。并始终确保您的服务器提供gzip压缩后的（CSS）文件。

这样做的最大好处是，您不需要额外的字体文件请求。并且在首页加载后（无论网站的哪个页面），都会缓存CSS文件。如果您使用HTML5应用程序缓存（这肯定会做到），这也是一个优势。

除了事实，作者在其网站上最多只能使用3种或4种不同的字体，让我们看一下使用Google CDN的方法。

首先要知道，您可以（并且应该始终）将所有所需的字体包含在一个字体中<link>，如下所示：

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

这将导致以下响应：

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

如您所见，如果用户没有在本地安装一种或多种请求的字体，则共有9个不同的字体文件，这意味着总共有10个请求（包括link元素之一）。而且，对您的站点的每个新页面请求都会重复这些请求（尽管不会再传输任何数据）！同样，对的请求的响应<link>也不会被缓存。

建议：
毕竟，我真的建议您在样式表中包括以.woff格式Base64编码的字体文件！

请参阅这篇不错的文章，以获取示例和如何做的说明！

— 网络冲浪者
source

多亏了，一直在寻找这个解决方案！

— 2014年

3

我使用内联css方法，因为额外请求的开销大于bease64编码时的大小增加。服务器的cszip文件通过gizip压缩还进一步抵消了这一点。

另一种选择是使用字体的异步加载，但是大多数情况下，用户将在加载后看到字体弹出。

无论使用哪种方法，都可以通过仅包括将要使用的字符集来减小字体文件的大小。

— 克里斯·古纳瓦德纳（Chris Gunawardena）
source

使用HTTP2时，上面没有提到额外的开销。

— 克里斯·古纳瓦德纳

1

我个人使用Google字体。它们有多种选择，并且最近也通过迁移到Zopfli压缩来改进字体的压缩。Google正在努力使网络速度更快，因此我想在这方面也会有更多的优化。

无论选择什么作为外包字体交付，总会因获取字体的请求而降低速度。从速度的角度来看，最好的办法是自己提供字体。如果您不在乎从外包交付中加载所需的毫秒数，那么如果您认为使用它们的简便性值得毫秒，那么您应该选择这样做。

我不了解Typekit及其它字体，但是使用Google字体，您可以选择作为特定的子集和字符范围来使用，以进一步加快交付速度。

选择一个子集：

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

选择字符范围：

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

您可以使用dns-prefetch进一步提高字体交付的速度。

我确实并希望Google会竭尽所能，以尽可能加快字体的交付。加载它们所需的毫秒数不会损害我的网站，因此我很乐意使用它们。

长话短说：

如果以毫秒为单位的字体交付会伤害您的网站，例如使网站加载超过建议的1秒钟，那么我认为您应该自己托管它们。

— 杰里米·卡尔森（Jeremy Karlsson）
source

1

好的一点是，<link rel=dns-prefetch href='//fonts.googleapis.com'>我将其用于分析，热映射和子域，由于某种原因，它没有注册运行外部webfonts。而且加载时间因字体而异，我想如果您使用的是相当流行的字体（可能已缓存）或仅选择了少数几种字体，则使用webfonts是一个非常不错的字体来源。我将很快在这里发布测试速度。

— darcher 2014年

1

最好的选择是使用ajax导入字体，如下所示：

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

我在网页上进行此操作，并在Google Insights测试中提高了9分。

— Phok7
source

有趣。我将不得不使用这种方法研究PageSpeeds。

— darcher

2

那async属性呢？它做同样的事情。

— Tymek

Webfonts还是本地加载的字体？

Google CSS

Google JS方法

Typekit方法

…＆字体松鼠法

其他一些著名的字体来源

云印刷术

Fonts.com

字体春天

扩展规格

字体库大小

价钱

字型品质

字体质量II：字体

浏览器支持

成效I：下载

表现二：子集

绩效三：交付

语言支持

测试与实施