Webfonts或本地加载的字体？

自从使用Cufon引起的麻烦之后，我冒险使用外部字体资源，但是到了最近，我一直在寻找加载字体的替代方法来查看是否有更好的方法。 更好的方法有一个出现在蓝色的方式。

这里有很多新的方法，看起来每种方法都有所不同。 我应该使用typekit吗？ 或谷歌WebFonts （与JS或CSS）？ 我应该继续使用本地加载字体（例如fontsquirrel.com生成的方法）？

我将列出下面看起来最受欢迎的方法，并进行一些testing，但是真的值得移植到webfont吗？ 它似乎会带来更高的资源负载（HTTP请求），并具有较less的文件格式types（较less兼容性）等，但看起来像文件加载asynchronous和高效率在大多数情况下。

  1. 这只是一个情况和需要的问题吗？ 如果是这样，他们是什么？
  2. 这些方法之间有很大的差异吗？
  3. 有没有更好的方法，我没有列出？
  4. 什么是专业/性能的performance？ 看？ 依赖呢？ 兼容性？

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

Google CSS

  • 只使用外部样式表
  • 只使用最小的兼容文件types
  • 可以使用@import或者<link>或者把styleshee（ @font-face ）的内容直接放到你自己的样式表中。

检测结果 

  78ms load of html 36ms load of css

在这里输入图像说明

Google JS方法

  • 使用webfont.js加载styleshet
  • 只使用最小的兼容文件types
  • 附加:root具有类的:root元素
  • 添加脚本头。

检测结果 

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

在这里输入图像说明

Typekit方法

  • 附加:root具有类的:root元素。
  • 可以使用*.js代码片段或外部加载的文件*.js文件
  • 使用data:font/opentype而不是字体文件。
  • 添加脚本头
  • 添加embedded的CSS头

  • 添加外部样式表头

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

检测结果 

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

…或与数据：字体方法… 

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

首先，我会澄清一下Google的产品。 它将实际加载您的浏览器可以处理的最小格式。 WOFF提供小文件大小，您的浏览器支持，所以这是你看到的。 WOFF也得到相当广泛的支持。 但是，在Opera中，例如，您可能会获得TrueType版本的字体。

我相信，文件大小的逻辑也是为什么字体松鼠尝试它们的顺序。 但是这主要是我的猜测。

如果你在一个每个请求和字节计数的环境中工作，你将不得不做一些分析，找出最适合你的用例。 人们只能浏览一个页面，而不再访问？ 如果是这样，caching规则并不重要。 如果他们正在浏览或返回，Google可能会有比您的服务器更好的caching规则。 延迟是更大的问题还是带宽？ 如果等待时间延长，则要求更less的请求，因此将其托pipe在本地，并尽可能多地合并文件。 如果带宽，select最小的代码和最小的字体格式。

现在，到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会被阻塞。 这意味着浏览器无法继续显示文档，直到资源加载完毕（尽pipe现代浏览器对此有所赘述）。 这实际上是一件好事，特别是对于样式表。 它可以防止无格式内容的闪烁，并且还可以防止在应用样式时发生的巨大转变（并且移动内容真的很烦人）。

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

具体谈论字体（甚至更具体地说，谷歌的产品），我可能坚持一个CSS方法（我喜欢@import因为它保持与样式表的样式，但这可能只是我）。 脚本加载的JS文件（ http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ）大于@font-face声明， 看起来像更多的工作。 我不相信加载实际的字体本身（WOFF或TTF）被阻止，所以它不应该耽搁太多的东西。 我个人不是CDN的忠实拥趸，但事实是他们真的很快。 谷歌的服务器将通过山体滑坡击败大多数共享的托pipe计划，而且由于他们的字体非常stream行，人们甚至可能已经caching了他们。

这就是我所拥有的一切。

我没有Typekit的经验，所以我把它放在了我的理论上。 如果有任何不准确的地方，请不要在浏览器之间为了参数而进行概括，请指出。

我想你已经在你的问题中解决了加载时间问题。 从我的angular度来看，还有几个来源应该被添加到列表中，还有一些其他的考虑因素应该被审查，以便全面了解这些选项。

其他一些有信誉的字体来源

cloud.typography

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

据我所知，这些字体是作为数据embedded到一个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）
  • 用于制作模型的桌面字体下载
  • 用于在浏览器中testingWeb字体的自定义工具
  • 精细的排版控制和子集
  • 自托pipe选项

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美元/月

字体质量

网页字体的质量可能会有所不同。 这可以涵盖诸如字母本身或字符集的间距或大小的事物。 所有这些决定了字体所能提供的质量的总体印象。 虽然免费选项有一些不错的select，但也有一些字体质量不高，所以你要从这些来源仔细select。

  • Fonts.com ：高
  • FontSpring ：混合到高
  • FontSquirrel ：混合
  • Google ：混合
  • Typekit ：高
  • Typography.com ：非常高（我给了这个“非常高”的称号，因为Fonts.com，FontSpring和Typekit支持多种types的代工厂，这里只有来自H＆FJ铸造厂的字体，这是世界上最好的）

