2

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

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

您可能知道 Google web-font API 根据浏览器用户代理提供特殊的 CSS。

我有几个问题。

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

2 回答 2

15

你是对的，谷歌只为你的特定用户代理提供字体。把它们全部搞定是很棘手的。

您提到您有一个用于获取不同字体格式的 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 已将完整的下载包放在一起以一次获取所有 TTF 字体文件可能会很有用（尽管它可能有点过时）。

使用 CSS 服务

一旦你有了所有不同的版本，就为你的 CSS 使用类似这样的语法。这是来自FontSpring 的 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

第一个链接声称：

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

我无法在其他任何地方验证这一点，但是我看到很多用户抱怨 SVG 问题、字体无法加载……我倾向于忽略 SVG 作为一种选择，并专注于提供 EOT/ WOFF/TTF。这似乎是覆盖你的基地的最可靠的方法。

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

于 2013-03-30T16:06:47.333 回答
3

可以使用base64编码，但是比普通文件大30%左右（而且不知道每次写东西会不会解析这个url，所以请大家在使用前检查一下）。或者您可以下载一次并将其保存在本地浏览器内存中并使用它而无需下载新版本（但您仍然需要至少下载一次这些文件）。

用IE我帮不了你。但是当您创建新的@font-face 规则时，您可以指定字体粗细。

/** #1 **/
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Extrabold'),
         local('OpenSans-Extrabold'),
         url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff)
             format('woff');
}
/** #2 **/
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: local('Open Sans Light Italic'),
         local('OpenSansLight-Italic'),
         url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff)
             format('woff');
}


.a {
    font-family: 'Open Sans';
    font-weight: 300; /** #2 used for <= 500 cos font-weights are 300 and 600 **/
}

.b {
    font-family: 'Open Sans';
    font-weight: 800; /** #1 used for >= 600 **/
}

希望它会帮助你。

于 2013-03-19T14:03:45.223 回答