下载Google字体并设置使用它的离线网站

Question

我有一个模板,它有一个像这样的Google字体的引用:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

如何下载并将其设置为在我一直在线下运行的页面中使用？

Answer 1

查看google webfonts帮助器

它允许您下载Google的每个Web字体并建议实施的css代码.此工具还允许您一次性轻松下载所有格式,而无需麻烦.

曾经想知道谷歌在哪里托管他们的网络字体？如果您想直接从谷歌下载字体变体的所有.eot,.woff,.woff2,.svg,.ttf文件(通常您的用户代理将确定最佳格式),此服务可能会很方便.

另请查看他们的Github页面.

Answer 2

只需转到Google字体 - http://www.google.com/fonts/,将您喜欢的字体添加到您的收藏中,然后按下载按钮即可.然后使用@fontface将此字体连接到您的网页.顺便说一句,如果你打开你正在使用的链接,你会看到一个使用@fontface的例子

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

举个例子

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

只需将url地址更改为您已下载的字体文件上的本地链接即可.

你可以更容易地做到这一点.

只需下载文件,您已链接:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

将它命名为opensans.css左右.

然后只需将url()中的链接更改为您的字体文件路径.

然后将您的示例字符串替换为:

<link href='opensans.css' rel='stylesheet' type='text/css'>

Answer 3

发现了一步一步的方式来实现这一点(1种字体):
(作为九月-9 2013)

1. 在http://www.google.com/fonts上选择您的字体
2. 使用"添加到集合"蓝色按钮将所需的一个添加到您的集合中
3. 点击"从收藏中删除"按钮旁边的"查看所有样式"按钮,确保您选择了其他可能需要的样式,例如"粗体"...
4. 点击页面右下角的"使用"标签按钮
5. 单击顶部的下载按钮,并显示向下箭头图像
6. 单击出现的弹出消息中的"zip文件"
7. 单击弹出窗口中的"关闭"按钮
8. 慢慢滚动页面,直到看到3个标签"Standrd | @import | Javascript"
9. 单击"@import"选项卡
10. 选择并复制网址之间'url('和')'
11. 将其复制到新标签中的地址栏并转到那里
12. 执行"文件>将页面另存为..."并将其命名为"desiredfontname.css"(相应地替换)
13. 解压缩你下载的字体.zip文件(应提取.ttf)
14. 转到" http://ttf2woff.com/ "并将从zip中提取的任何.ttf转换为.woff
15. 使用ttf2woff.com上相应的转换后的.woff文件编辑desiredfontname.css并替换其中的任何网址[之间'url('和')']; 您编写的路径应该根据您的服务器doc_root
16. 保存文件并将其移动到最终位置并编写相应的<link/>CSS标记以​​在HTML页面中导入它们
17. 从现在开始,请font-family在样式中按名称引用此字体

而已.因为我有同样的问题,顶部的解决方案对我不起作用.

Answer 4

其他答案没有错,但我发现这是最快的方法.

1. 从Google字体下载zip文件并解压缩.
2. 一次将字体文件3上传到http://www.fontsquirrel.com/tools/webfont-generator
3. 下载结果.

结果包含所有字体格式:woff,svg,ttf,eot.

并且作为额外的奖励,他们也为您生成css文件!

Answer 5

如果您想明确声明您的包依赖项或自动下载，您可以添加一个节点包来拉入谷歌字体并在本地提供服务。

NPM -谷歌字体下载小号

该字体的项目创造了开放源码的字体NPM包：

每个包都附带所有必要的 fons 和 css，以自托管开源字体。
添加了所有 Google 字体以及一小部分但不断增加的其他开源字体。

只要搜索NPM的浏览喜欢的可用字体的字体-的Roboto或字体开放的SAN和安装这样的：typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

npm - Google 字体下载器

对于更通用的用例，有几个 npm 包将分两步交付字体，首先通过获取包，然后将其指向您想要包含的字体名称和选项。

以下是一些选项：

• 谷歌字体 Webpack 插件
• 谷歌字体离线
• 谷歌字体
• 获取 Google 字体

进一步阅读：

• 如何离线托管材质图标？
• 在 Electron 应用程序中使用离线 Material 图标和 Roboto 字体