扩展规格

Question

自从使用 Cufon 带来的麻烦以来，我冒险使用外部字体资源，但是最近，我一直在寻找替代方法来加载字体，看看是否有＆＃39;更好的方式;更好的方法有一种突然出现的方式。

有许多新方法，并且每种方法都有变化;我应该使用 typekit 吗？或 google webfonts （使用js或css）？我应该继续使用本地加载字体（例如fontsquirrel.com生成的方法）吗？

我会列出下面看起来最受欢迎的方法，并进行一些测试，但它真的值得转向webfont吗？它似乎会带来更高的资源负载（http请求）并且文件格式类型较少（兼容性较差）等。但在大多数情况下，看起来像文件是异步和高效加载的。

这只是一个情况和需要的问题吗？如果是这样，他们是什么？
这些方法之间是否存在巨大差异？
那里有没有更好的方法我还没有上市？
专业人士的表现是什么？看？依赖呢？兼容性？

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

Google CSS

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

测试结果

  78ms load of html
  36ms load of css

enter image description here

Google JS方法

使用webfont.js加载styleshet
仅使用最小的兼容文件类型
使用类

:root

将脚本添加到头部。

测试结果

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

enter image description here

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/

enter image description here

的 ...＆安培; Font Squirrel方法

@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)
}

...或使用数据：font method ...

@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;

}

Answer 1

首先，我会澄清一下谷歌的产品。它实际上会加载浏览器可以处理的最小格式。 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不会被阻止。它可以在以后加载，浏览器可以继续解析并显示文档的其余部分。所以这也是有益的。

具体谈论字体（甚至更具体地说，谷歌的产品），我可能会坚持使用CSS方法（我喜欢@import，因为它保留了样式表的样式，但这可能只是我）。脚本（http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js）加载的JS文件大于@font-face声明，只是看起来像更多的工作。而且我不相信加载实际字体本身（WOFF或TTF）是阻塞的，所以它不应该太过延迟。我个人并不是CDN的忠实粉丝，但事实是他们真的很快。谷歌的服务器将以压倒性优势击败大多数共享主机计划，而且由于他们的字体非常受欢迎，人们甚至可能已将其缓存。

这就是我所拥有的一切。

我没有使用Typekit的经验，所以我把它从我的理论中删除了。如果存在任何不准确之处，请不要将浏览器之间的概括统计为参数，请指出它们。

Answer 2

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

其他一些声誉良好的字体来源

cloud.typography

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)

Here is their very high-level description of their deployment

Fonts.com

我还没有使用过这项服务，但他们是非常已建立的字体供应商，而且他们在其网站上列出的信息令人印象深刻。我没有关于他们确切方法的规范，但这是我所知道的：

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

FontSpring

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

扩展规格

关于每种字体服务的整体优缺点，这里有一些比较：

字体库大小

Fonts.com ：20,000 +
FontSpring ：1000 +
FontSquirrel ：300 +
Google ：600 +
Typekit ：900 +
Typography.com （cloud.typography.com）：可能超过300个（35个家庭）

定价

Fonts.com ：500,000次网页浏览每月20美元
FontSpring ：因字体而异（一次性购买字体）
FontSquirrel ：免费
Google ：免费
Typekit ：500,000次网页浏览每月4美元
Typography.com ：1,000,000次网页浏览每月12.50美元

字体质量

网络字体的质量可能会有很大差异。这可以包括字体本身或字符集的间距或大小等内容。所有这些都决定了字体给出的整体质量印象。虽然免费选项有一些不错的选择，但它们也有一些质量不高的字体，所以你想仔细选择这些来源。

Fonts.com ：高
FontSpring ：混合到高
FontSquirrel ：混合
Google ：混合
Typekit ：高
Typography.com ：非常高（我给这个＆＃34;非常高＆＃34;指定因为Fonts.com，FontSpring和Typekit支持多种类型的代工厂，这里只有字体来自H＆amp; 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＆lt; 4.2

The @Font-Face Rule And Useful Web Font Tricks

的更多信息

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

@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毫秒），但对于速度较慢的网络上的设备来说，值得考虑，特别是对于未缓存的页面点击。

表现II：子集

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

Fonts.com ：非常详细的控制
FontSpring ：可以通过FontSquirrel webfont generator重新编译为子集
FontSquirrel ：可以通过webfont generator重新编译为子集
Google ：非常详细的控制
Typekit ：＆＃34;所有字符＆＃34;的有限选项或＆＃34;默认＆＃34;
Typography.com ：非常详细的控制

表现III：交付

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 ：简单
Typekit ：简单
Typography.com ：易于测试，一旦部署就更需要更改

Answer 3

嗯，就像你追求的那样

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

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

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

我个人不喜欢根据Javascript制作表现性的东西和CSS样式，即使绝大多数用户都启用了它。这是一个不混淆的问题。

正如您在给定的示例中所看到的，存在某种FOUC（无格式内容的闪烁），因为在字体可用之前，页面已经由浏览器呈现。一旦这样，页面就会重新绘制。而且网站越大，（性能）影响越大！

所以我永远不会使用任何JS解决方案进行字体嵌入。

现在让我们来看看纯CSS方法很长一段时间这里是关于“与@import”的讨论。我个人更喜欢避免使用@import并且只使用<link>。但这主要是个人偏好的问题。你永远不应该做的一件事就是将它们混合在一起！

本地与CDN
在决定是否在本地托管您的字体文件或使用CDN时，主要取决于您想要嵌入的不同字体和相应字体的数量。

为什么这很重要，或起作用？从性能的角度来看，我建议在您的（一个）样式表中包含字体Base64编码。但只有.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>请求的响应。

<强>建议：
毕竟我真的建议你的样式表中包含.woff格式的Base64编码的字体文件！

See this nice article有关如何操作的示例和说明！

Answer 4

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

其他选项是使用异步加载字体，但大多数情况下用户会在加载后看到弹出的字体。

无论使用哪种方法，只需包含您将使用的字符集，即可减小字体文件的大小。

Answer 5

我个人使用Google字体。他们有各种各样的选择，他们最近也improved compression on the fonts by moving to Zopfli compression。谷歌正在努力使网络更快，所以我想这部分的更多优化也将来自他们。

无论您选择哪种外包字体，您都可以通过获取字体的请求来降低速度。从速度的角度来看，最好的事情就是自己提供字体。如果您不关心从外包交付加载所需的额外毫秒数，那么如果您认为使用它们的便利性值几毫秒，则应该使用它。

我不知道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秒，我认为您应该自己托管它们。

Answer 6

最好的选择是使用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分。

Webfonts或本地加载的字体？

Google CSS

Google JS方法

Typekit方法

的 ...＆安培; Font Squirrel方法

6 个答案:

其他一些声誉良好的字体来源

cloud.typography

Fonts.com

FontSpring

扩展规格

字体库大小

定价

字体质量

字体质量II：排版

浏览器支持

表现I：下载

表现II：子集

表现III：交付

语言支持

测试和实施