如何从(官方)Google Web Fonts repo下载多种格式的Web字体？
its*_*_me 34 webfonts google-webfonts
我了解到Google会根据从中访问的浏览器/设备自动提供TTF,EOT,WOFF或SVG字体文件.
现在我计划从我的服务器本身托管和提供字体文件,为此我首先必须下载网络字体的所有文件格式.
我如何或在哪里下载我想使用的网络字体的4种文件格式？
PS:通过使用不同的浏览器 - Chrome,IE9和Safari(dev - iPhone UA),我能够获得WOFF,EOT和TTF格式.但是,SVG格式没有运气.如果有一种更简单的方法,它会很棒.
编辑:哦,顺便说一句,我知道我可以从fontsquirrel下载各种格式,但我说的是从这里的官方回购下载.
nik*_*kip 51
=======更新2016-05-31 =======
我制作了一个小小的PHP脚本来从谷歌字体CSS导入URL获取下载链接,如:https://fonts.googleapis.com/css？ family~Roboto:400,700 | Slabo + 27px | Lato:400,300italic,900italic
您可以在此处使用此工具:http://nikoskip.me/gfonts.php
例如,如果您使用上述导入URL,您将得到:
我厌倦了在每个新版本的Chrome上更新此答案,因为它们总是会改变您欺骗用户代理字符串的方式,因此请改用此脚本.
=======旧解决方案=======
使用Chrome中的DevTools,您可以覆盖用户代理.
如何:
- 在Google Fonts页面获取所需的字体.
- 您将获得一个要在CSS中导入的URL,例如:http://fonts.googleapis.com/css？family = Catalin:500,700,500italital 700italic
- 在浏览器中打开该URL,您将看到可以实际下载该字体的完整URL.
- 转到开发人员工具(F12)并按ESC
- 选择"仿真"选项卡,然后单击"网络"子选项卡
- 最后
Spoof user agent选择IE9 for EOT格式,Android 4 for TTF和这个UA String for SVG :(Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3谢谢匿名)
- 很棒的酱!这是针对Google Fonts TOS吗？ (3认同)
- @Exagone313你可以在这里找到脚本：https://gist.github.com/nikoskip/bcf58106f728a3e7b7f9dcb6edaa1e82 (2认同)
您可以在http://code.google.com/p/googlefontdirectory/克隆Google网络字体目录
您还可以访问http://code.google.com/p/googlefontdirectory/source/browse/#font_name获取单个字体文件
- 但是......我想要所有四种格式TTF,EOT,WOFF和SVG. (18认同)
- 我看到你对fontsquirrel的编辑,你可以从谷歌仓库下载.OTF字体,转到http://www.fontsquirrel.com/fontface/generator并从那里创建所有四种文件类型. (4认同)
- 我认为该网址已过时。到目前为止，字体在Github上https://github.com/google/fonts (2认同)
如何获取字体下载网址，包括SVG和woff2。
下载每种字体所需的用户代理如下。来源。
module.exports = {
USER_AGENTS: {
eot: 'Mozilla/5.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)',
woff: 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0',
woff2: 'Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML like Gecko) Chrome/38.0.2125.104 Safari/537.36', // complete woff2 file for one variant
svg: 'Mozilla/4.0 (iPad; CPU OS 4_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/4.1 Mobile/9A405 Safari/7534.48.3',
ttf: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/534.54.16 (KHTML, like Gecko) Version/5.1.4 Safari/534.54.16'
},
GOOGLE_FONTS_API_KEY: 'AIzaSyDY-C-Lt9uyPP5fSTjMCR4bB944SlI4spw',
CACHE_DIR: __dirname + "/cachedFonts/",
}
使用devtool添加这些用户代理。
您现在可以访问https://fonts.googleapis.com/css?family=Open+Sans并欺骗您的用户代理，通过访问中找到的url下载字体@font-face。
另外，google-webfonts-helper可以为您完成所有操作。
开发人员在这里
有一篇很棒的博客文章，我从那儿获得了图像。
为什么要自我托管？
如果可能，请始终使用通用的CDN，这很有可能甚至不需要下载字体（浏览器已缓存）。
如果您担心google向用户发送错误的字体（最有可能是因为他们在欺骗其用户代理），那么还有另一种选择，并且仍然可以获得使用google托管的好处。
插入您@font-face自己的内容，只需按照上述步骤查找google字体网址，然后将其插入<head>;中即可。
<style>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(google-font-url-here/opensans.eot);
src: local('Open Sans'), local('OpenSans'),
url(google-font-url-here/opensans.eot?#iefix) format('embedded-opentype'),
url(google-font-url-here/opensans.woff2) format('woff2'),
url(google-font-url-here/opensans.woff) format('woff'),
url(google-font-url-here/opensans.ttf) format('truetype'),
url(google-font-url-here/opensans.svg#OpenSans) format('svg');
}
</style>