如何將Google網頁字體轉換爲組合的CSS

我想以各種格式下載Google網頁字體，並創建組合的CSS以在任何地方使用它們，而無需從Google服務器加載它們。如何將Google網頁字體轉換爲組合的CSS

我已經有一個php腳本下載字體文件。現在只需要CSS。

如您所知，Google網絡字體API根據瀏覽器用戶代理服務於特殊的CSS。

我有幾個關於它的問題。

這是真的，谷歌網頁字體得到只會一種字體爲SVG僅OS設備，我注意到了這一點，同時測試幾個字體（以虛假用戶代理）。雖然對於其他人有多個@font-face聲明但與font-weight和font-style不同。我是否正確地假設Google僅爲「常規」版本的字體提供SVG，而不是「斜體，粗體，書本...」
最好的方法是將它們組合成一個CSS，特別是關於這種組合SVG字體。

2013-03-19 James Mitch

11 downvotes和9 upvotes ...一個來自我。任何人都會低估這一點，這是有原因的：谷歌不會緩存這些字體。我在Chrome上使用他們的CSS，並且網絡檢查員的網絡標籤告訴我它每次都會打200個OK。理想情況下，它應該緩存這些字體，以使瀏覽器只在一生中裝載它們，恕我直言。 – 2014-09-01 00:20:23

你可以使用base64編碼，但它比普通文件大30％左右（我不知道這個url是否會在你每次寫東西時被解析，所以請在使用它之前檢查它）。或者您可以下載一次並將其保存在本地瀏覽器內存中，並在不下載新版本的情況下使用它（但仍需要至少下載一次這些文件）。

用IE我幫不了你。但是當你創建新的@ font-face規則時，你可以指定字體權重。

/** #1 **/ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Extrabold'), 
     local('OpenSans-Extrabold'), 
     url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hnhCUOGz7vYGh680lGh-uXM.woff) 
      format('woff'); 
} 
/** #2 **/ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: italic; 
    font-weight: 300; 
    src: local('Open Sans Light Italic'), 
     local('OpenSansLight-Italic'), 
     url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) 
      format('woff'); 
} 


.a { 
    font-family: 'Open Sans'; 
    font-weight: 300; /** #2 used for <= 500 cos font-weights are 300 and 600 **/ 
} 

.b { 
    font-family: 'Open Sans'; 
    font-weight: 800; /** #1 used for >= 600 **/ 
}

希望它能幫助你。

來源

2013-03-19 14:03:45

首先這看起來對我來說很難，第二我知道關於base64，第三我不認爲這以任何方式解決我的問題。我不明白爲什麼使用不同的字體權重之後。 – 2013-03-19 15:32:03

另外這從谷歌加載的字體不是在本地，這是不能解決我的問題。 – 2013-03-29 21:09:36

您說得對，Google只提供特定用戶代理的字體。讓他們都很棘手。

你提到你有取不同的字體格式PHP腳本，所以你可能並不需要這兩個選項，但無論如何，我會一一列舉：

選項1

本文將詳細介紹通過如何下載各種不同格式的過程：

http://ijotted.blogspot.com/2012/05/download-eot-ttf-woff-formats-of-font.html

總之，你需要使用用戶代理欺騙抓住所有不同的格式。

選項2

另一種選擇是隻搶到了TTF版本（因爲這很容易），然後頭向http://www.fontsquirrel.com/tools/webfont-generator讓他們轉換/生成所有其他版本。

如果最終使用此選項，則知道Joe Maller has put together a full download package一次抓取所有TTF字體文件（雖然它可能有點過時）可能會很有用。

服務了CSS

一旦你把所有的不同的版本，使用這樣的語法你的CSS。這是從FontSpring's Bulletproof Font-Face Syntax。

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
}

最後一行當然取決於你是否有SVG字體文件。這給我們帶來...

SVG

這first link聲稱：

雖然這是真的，谷歌提供運行版本4.2或低於iOS設備上的SVG字體格式，我可以證實SVG是空的或破碎的。因此，Google不再支持運行iOS 4.2及更低版本的設備。意味着，不再有SVG字體格式。

我一直無法覈實這在其他地方，但我已經看到了一大堆用戶抱怨SVG問題的，字體不加載......我會傾向於忽略SVG作爲一個選項，專注於提供EOT/WOFF/TTF。這似乎是覆蓋基地的最堅實的方式。

更新：似乎fontsquirrel.com可以生成一個SVG版本。因此，即使Google不提供SVG作爲下載選項，如果您真的想要，仍然可以生成它。

來源

2013-03-30 16:06:47 jszobody

如何將Google網頁字體轉換爲組合的CSS

回答

相關問題