css - 如何将 Google 网络字体转换为组合 CSS

Question

我想下载所有格式的 Google 网络字体并创建组合 CSS 以在任何地方使用它们而无需从 Google 服务器加载它们。

我已经有一个用于下载字体文件的 php 脚本。现在只需要 CSS。

您可能知道，Google 网络字体 API 会根据浏览器的用户代理提供特殊的 CSS。

我有几个问题。

1. 谷歌网络字体只为操作系统设备提供一种字体作为 svg 是真的吗，我在测试一些字体时注意到了这一点(使用伪造的用户代理)。而对于其他人来说，有多个 @font-face 声明，但 font-weight 和 font-style 不同。我是否可以假设 Google 仅针对“常规”版本的字体而不是“斜体、粗体、书本……”提供 SVG？
2. 将它们组合成一个 CSS 的最佳方式是什么，尤其是对于这种组合的 SVG 字体。

Answer 1

您说得对，Google 只为您的特定用户代理提供字体。获得它们是很棘手的。

你提到你有一个 PHP 脚本来获取不同的字体格式，所以你可能不需要这两个选项，但我还是会列出它们:

选项 1

本文介绍了如何下载所有不同格式的过程:

http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html

简而言之，您需要使用用户代理欺骗来获取所有不同的格式。

选项 2

另一种选择是获取 TTF 版本(因为这很容易)，然后转到 http://www.fontsquirrel.com/tools/webfont-generator让他们转换/生成所有其他版本。

如果您最终使用此选项，了解 Joe Maller has put together a full download package 可能会有用。一次获取所有 TTF 字体文件(尽管它可能有点过时)。

使用 CSS 服务

一旦您拥有所有不同的版本，请为您的 CSS 使用类似这样的语法。这是来自 FontSpring's Bulletproof Font-Face Syntax .

@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');
}

最后一行当然取决于您是否有 SVG 字体文件。这将我们带到...

SVG

那个first link声明:

虽然 Google 确实在运行 4.2 或更低版本的 iOS 设备上提供 SVG 字体格式，但我可以确认 SVG 为空或损坏。因此，谷歌确实不再支持运行 iOS 4.2 及以下版本的设备。暗示，不再有 SVG 字体格式。

我无法在其他任何地方验证这一点，但是我看到很多用户提示 SVG 问题，字体无法加载......我倾向于忽略 SVG 作为一个选项，并专注于服务向上 EOT/WOFF/TTF。这似乎是覆盖你的基地的最稳固的方式。

更新:fontsquirrel.com 似乎可以生成 SVG 版本。因此，即使 Google 不提供 SVG 作为下载选项，您仍然可以根据需要生成它。