4

谷歌最近在其 Webfont 集合中添加了一种阿拉伯字体。为了使用它，我必须使用http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css，这将是以下代码：

/* 
 * Droid Arabic Naskh (Arabic) http://www.google.com/webfonts/earlyaccess
 */
@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.ttf) format('truetype');
}

他们为什么要这样做？在 CSS 中附加多个网络字体是否有效？我认为每种字体大约为 50Kb。在这种情况下缓存将如何工作？

谢谢纳瓦尔
_

4

2 回答 2

3

我不确定如何解释“多个网络字体”，所以我将回答两种可能性：

为什么同一字体的不同权重会有两个字体文件？

这就是字体的工作原理。目前，所有主要字体文件类型仅支持每个文件一种样式或字体粗细。

Arial 就是一个很好的例子。在 MS Word 等典型的文字编辑器中，您可能习惯于选择bold字体来更改其显示，这似乎只是在更改您的字体的某些内容，而不是切换到全新的字体。然而，在幕后，它实际上正在加载一个完全独立的字体文件。Windows 计算机带有arial.ttf、arialbd.ttf、ariali.ttf等，它们作为一个集合组成了 Arial、Arial Bold、Arial Italic 以及它们的所有组合。

通常，您必须为每种字体加载的字体文件总数等于您想要为该字体使用的不同样式的数量。

为什么 Webfonts 为每个给定的重量采购这么多不同的文件？

浏览器支持font-face目前是有限的，一些浏览器只支持某些文件类型。这就是为什么您的每个字体权重都为同一字体提供多种文件类型。要深入了解浏览器对不同文件类型的支持，请查看这个方便的指南。

但是当谈到网络字体时，还有更多要说的。如果你碰巧是一个注重效率的程序员，你可能会忽略使用谷歌建议的他们的 webfonts 实现，它看起来像这样：

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans|Lora|Roboto|Lobster+Two'>

您可能会考虑从 URL 复制代码并将其粘贴到您的样式表中，希望通过删除 HTTP 请求来减少页面的加载时间。但情况可能不一定如此！

碰巧的是，Google webfont 服务器仅在通过元素调用时为您提供所需的字体。link

.eot因此，举个例子，如果您在 Firefox 中，您将永远不会收到该文件。它只为您提供可以在您的特定浏览器中使用的字体文件。最重要的是，对 webfont cdn 的调用速度非常快。

有关其工作原理的更多信息，请参阅Google webfonts 文档。

对于您的其他问题：

在 CSS 中附加多个网络字体是否有效？

它是最大效率的吗？嗯，不。为了尽可能高效，请坚持使用用户机器上已有的网络安全字体。但是考虑到今天的互联网速度，从 Google Webfonts 加载的性能影响应该不明显，所以我不会担心。

在这种情况下缓存将如何工作？

像往常一样，浏览器将处理缓存。由于现在许多网站都在使用 Google Web Fonts（尤其是 Open Sans），因此用户很有可能将字体缓存在他们的机器上。

于 2013-04-03T16:05:10.287 回答
1

如果我正确理解了您的问题，那么与其说是效率不如说是多样性..

目的是允许 font-family 使用不同的 font-faces Droid Arabic Naskh... 不是每个 font-family 都有一个font-face 来表示每个 font-weight 或相关的 font-property并且自己添加这些规则可能会有风险，因为某些浏览器（ Safari iOS, Chrome 25) 可以将默认情况下已经是粗体/斜体的某些字形双斜体和双粗体。谷歌只是为这个家族提供字体。这些是唯一可以使用的面孔。

字体的缓存方式与其他 Web 资源的缓存方式相同

于 2013-04-03T15:55:19.397 回答