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

问题描述

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

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

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

最佳解决方案

只需转到 Google 字体 – http://www.google.com/fonts/，将您喜欢的字体添加到收藏夹，然后按下载按钮。然后只需使用 @fontface 将此字体连接到您的网页。 Btw，如果您打开正在使用的链接，您将看到使用 @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'> 替换你的示例字符串

次佳解决方案

我知道我迟到了，但是 Google 的排名很高：查看 the google webfonts helper 。它允许您下载 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).

还看看他们的 Github page 。

第三种解决方案

找到一个 step-by-step 方式来实现这个 (1 个字体):(截至 2013 年 9 月 9 日)

Choose your font at http://www.google.com/fonts

Add the desired one to your collection using “Add to collection” blue button

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’…

Click the ‘Use’ tab button on bottom right of the page

Click the download button on top with a down arrow image

Click on “zip file” on the the popup message that appears

Click “Close” button on the popup

Slowly scroll the page until you see the 3 tabs “Standrd|@import|Javascript”

Click “@import” tab

Select and copy the url between 'url(' and ')'

Copy it on address bar in a new tab and go there

Do “File > Save page as…” and name it “desiredfontname.css” (replace accordingly)

Decompress the fonts .zip file you downloaded (.ttf should be extracted)

Go to “http://ttf2woff.com/” and convert any .ttf extracted from zip to .woff

Edit desiredfontname.css and 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

Save the file and move it at its final place and write the corresponding <link/> CSS tag to import these in your HTML page

From now, refer to this font by its font-family name in your styles

而已。因为我有同样的问题，顶部的解决方案对我来说没有效果。

第四种方案

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

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

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

作为一个额外的好处，他们也为你生成 css 文件！

参考文献

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

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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