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

我想使用谷歌字体目录中的字体集合。我选择了样式，并在我的项目模板中包含CSS link标签。如果GoogleFont服务不可用，如何加载自托管字体文件？

或者，您也可以使用Google字体下载该集合，并且您得到的是一个包含所有字体样式的zip文件。

我可以创建一个Google提供给我的HTML中包含的CSS，因此如果访问者无法访问Google Font API，我想提供自己托管的字体文件作为后备。

如何设置此功能，防止Google字体文件和自托管字体文件被下载？如果用户确实可以访问Google字体，则浏览器不应该下载字体的自主版本。

2012-07-16 Armando Pérez Marqués

我想你可以在'src'规则中用'local（）'路径跟踪'url（）'路径 - 浏览器在找到它可以加载的时候应该停止查找。虽然没有尝试过。 – 2012-07-16 14:22:49

根据规范：“当需要字体时，用户代理遍历列出的一组引用，使用第一个引用可以成功激活。” - http://www.w3.org/TR/css3-webfonts/#descdef-src – 2012-07-16 14:25:33

这是一个意见，而不是一个答案：我认为你正在推翻它。如果Google的字体无法加载，我只会在CSS中指定一个后退系统字体。首先，你真的担心Google的服务器停机吗？第二，您的网站在没有指定网页字体的情况下仍然可以使用吗？（它可能应该是） – chipcullen 2012-07-16 14:34:21

您有3个选项：使用不同的font-family名称（例如"Droid Sans"和"Droid Sans Local"），然后使用像"Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif字体堆叠在规则，

使用2台@font-face。但是，这会导致下载这两种字体，从而增加加载时间。
使用一组@font-face at-rules，但使用2组src属性。如果浏览器决定下载指定的所有字体文件，这也可能增加加载时间。
像大多数CDN一样，通过DNS在网络层进行镜像。这需要网络设置，但您的CSS将保持不变，并且它对浏览器最为透明，无需额外下载。

Google Web Fonts已经在使用第三个选项，所以如果您已经使用CDN托管的源代码，我个人不会打扰。但是，如果您使用的是不太可靠的源代码，可能会值得。但是，如果您要完成设置字体的工作，为什么不为所有静态资源（图像，样式表，JS等）进行设置？最合理的行动方式是获得免费或付费的CDN来托管您的所有静态资产。

来源

2012-07-16 14:52:14

嗯，它实际上是有道理的，承载CDN上的所有东西，包括字体。我将不得不检查字体许可证是否允许。 – 2012-07-16 18:52:43

我会建议只是自己托管他们。这是fontsprings'“防弹”字体表面语法。

@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套件。

来源

2012-07-16 21:56:16

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

回答

相关问题