如果GoogleFont服务不可用，如何加载自托管的字体文件？

Question

我想使用Google字体目录中的字体集合。我选择了样式并在项目模板中包含了CSS link标签。

另外，使用Google字体，您还可以下载整个字体集合，得到的是一个包含所有字体样式的zip文件。

我可以创建一个等效于Google提供给我的CSS，在HTML中包含自托管字体文件作为备选项，以防访问者无法访问Google Font API。

如何设置这个过程，并防止Google字体文件和自托管字体文件都被下载？如果用户能够访问Google字体，它的浏览器就不应该下载字体的自托管版本。

- Armando Pérez Marqués

---

我认为你可以在src规则中使用url()路径和local()路径来跟随 - 浏览器应该在找到可加载的路径后停止查找。虽然我没有尝试过。 - Tieson T.

根据规范：“当需要字体时，用户代理会迭代列出的引用集，使用它可以成功激活的第一个引用。”- http://www.w3.org/TR/css3-webfonts/#descdef-src - Tieson T.

这只是我的见解，不是一个答案：我认为你想得太多了。我建议在CSS中指定一个备用的系统字体，以防谷歌的字体无法加载。首先，请问你真的担心谷歌的服务器会宕机吗？其次，如果没有指定的网络字体，你的网站还能正常使用吗？（它应该可以） - chipcullen

如果你已经下载了这些文件，为什么不直接使用自托管的文件，而不是引用谷歌的文件呢？ - Billy Moat

@chipcullen 关于谷歌宕机的事情...当然不是，我更在意的是访问者无法访问谷歌字体服务。而且即使不能使用，它仍然可以使用，但更重要的是将PSD转换为HTML，以便所有元素正确地匹配其相应的大小。我知道Photoshop会以自己的方式呈现字体，但这比使用默认浏览器字体进行设计要好。 - Armando Pérez Marqués

再次强调，这只是个人意见 - 如果你真的很担心这个问题，我建议你直接从谷歌下载字体并进行自主托管。保持简单。（不过，我个人会依赖谷歌，并将系统字体作为备选方案）。 - chipcullen

Answer 1

我建议自己托管它们。这是fontspring的“防弹”font-face语法。

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#svgFontName') format('svg');
}

确保这四个都设置了将确保它在各种浏览器上工作。只要确保你的字体有这四个类型就可以了。Font Squirrel也提供了很棒的fontface套件。

- Justin Beaudry

Answer 2

你有三个选项：

1. 使用两组 @font-face at-rules，分别使用不同的 font-family 名称（例如 "Droid Sans" 和 "Droid Sans Local"），然后使用像 "Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif 这样的字体堆栈。但是，这会导致两种字体都被下载，增加加载时间。
2. 使用单组 @font-face at-rules，但使用两组 src 属性。如果浏览器决定下载所有指定的字体文件，则这也可能会增加加载时间。
3. 通过 DNS 在网络层进行镜像，就像大多数 CDN 所做的那样。这需要网络设置，但您的 CSS 不会更改，并且对浏览器最透明，不需要额外下载。

Google Web Fonts 已经采用了第三种选项，所以如果你已经使用基于 CDN 的资源，我个人认为不必费心。但是，如果你正在使用来自不太可靠的来源的字体，这可能是值得的。但是，如果你要为字体设置这个功能，那么为什么不为所有静态资源（图像、样式表、JS 等）设置它呢？最合理的做法就是获得一个免费或付费的 CDN 来托管所有静态资源。

- Lèse majesté

---

这其实很有道理，将所有东西包括字体都托管在CDN上。我需要检查一下字体许可证是否允许这样做。 - Armando Pérez Marqués