下載谷歌字體並設置使用它的離線網站

問題描述

我有一個模板，它有一個這樣的谷歌字體的引用：

<link href='http://googlefonts.admincdn.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://googlefonts.admincdn.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://googlefonts.admincdn.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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

下載谷歌字體並設置使用它的離線網站