9

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

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

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

我该如何设置，并防止下载 Google 字体文件和自托管字体文件？如果用户确实有权访问 Google 字体，则其浏览器不应下载该字体的自托管版本。

4

2 回答 2

13

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

于 2012-07-16T21:56:16.523 回答
8

您有 3 个选项：

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

Google Web Fonts 已经在使用第 3 个选项，所以如果您已经在使用 CDN 托管的源，我个人不会打扰。但如果您使用来源不太可靠的字体，这可能是值得的。但是，如果您要努力为您的字体设置它，为什么不为您的所有静态资源（图像、样式表、JS 等）设置它呢？最合乎逻辑的做法是获得一个免费或付费的 CDN 来托管您所有的静态资产。

于 2012-07-16T14:52:14.073 回答