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

Downloading a Google font and setting up an offline site that uses it

提问by user2147954

I have a template and it has a reference to a Google font like this:

我有一个模板，它有一个对谷歌字体的引用，如下所示：

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

How can I download it and set it up to use in my pages which are running offline all the time?

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

采纳答案by Dmitriy Butenko

Just go to Google Fonts - http://www.google.com/fonts/, add the font you like to your collection, and press the download button. And then just use the @fontface to connect this font to your web page. Btw, if you open the link you are using, you'll see an example of using @fontface

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

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

For an example

举个例子

@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');
}

Just change the url address to the local link on the font file, you've downloaded.

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

You can do it even easier.

你可以更轻松地做到这一点。

Just download the file, you've linked:

只需下载文件，您已链接：

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

Name it opensans.css or so.

将其命名为 opensans.css 左右。

Then just change the links in url() to your path to font files.

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

And then replace your example string with:

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

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

回答by Marco Kerwitz

Check out google webfonts helper

查看谷歌网络字体助手

It lets you download every web font of Google and suggests css code for the implementation. This tool also allows you to simply download all formats at once without the hassle.

它允许您下载 Google 的所有网络字体并建议用于实现的 css 代码。该工具还允许您轻松地一次性下载所有格式。

Ever wanted to know where Google hosts their webfonts? This service might be handy if you want to download all .eot, .woff, .woff2, .svg, .ttf files of a font variant directly from google (normally your User-Agent would determine the best format).

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

Also take a look at their Github page.

也看看他们的Github 页面。

回答by 1111161171159459134

Found a step-by-step way to achieve this (for 1 font):
(as of Sep-9 2013)

发现了一步一步的方式来实现这一点（1种字体）：
（作为九月-9 2013）

1. Choose your font at http://www.google.com/fonts
2. Add the desired one to your collection using "Add to collection" blue button
3. Click the "See all styles" button near "Remove from collection" button and make sure that you have selected other styles you may also need such as 'bold'...
4. Click the 'Use' tab button on bottom right of the page
5. Click the download button on top with a down arrow image
6. Click on "zip file" on the the popup message that appears
7. Click "Close" button on the popup
8. Slowly scroll the page until you see the 3 tabs "Standrd|@import|Javascript"
9. Click "@import" tab
10. Select and copy the url between 'url('and ')'
11. Copy it on address bar in a new tab and go there
12. Do "File > Save page as..." and name it "desiredfontname.css" (replace accordingly)
13. Decompress the fonts .zip file you downloaded (.ttf should be extracted)
14. Go to "http://ttf2woff.com/" and convert any .ttf extracted from zip to .woff
15. Edit desiredfontname.cssand replace any url within it [between 'url('and ')'] with the corresponding converted .woff file you got on ttf2woff.com; path you write should be according to your server doc_root
16. Save the file and move it at its final place and write the corresponding <link/>CSS tag to import these in your HTML page
17. From now, refer to this font by its font-familyname in your styles

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 [之间'url('和')']；你写的路径应该根据你的服务器 doc_root
16. 保存文件并将其移动到最终位置，然后编写相应的<link/>CSS 标记以将它们导入到您的 HTML 页面中
17. 从现在开始，font-family在你的样式中通过它的名字来引用这个字体

That's it. Cause I had the same problem and the solution on top did not work for me.

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

回答by sym3tri

The other answers are not wrong, but I found this to be the fastest way.

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

1. Download the zip file from Google fonts and unzip it.
2. Upload the font files 3 at a time to http://www.fontsquirrel.com/tools/webfont-generator
3. Download the results.

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

Results contain all font formats: woff, svg, ttf, eot.

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

AND as an added bonus they generate the css file for you too!

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

回答by duydb

3 steps:

3个步骤：

1. Download your custom font on Goole Fonts and down load .css file ex: Download http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300and save as example.css
2. Open file you download (example.css). Now you must download all font-face file and save them on fontsdirectory.
3. Edit example.css: replace all font-face file to your .css download

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 下载

Ex:

前任：

@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;
}

Look at src: -> url. Download http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2and save to fontsdirectory. After that change url to all your downloaded file. Now it will be look like

查看 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;
}

** Download all fonts contain .css file Hope it will help u

** 下载所有包含 .css 文件的字体希望它会帮助你

回答by KyleMit

If you'd like to explicitly declare your package dependencies or automate the download, you can add a node package to pull in google fonts and serve locally.

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

npm - Google Font Downloads

NPM -谷歌字体下载小号

The typefaces projectcreates NPM packages for Open Source typefaces :

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

Each package ships with all the necessary fons and css to self-host an open source typeface.
All Google Fonts have been added as well as a small but growing list of other open source fonts.

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

Just search npmfor typeface-<typefacename>to browse the available fonts like typeface-robotoor typeface-open-sansand install like this:

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

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

npm - Google Fonts Download-ers

npm - Google 字体下载器

For the more generic use case, there are several npm packages that will deliver fonts in two steps, first by obtaining the package, and then by pointing it to the font name and options you'd like to include.

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

Here are some of the options:

以下是一些选项：

• Google Fonts Webpack Plugin
• Google Fonts Offline
• Google Fonts
• Get Google Fonts

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

Further Reading:

进一步阅读：

• How to host material icons offline?
• Using offline Material icons and Roboto font in Electron app

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

回答by davidb

Essentially you are including the font into your project.

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

@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');

回答by Pierre-Adrien Buisson

When using Google Fonts, your workflow is divided in 3 steps : "Select", "Customize", "Embed". If you look closely, at the right end of the "Use" page, there is a little arrow which allows you to download the font currently in your collection.

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

After that, and once the font is installed on your system, you just have to use it like any other regular font using the font-familyCSS directive.

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

回答by Wytamma Wirth

I followed duydb'sanswer to produce the python code below that automates this process.

我按照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)

Hope this helps with some of the copy-paste death.

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

回答by Mattios550

You need to download the font and reference it locally.

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

Download the CSSfrom the link you posted, then download all of the WOFFfiles and (if needed) convert them to TTF.

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

Then change the CSSfrom the link you posted to include the fonts locally.

然后CSS将您发布的链接更改为在本地包含字体。

From

从

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

To

到

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

Voila! There might be some more you need to do but the above is the basics. This articleexplains a little better.

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