Question

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

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

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

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

Answer 1

我建议只是自己托管他们。这是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也有很棒的字体工具包。

Answer 2

您有3个选项：

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

Google Web Fonts已经采用了第三种选择，所以如果您已经使用CDN托管的来源，我个人不会打扰。但是，如果你使用来自不太可靠的来源的字体，这可能是值得的。但是，如果你要努力为你的字体设置它，为什么不为你的所有静态资源（图像，样式表，JS等）设置它？最合乎逻辑的行动方案是获得免费或付费的CDN来托管您的所有静态资产。

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

2 个答案: