谷歌css字體如何下載和嵌入到CSS以避免緩慢加載時間

Question

我使用yaml css框架。每當我訪問我的網頁時，我都會收到以下消息，表明我的網頁正嘗試下載谷歌字體。

這頁是內部網頁和互聯網可能會很慢，所以我期待，以阻止這種情況發生。我想我需要做的是下載字體，並把它放在我的CSS的某個地方。任何人都可以指導我如何做到這一點，也可以在哪裏獲取谷歌字體？

感謝

Answer 1

的好地方查找字體是http://www.google.com/fonts

也許你可以從這裏下載德羅伊德桑：http://www.fontsquirrel.com/fonts/Droid-Sans如果TTF是確定和你在一起。

至於字體，如果你婉的字體是全球性的，你可以簡單地做：

@font-face { 
    font-family: DroidSans; 
    src: url('location/DroidSans.ttf'), 
     url('location/DroidSans.eot'); /* IE9 */ 
} 

html * { 
    font-family: DroidSans; 
} 

如果你想支持IE9 - 我認爲有很多TTF網上EOT轉換器。

Answer 2

把它放到你的CSS文件中。顯然，改變文件的名稱以符合你的使用。

/* Webfont: Open Sans Regular */ 
@font-face { 
    font-family: 'open_sansregular'; 
    src: url('path/to/fonts/OpenSans-Regular-webfont.eot'); 
    src: url('path/to/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('path/to/fonts/OpenSans-Regular-webfont.woff') format('woff'), 
     url('path/to/fonts/OpenSans-Regular-webfont.ttf') format('truetype'), 
     url('path/to/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

p { 
    font-family:'open_sansregular', Verdana, Arial, sans; 
} 

您可以通過互聯網下載字體，但要確保它們對公衆開放，除非您購買許可證。

Answer 3

您可以直接從Google Fonts下載字體文件。

然後將文件託管在您的服務器上。

然後使用@font-face將它們導入到您的頁面中。

然後在你的CSS使用它像任何其他字體：font-family: 'Droid Sans'

Answer 4

照顧時，僅參考TTF。要覆蓋大多數瀏覽器，您需要引用TTF，EOT，WOFF，WOFF2和SVG 5種不同的字體格式。在Google字體網站上，您只能下載TTF。

當您從Google Fonts網站包含CSS文件時，Google會負責檢測用戶代理，並將以正確的字體格式提供CSS規則。要下載所有需要使用不同瀏覽器的字體格式或假冒用戶代理，大多數瀏覽器都可以這樣做。

一個方便的工具，如http://www.localfont.com/可以爲你照顧這個。您可以下載所有可能的字體格式以及X-Browser CSS定義。