我需要在内部网应用程序上使用一些谷歌字体。客户端可能有也可能没有互联网连接。阅读许可条款,这似乎是法律允许的。
当前回答
我写了一个bash脚本,在谷歌的服务器上使用不同的用户代理获取CSS文件,将不同的字体格式下载到本地目录,并编写包含它们的CSS文件。注意,该脚本需要Bash版本4.x。
请参阅https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/获取脚本(我在这里不复制它,所以我只需要在需要时在一个地方更新它)。
编辑:移动到https://github.com/neverpanic/google-font-download
其他回答
我在一个grunt任务中使用了grunt-local-googlefont。
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
"local-googlefont" : {
"opensans" : {
"options" : {
"family" : "Open Sans",
"sizes" : [
300,
400,
600
],
"userAgents" : [
"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)", //download eot
"Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
],
"cssDestination" : "build/fonts/css",
"fontDestination" : "build/fonts",
"styleSheetExtension" : "css",
"fontDestinationCssPrefix" : "fonts"
}
}
}
});
grunt.loadNpmTasks('grunt-local-googlefont');
};
然后,要检索它们:
grunt local-googlefont:opensans
注意,我使用的是原始版本的一个分支,它在检索名称中有空格的字体时工作得更好。
CSS文件的内容(来自include URL)取决于我从什么浏览器查看它。例如,当使用Chrome浏览器浏览http://fonts.googleapis.com/css?family=Open+Sans时,该文件只包含WOFF链接。使用Internet Explorer(如下),它包括EOT和WOFF。我把所有链接都粘贴到浏览器里下载。
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
当你拥有自己的网页字体时,你需要正确地链接到每种字体类型,处理遗留的浏览器错误等。当您使用谷歌Web Fonts(由谷歌托管)时,谷歌自动链接到该浏览器的正确字体类型。
这在法律上是允许的,只要你遵守字体许可的条款——通常是OFL。
你需要一套网页字体格式,而font Squirrel Webfont Generator可以生成这些格式。
但是OFL要求在修改字体时重命名它们,使用生成器意味着修改它们。
你可以从https://github.com/google/fonts下载原始字体
之后,使用字体游弋工具将您的大型Unicode字体分成多个子集(例如拉丁,西里尔)。您应该使用该工具执行以下操作:
为您支持的每种语言生成子集 使用unicode范围子集节省带宽 删除臃肿从你的字体和优化他们的网页 将字体转换为压缩的woff2格式 为旧浏览器提供.woff备份 自定义字体加载和渲染 使用@font-face规则生成CSS文件 自托管web字体或在本地使用它们
字体游侠:https://www.npmjs.com/package/font-ranger
附注:你也可以使用Node.js API自动化这个过程
编辑:正如luckyrumo指出的那样,字体被放弃了,取而代之的是:https://github.com/fontsource/fontsource
如果您正在使用Webpack,您可能会对这个项目感兴趣:https://github.com/KyleAMathews/typefaces
例如,你想使用Roboto字体:
npm install typeface-roboto --save
然后把它导入你的应用的入口点(主js文件):
import 'typeface-roboto'