html - GoogleFont服务不可用时如何加载自托管字体文件？

Question

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

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

我可以创建一个与 Google 给我的 CSS 等效的 CSS，以便将其包含在 HTML 中，因此如果访问者无法访问 Google 字体 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也有很棒的字体套件。