如何将Google网页字体转换为组合的CSS

我想以各种格式下载Google网页字体，并创建组合的CSS以在任何地方使用它们，而无需从Google服务器加载它们。如何将Google网页字体转换为组合的CSS

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

如您所知，Google网络字体API根据浏览器用户代理服务于特殊的CSS。

我有几个关于它的问题。

这是真的，谷歌网页字体得到只会一种字体为SVG仅OS设备，我注意到了这一点，同时测试几个字体（以虚假用户代理）。虽然对于其他人有多个@font-face声明但与font-weight和font-style不同。我是否正确地假设Google仅为“常规”版本的字体提供SVG，而不是“斜体，粗体，书本...”
最好的方法是将它们组合成一个CSS，特别是关于这种组合SVG字体。

2013-03-19 James Mitch

11 downvotes和9 upvotes ...一个来自我。任何人都会低估这一点，这是有原因的：谷歌不会缓存这些字体。我在Chrome上使用他们的CSS，并且网络检查员的网络标签告诉我它每次都会打200个OK。理想情况下，它应该缓存这些字体，以使浏览器只在一生中装载它们，恕我直言。 – 2014-09-01 00:20:23

你可以使用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-19 14:03:45

首先这看起来对我来说很难，第二我知道关于base64，第三我不认为这以任何方式解决我的问题。我不明白为什么使用不同的字体权重之后。 – 2013-03-19 15:32:03

另外这从谷歌加载的字体不是在本地，这是不能解决我的问题。 – 2013-03-29 21:09:36

您说得对，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声称：

虽然这是真的，谷歌提供运行版本4.2或低于iOS设备上的SVG字体格式，我可以证实SVG是空的或破碎的。因此，Google不再支持运行iOS 4.2及更低版本的设备。意味着，不再有SVG字体格式。

我一直无法核实这在其他地方，但我已经看到了一大堆用户抱怨SVG问题的，字体不加载......我会倾向于忽略SVG作为一个选项，专注于提供EOT/WOFF/TTF。这似乎是覆盖基地的最坚实的方式。

更新：似乎fontsquirrel.com可以生成一个SVG版本。因此，即使Google不提供SVG作为下载选项，如果您真的想要，仍然可以生成它。

来源

2013-03-30 16:06:47 jszobody

如何将Google网页字体转换为组合的CSS

回答

相关问题