如何获取字体下载 url,包括 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
和欺骗您的用户代理,通过访问@font-face
.
或者google-webfonts-helper为您完成这一切。
这里有一篇很棒的博客文章,来自我获取图像的开发人员。
为什么要自托管?
如果可能,请始终使用通用 CDN,您的字体甚至不需要下载(浏览器缓存)的可能性更大。
如果您担心谷歌向用户发送错误的字体,很可能是因为他们欺骗了他们的用户代理,那么还有另一种选择,仍然可以获得使用谷歌托管的好处。
插入@font-face
自己,只需使用上述步骤找到谷歌字体网址并将其插入<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>
这会带来风险,因为 URL 可能会发生变化!