157

我有一个模板，它引用了这样的 Google 字体：

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

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

4

12 回答 12

368

查看google webfonts 助手

它可以让你下载谷歌的每一种网络字体，并为实现建议 css 代码。该工具还允许您轻松地一次下载所有格式。

想知道 Google 在哪里托管他们的网络字体吗？如果您想直接从 google 下载字体变体的所有 .eot、.woff、.woff2、.svg、.ttf 文件（通常您的用户代理会确定最佳格式），此服务可能会很方便。

也看看他们的Github 页面。

于 2014-12-29T21:42:39.917 回答
104

只需转到 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'>
于 2013-04-10T15:33:56.357 回答
47

找到了实现此目标的分步方法（对于 1 种字体）：（
截至2013 年 9 月 9 日）

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

就是这样。因为我遇到了同样的问题，上面的解决方案对我不起作用。

于 2013-09-06T00:34:02.483 回答
25

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

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

结果包含所有字体格式：woff、svg、ttf、eot。

并且作为额外的奖励，他们也会为您生成 css 文件！

于 2014-03-02T23:16:52.387 回答
6

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

字体源

Fontsource允许您：

整齐捆绑的 NPM 包中的自托管开源字体。

您可以搜索 npm以浏览可用的字体，例如@fontsource/roboto或@fontsource/open-sans并像这样安装：scope:fontsource <typefacename>

$ npm install @fontsource/roboto    --save 
$ npm install @fontsource/open-sans --save

字体下载器

对于更通用的用例，有几个 npm 包将分两步提供字体，首先是安装库，然后将其指向您想要包含的字体名称和选项。

延伸阅读：

于 2018-11-25T18:41:56.840 回答
4

3个步骤：

  1. 在 Goole Fonts 上下载您的自定义字体并下载 .css 文件，例如：下载http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 并另存为example.css
  2. 打开您下载的文件（example.css）。现在您必须下载所有字体文件并将它们保存在字体目录中。
  3. 编辑example.css：将所有字体文件替换为您的 .css 下载

前任：

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

查看 src: -> url。下载http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2并保存到字体目录。之后将 url 更改为所有下载的文件。现在它看起来像

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** 下载所有包含 .css 文件的字体希望对您有所帮助

于 2017-09-08T20:49:19.700 回答
3

本质上，您将字体包含到您的项目中。

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');
于 2013-04-10T15:27:22.497 回答
2

使用 Google 字体时，您的工作流程分为 3 个步骤：“选择”、“自定义”、“嵌入”。如果您仔细观察，在“使用”页面的右端，有一个小箭头，可以让您下载当前收藏中的字体。

之后，一旦在系统上安装了字体，您只需像使用任何其他常规字体一样使用font-familyCSS 指令即可。

于 2013-04-10T15:29:21.233 回答
1

1）去谷歌字体

2）选择你的字体，它是一种风格

3）然后你会得到一个链接标签，链接的一侧点击导入

  1. 复制其存在于 URL（'此处'）中的链接并将其粘贴到浏览器搜索栏上。

  2. 然后你会得到这样的东西

  3. 然后下载它并将其保存在您的项目文件所在的位置！

7) 然后将其包含在您的 HTML 链接标签中或将其导入您的 CSS 文件 ( https://i.stack.imgur.com/NvJ60.jpg ) ( https://i.stack.imgur.com/XwK0l. .jpg )

8）然后使用谷歌字体中提到的ton族

于 2021-03-26T05:28:28.253 回答
0

我按照duydb 的回答生成了下面的 python 代码来自动化这个过程。

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

希望这有助于一些复制粘贴的死亡。

于 2018-04-15T04:00:27.043 回答
-1

您需要下载字体并在本地引用它。

从您发布的链接下载CSS，然后下载所有WOFF文件并（如果需要）将它们转换为TTF.

然后CSS从您发布的链接中更改以在本地包含字体。

从

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

到

url(/path/to/font/font.woff)

瞧！您可能还需要做一些其他事情，但以上是基础知识。这篇文章解释得好一点。

于 2013-04-10T15:30:34.387 回答
-3

只需下载字体并将其解压缩到文件夹中即可。然后链接该字体。下面的代码对我有用。

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}
于 2015-01-03T14:38:53.943 回答