那些遇到过的问题

Webfonts或本地加载的字体？

dar*_*her 94 javascript css fonts webfonts

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

那里有很多新的方法,并且每种方法看起来都有变化; 我应该使用typekit吗？或google webfonts(使用js或css)？我应该继续使用本地加载字体(例如fontsquirrel.com生成的方法)吗？

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

  1. 这只是一个情况和需要的问题吗？如果是这样,他们是什么？
  2. 这些方法之间是否存在巨大差异？
  3. 我还没有列出更好的方法吗？
  4. 性能方面的专业人士/骗子是什么？看？依赖呢？兼容性？

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

谷歌CSS

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

检测结果

  78ms load of html
  36ms load of css
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

Google JS方法

  • 用于webfont.js加载styleshet
  • 仅使用最小的兼容文件类型
  • :root用类附加元素
  • 将脚本添加到头部.

检测结果

    171ms load of html
    176ms load of js
    32ms load of css
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

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/
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

...&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)
}
Run Code Online (Sandbox Code Playgroud)

...或数据:字体方法...

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

}
Run Code Online (Sandbox Code Playgroud)

Zac*_*bit 32

首先,我会澄清一下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>
Run Code Online (Sandbox Code Playgroud)

在许多情况下,script1,style1,和style2会阻塞.这意味着浏览器无法继续显示文档,直到该资源已加载(尽管现代浏览器略微偏袒了这一点).这实际上可能是一件好事,尤其是样式表.它可以防止无格式内容的闪现,并且还可以防止在应用样式时发生的巨大转变(并且移动内容对用户来说真的很烦人).

另一方面,script2不会阻止.它可以在以后加载,浏览器可以继续解析并显示文档的其余部分.所以这也是有益的.

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

这就是我所拥有的一切.

我没有使用Typekit的经验,所以我把它从我的理论中删除了.如果存在任何不准确之处,不考虑浏览器之间的概括,请指出它们.

nwa*_*ton 11

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

其他一些着名的字体来源

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; 
}
Run Code Online (Sandbox Code Playgroud)

这是我的规格:

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)
Run Code Online (Sandbox Code Playgroud)

以下是他们对部署的高级描述.

Fonts.com

我没有使用过这项服务,但他们是一个非常成熟的字体供应商,他们在网站上列出的信息令人印象深刻.我没有关于他们确切方法的规范,但这是我所知道的:

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

FontSpring

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

扩大规格

至于每种字体服务的整体优缺点,这里有一些比较:

字体库大小

  • Fonts.com:20,000
  • FontSpring:1000+
  • FontSquirrel:300+
  • 谷歌:600+
  • Typekit:900+
  • Typography.com(cloud.typography.com):可能300多个(35个家庭)

价钱

  • Fonts.com:每月20美元可获得500,000次页面浏览量
  • FontSpring:因字体而异(一次性购买字体)
  • FontSquirrel:免费
  • 谷歌:免费
  • Typekit:每月$ 4,可获得500,000次页面浏览量
  • Typography.com:每月12万美元的1,000,000页面浏览量

字体质量

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

  • Fonts.com:很高
  • FontSpring:混合到高
  • FontSquirrel:混合
  • 谷歌:混合
  • Typekit:高
  • Typography.com:非常高(我给它一个"非常高"的名称,因为Fonts.com,FontSpring和Typekit支持多种类型的代工厂,这里只有来自H&FJ代工厂的字体,这是世界上最好的代号之一)

字体质量II:排版

桌面排版有很多改进,很难在网络字体中获得.其中一些服务提供了提供这些服务的方法.

  • Fonts.com:字距调整,字符间距,连字,替代字符,分数,等等.
  • FontSpring:没有
  • FontSquirrel:无
  • 谷歌:没有
  • 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 */
  }
Run Code Online (Sandbox Code Playgroud)

性能I:下载

据我所知,使用上述语法允许浏览器获取适用于它们的特定格式,因此不会浪费下载不起作用的字体格式.

Fonts.com,Typekit或Typography.com等付费服务使用方法检测正确的格式,然后提供正确的字体格式,通常作为CSS文件中的base64数据.

从我所看到的,上面列出的方法的差异对于高速互联网用户来说相当微不足道(似乎<200ms差异),但是对于较慢网络上的设备,特别是对于未缓存的页面命中,可能值得考虑.

表现II:子集

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

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

表现III:交付

  • Fonts.com:全球CDN 或您自己的服务器
  • FontSpring:基于您的服务器
  • FontSquirrel:基于您的服务器
  • 谷歌:全球超级CDN
  • Typekit:全球CDN
  • Typography.com:全球CDN(125,000台服务器)

语言支持

  • Fonts.com:40种语言,包括亚洲和中东
  • FontSpring:Western,取决于字体
  • FontSquirrel:Western,取决于字体
  • 谷歌:西方,取决于字体
  • Typekit:Western,取决于字体
  • Typography.com:Western,取决于字体

测试和实施

  • Fonts.com:非常简单,具有广泛且可定制的工具
  • FontSpring:技术(自己动手)
  • FontSquirrel:技术(自己动手)
  • 谷歌:很简单
  • Typekit:简单
  • Typography.com:易于测试,一旦部署就更需要更改

Net*_*fer 10

好吧,就像你追求的那样

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

答案是(就像在网页设计中一样):这取决于!

有一点可以肯定的是,我不建议使用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'>
Run Code Online (Sandbox Code Playgroud)

这将导致以下响应:

@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');
}
Run Code Online (Sandbox Code Playgroud)

如您所见,如果用户没有在本地安装一个或多个请求的字体,则有9个不同的字体文件,这意味着总共10个(包括一个链接元素)请求.并且每次向您的站点发送新页面请求时都会重复这些请求(尽管不会传输更多数据)!<link>永远不会缓存对请求的响应.

建议:
毕竟我真的建议你的样式表中包含.woff格式的Base64编码的字体文件!

有关如何操作的示例和说明,请参阅此文章!

归档时间：

查看次数：

32172 次

最近记录：

9 年，2 月 前
相关归档
用JavaScript比较两个日期 1791
mocha before()中的异步函数总是在它()规范之前完成？ 85
响应文本对齐(使用Bootstrap 3)？ 66
应该避免直接描述附加风格的css类名称如'floatleft'吗？ 51
DIV容器内的HTML图像底部对齐 40
选择具有特定背景颜色的元素 28
如何防止标签内的链接触发复选框？ 26
使用按钮隐藏输入类型"文件" 18
有没有办法用CSS隐藏列表中的第n项？ 17
Chrome 40是否打破了正确内容CSS覆盖？ 17
难疑归档
使用Git版本控制查看文件的更改历史记录 2920
检查JavaScript对象中是否存在密钥？ 2750
如何仅列出两次提交之间更改的文件名？ 1807
为什么在数组迭代中使用"for ... in"是一个坏主意？ 1761
方法和函数之间有什么区别？ 1665
如何使用AngularJS在浏览器控制台中访问$ scope变量？ 1220
六角透明的颜色 1219
如何向给定元素添加类？ 1109
jQuery从下拉列表中获取选定的选项 1067
如何将命令行参数传递给rake任务 1065