字体质量II：版式

在桌面排版中有很多改进，很难在networking字体中获得。 其中一些服务提供了交付方式。

  • 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

更多信息在@字体面部规则和有用的networking字体技巧

所有这些服务都支持主要的字体格式。 使用自托pipe字体，只要你使用正确的语法，你应该被覆盖。 下面是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数据。

从我所看到的，上面列出的方法的差异对于高速互联网用户而言是微不足道的（似乎<200ms差异），但对于较慢networking上的设备，特别是对于未caching的页面点击，可能是值得考虑的。

性能二：子集

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

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

performanceIII：交付

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

语言支持

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

testing和实现

  • Fonts.com ：非常容易，有广泛和可定制的工具
  • FontSpring ：技术（自己动手）
  • FontSquirrel ：技术（自己动手）
  • Google ：简单
  • Typekit ：简单
  • Typography.com ：简单的testing，一旦部署，更多的涉及到更改

那么，就像你以后一样

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

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

有一件事是肯定的，我不会推荐使用JS方法（在第二个例子中显示）。

就个人而言，我不喜欢根据Javascript使用表示性的东西和CSS样式，即使绝大多数用户已经启用它。 这是一个不混合的问题。

正如你在给出的例子中可以看到的那样，有一些FOUC（无格式内容的flas），因为在字体可用之前页面已经被浏览器渲染了。 一旦这个页面被重新绘制。 而网站越大，（性能）影响就越大！

所以我永远不会使用任何JS解决scheme的字体embedded。

现在让我们来看看纯粹的CSS方法。
由于相当长一段时间这里是关于“对比@import”的讨论。 我个人更喜欢避免使用@import，并且总是只使用<link> 。 但这主要是个人喜好的问题。 你永远不应该做的一件事是混合他们俩！

本地与CDN
当决定是否在本地托pipe你的字体文件或使用CDN时，那么它主要取决于不同字体的数量和你想embedded的相应字体。

为什么这很重要，还是起了一个作用？
从性能的angular度来看，我build议在你的（一个）样式表中包含字体Base64编码。 但只有.woff格式，几乎所有现代浏览器都使用这种格式，这对于大多数访问者来说意味着什么。 对于其他所有的用户来说，这些额外的请求都会生效

但是由于Base64编码引起的“开销”和字体文件的大小（即使是.woff格式），只有在不超过3或4种不同的字体的情况下，才能使用这种技术。 并且始终确保您的服务器传递（gzip）的（CSS）文件。

这样做的一大好处是你没有额外的字体文件请求。 在第一次加载页面（无论您的网站是哪个页面）之后，CSS文件被caching。 如果您使用HTML5应用程序caching（您当然会这样做），这也是一个优势。

除此之外，作者不应该在他的网站上使用超过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个（包括链接元素之一）请求。 而且这些请求会在您的站点的每个新页面请求中重复使用（尽pipe没有更多数据传输）！ 此外，对<link>请求的响应永远不会被caching。

build议：
毕竟我真的会build议将您的字体文件以.woff格式包含在您的样式表中编码！

看到这个不错的文章的例子和说明如何做到这一点！

我使用内联的css方法，因为额外请求的开销比bease64编码时增加的更多。 这也被css文件服务器的gizip压缩所抵消。

其他选项是使用asynchronous加载字体，但大多数情况下用户会看到加载后popup的字体。

不pipe使用什么方法，只要包含要使用的字符集就可以减小字体文件的大小。

我个人使用Google字体。 他们有各种各样的select，他们最近也通过转向Zopfli压缩来改善对字体的压缩 。 谷歌正在努力使networking更快，所以我想这部分的更多优化也将来自他们。

无论你select什么外包字体，你总是会因为获取字体的请求而降低速度。 从速度angular度来看，最好的事情是自己提供字体。 如果你不关心那些额外的毫秒，它需要从一个外包交货加载，你应该去，如果你认为使用它们的易用性值得毫秒。

我不知道Typekit和其他，但与谷歌字体，你可以select提供特定的子集和字符的范围，以加快交付更多。

select一个子集： 

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

select一系列字符： 

 <!-- 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来进一步提高字体传输的速度。

我确实认为并希望谷歌尽其所能尽可能地加快字体传输速度。 加载它所需的毫秒数不会影响我的网站，所以我乐于使用它们。

长话短说：

如果毫秒的字体传输损害您的网站，例如通过使其负载超过推荐的1秒，我想你应该主持他们自己。

最好的select是使用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 Insightstesting中增加了9分。

Interesting Posts

Android和IOS需要什么样的字体文件？

最好的字体编码

Twitter引导3 – 创build自定义graphics并添加到graphics“字体”

设置Swing程序的默认字体

如何在CSS中embedded字体？

如何在Rails 4中使用字体

将字体embedded到mac包中

在文本input元素内的字体真棒图标

如何添加一些非标准的字体到网站？

自定义安装的字体在UILabel中显示不正确