在CSS中添加多个网络字体

Question

在CSS中添加多个网络字体

4

谷歌最近将阿拉伯字体添加到其网络字体收藏中。为了使用它，我必须使用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中附加多个Web字体是否有效率？我认为每个字体大约是50Kb。在这种情况下，缓存如何工作？

谢谢
Nawal

- Nawal

2个回答

1

如果我正确理解了您的问题，那么它与效率无关，而是与多样性有关。目的是允许不同的字体面向Droid Arabic Naskh字体族。并非每个字体族都有字体面来代表每个字体权重或相关字体属性，自己添加这些规则可能存在风险，因为某些浏览器（Safari iOS、Chrome 25）可能会对已经默认加粗/倾斜的某些字形进行双倍加粗/倾斜。谷歌只是为该字体族提供字体面。这些是唯一可用于使用的面。

字体也以其他网络资源相同的方式进行缓存。

- Adrift

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jamesplease · Accepted Answer

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

为什么同一字体有两个不同的字体文件，用于不同的字重？

这就是字体的工作原理。目前，所有主要的字体文件类型每个文件只支持一种字体风格或字重。

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

总的来说，每个字体需要加载的字体文件总数等于你想要的不同字体风格的数量。

为什么Web字体对于每个给定的字重要源多个不同的文件？

font-face 的浏览器支持目前还比较有限，某些浏览器仅支持特定的文件类型。这就是为什么每个字体重量都需要提供多个文件类型的原因。如果您想深入了解不同文件类型的浏览器支持情况，请查看此实用指南。

但是，当涉及到 Web 字体时，还有更多需要关注的问题。如果您是一位注重效率的程序员，则可能会忽略使用 Google 建议的 webfonts 实现方式，该方式如下：

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

你可能认为从URL中复制代码并将其粘贴到样式表中，以期通过减少HTTP请求来缩短页面加载时间。但这可能不一定是正确的！

事实上，当通过元素调用Google webfont服务器时，它只会提供你需要的字体。

例如，如果你使用Firefox浏览器，你永远不会收到.eot文件，因为它只会提供适用于你特定浏览器的字体文件。此外，对webfont cdn的调用速度非常快。

有关此操作方式的更多信息，请参阅Google webfonts文档。

至于其他问题：

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

最大效率吗？嗯，不是。为了尽可能高效，请使用用户已经拥有的Web安全字体。但考虑到今天的互联网速度，从Google Webfonts加载的性能损失应该不会引起注意，所以不必担心。

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

通常情况下，浏览器会处理缓存。由于现在许多网站都使用Google Web字体（特别是Open Sans），用户有很大的机会在他们的设备上缓存该字体。