我需要在内部网应用程序上使用一些谷歌字体。客户端可能有也可能没有互联网连接。阅读许可条款，这似乎是法律允许的。
当前回答
由于您希望在自己的服务器上托管所有字体(或部分字体)，您可以从这个repo下载字体并以您想要的方式使用它:https://github.com/praisedpk/Local-Google-Fonts
如果你只是想这样做来解决谷歌字体附带的浏览器缓存问题，你可以使用替代字体CDN，并包括字体为:
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />
或一种特定的字体，如:
<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />
其他回答
我在一个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
注意，我使用的是原始版本的一个分支，它在检索名称中有空格的字体时工作得更好。
最简单的方法-使用google-webfonts-helper
假设我们想要托管字体Red Rose:
Open google-webfonts-helper and filter for the required font on top left (type Red Rose and enter..) Choose from the charsets (default is latin; select others like latin-ext if you want extended support) Select the styles (deafult is regular) From the Copy CSS tab Select Modern Browser if you wish to support only modern browsers (woff2, woff) Select Best Support if you wish to support all browsers (I chose this - woff2, woff,ttf,svg,eot) In case your font files do not reside in ../fonts/ path, you can edit it to represent your actual path (for me it was ../assets/fonts/) Copy the CSS and keep for future use Download the zip file named red-rose-v1-latin-ext_latin; unzip it and place all fonts directly into your assets/fonts directory (based on what you gave earlier) In your stylesheet where you wish to embed, paste the copied CSS. It will look like the below if you chose these options
/* red-rose-regular - latin-ext_latin */
@font-face {
font-family: 'Red Rose';
font-style: normal;
font-weight: 400;
src: url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src: local('Red Rose Regular'), local('RedRose-Regular'),
url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.svg#RedRose') format('svg'); /* Legacy iOS */
}
/* Red Rose will now be available for use in your stylesheet, provide this font */
:root {
font-family: 'Red Rose', cursive, sans-serif;
}
这一切!
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(由谷歌托管)时，谷歌自动链接到该浏览器的正确字体类型。
由于您希望在自己的服务器上托管所有字体(或部分字体)，您可以从这个repo下载字体并以您想要的方式使用它:https://github.com/praisedpk/Local-Google-Fonts
如果你只是想这样做来解决谷歌字体附带的浏览器缓存问题，你可以使用替代字体CDN，并包括字体为:
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />
或一种特定的字体，如:
<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />
我写了一个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
