如何讓谷歌字體在IE中工作？

Question

我一直在開發一個使用Google Fonts API的網站。這很好，據說已經在IE中進行了測試，但是在IE 8中測試時，字體根本沒有風格。

我包括字體，如谷歌instructs，即：

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light" 
rel="stylesheet" type="text/css" /> 

，從而在CSS中添加其名稱的字體家族的面前：

body { 
font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif; 
font-size: 16px; 
overflow-y: scroll; 
overflow-x: hidden; 
color: #05121F; 
} 

作品像Chrome，Firefox，Safari中的魅力。沒有骰子在IE 8中。有人知道爲什麼嗎？

Answer 1

的方法，通過他們的technical considerations頁所示，是正確的 - 所以你絕對沒有做錯什麼。然而，谷歌代碼上的this bug report表明Google爲此製作的字體，特別是IE版本存在問題。這似乎隻影響一些字體，但它是一個真正令人沮喪的。

的線程上的答案表明，問題在於谷歌的服務了文件，所以沒有什麼可以做的。筆者建議從備選地點得到的字體，如FontSquirrel，並在本地服務代替它，在這種情況下，你可能也有興趣在像the League of Movable Type網站。

N.B.截至2010年10月，該問題在Google Code錯誤報告中報告爲已修復並關閉。

Answer 2

您可以嘗試fontsforweb.com其中的字體可以用於所有的瀏覽器，因爲它們在TTF提供，WOFF和EOT加上CSS代碼格式準備好你的頁面即

@font-face{ 
    font-family: "gothambold1"; 
    src: url('http://fontsforweb.com/public/fonts/5903/gothambold1.eot'); 
    src: local("Gotham-Bold"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.woff') format("woff"), url('http://fontsforweb.com/public/fonts/5903/gothambold1.ttf') format("truetype"); 
} 
.fontsforweb_fontid_5903 { 
    font-family: "gothambold1"; 
} 

，或者你要粘貼可以下載它們在CSS文件中的包拉鍊連接

然後只需添加類的任何元素以應用字體即

<h2 class="fontsforweb_fontid_5903">This will be written with Gotham Bold font and will work in all browsers</h2> 

看到它的工作：http://jsfiddle.net/SD4MP/

Answer 3

看起來像使用link標籤href IE8，IE7無法理解通過相同文件請求多個谷歌的Web字體樣式。

這兩個環節上幫助我弄清楚了這一點：

• 看到這個open Google issue，並查看評論。
• 也看到這個StackOverlow回答Google Web Fonts don't work in IE8

我得到它在IE7，IE8的工作是隻有一個谷歌的Web字體要求的唯一途徑。而只有在link標籤的href一個字體樣式：

所以通常你會擁有這一點，在同一請求宣告多種字體樣式：

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

但在IE7，IE8添加一個IE條件並指定每個谷歌的字體樣式分別，它會工作：

<!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" /> 
<![endif]--> 

希望這可以幫助別人！

Answer 4

爲什麼它的價值，我無法得到它在IE7/8/9的工作和多個聲明選項沒有任何區別。

對我來說，修復是作爲對Technical Considerations Page它凸顯了指令的結果......

對於IE最好的顯示，使樣式表「鏈接」標籤中的第一 元素在HTML '頭'部分。

現在適用於我的IE7/8/9。

Answer 5

我嘗試了上面的所有選項，但都沒有工作。 然後我在我的文件夾（新）中找到谷歌字體（彩虹），並使用IE條件下面，它的工作完美。

<!--[if IE]> 
<style type="text/css"> 
    @font-face { 
    font-family: "Over the Rainbow"; 
    src: url("../new/over.ttf"); 
    src: local("Over the Rainbow"), url("../new/over.ttf"); 
    } 
</style> 
<![endif]--> 

我希望這將有助於

Answer 6

嘗試這種類型的鏈接，它將運行在IE瀏覽器也。希望這可以幫助 。

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

Answer 7

我和你有同樣的問題。 我發現了一個使用Adobe Web Fonts代碼的解決方案，可以在Internet Explorer，Chrome，Firefox和Safari中完美工作。在這個頁面

更多信息：http://html.adobe.com/edge/webfonts/

Answer 8

雖然姜毅的解決方案可以工作，我不相信放棄谷歌網頁字體API是這裏的正確答案。當它沒有從CDN正確加載時，我們提供本地jQuery文件，對吧？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="/js/jquery-1.9.0.min.js"><\/script>')</script> 

那麼，爲什麼我們不會爲字體，特別是< IE9做同樣的事情呢？

<link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'> 
<!--[if lt IE 9]><link href='/css/fonts.css' rel='stylesheet' type='text/css'><![endif]--> 

這裏是我的過程中使用自定義字體時：從谷歌

1. 下載字體的ZIP文件夾，並使用Font Squirrel's @font-face Generator創建本地Web字體。

2. 創建一個fonts.css文件，該文件調用新創建的本地託管字體文件（如果上面顯示的是< IE9，則只鏈接到該文件）。注意：@ font-face生成器會爲您創建該文件。

   @font-face { 
       font-family: 'cardoitalic'; 
       src: url('cardo-italic-webfont.eot'); 
       src: url('cardo-italic-webfont.eot?#iefix') format('embedded-opentype'), 
       url('cardo-italic-webfont.woff') format('woff'), 
       url('cardo-italic-webfont.ttf') format('truetype'), 
       url('cardo-italic-webfont.svg#cardoitalic') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
   } 
   @font-face { 
       font-family: 'cardobold'; 
       src: url('cardo-bold-webfont.eot'); 
       src: url('cardo-bold-webfont.eot?#iefix') format('embedded-opentype'), 
       url('cardo-bold-webfont.woff') format('woff'), 
       url('cardo-bold-webfont.ttf') format('truetype'), 
       url('cardo-bold-webfont.svg#cardobold') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
   } 
   @font-face { 
       font-family: 'cardoregular'; 
       src: url('cardo-regular-webfont.eot'); 
       src: url('cardo-regular-webfont.eot?#iefix') format('embedded-opentype'), 
       url('cardo-regular-webfont.woff') format('woff'), 
       url('cardo-regular-webfont.ttf') format('truetype'), 
       url('cardo-regular-webfont.svg#cardoregular') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
   } 
   

3. 在你的主樣式表使用IE條件類avoide faux weights and styles，你的字體樣式可能是這樣的：

   h1{ 
       font-size:3.25em; 
       font-weight:normal; 
       font-style:italic; 
       font-family:'Cardo','cardoitalic',serif; 
       line-height:1.25em; 
   } 
   h2{ 
       font-size:2.75em; 
       font-weight:700; 
       font-family:'Cardo','cardobold',serif; 
       line-height:1.25em; 
   } 
   strong 
   ,b{ 
       font-family:'Cardo','cardobold',serif; 
       font-weight:700, 
   } 
   .lt-ie9 h1{ 
       font-style:normal; 
   } 
   .lt-ie9 h2{ 
       font-weight:normal; 
   } 
   .lt-ie9 strong, 
   .lt-ie9 b{ 
       font-weight:normal, 
   } 
   

當然，這是一些額外的工作，但沒有我們來期待從IE瀏覽器？此外，它一段時間後成爲第二性。

Answer 9

Google字體使用Web Open字體格式（WOFF），這很好，因爲它是W3C推薦的字體格式。

早於IE9的IE版本不支持Web Open字體格式（WOFF），因爲它當時不存在。要支持< IE9，您需要在嵌入式打開類型（EOT）中提供您的字體。爲此，您需要編寫自己的@ font-face css標籤，而不是使用Google的嵌入腳本。您還需要將原始的WOFF文件轉換爲EOT。

您可以通過先轉換爲TTF再到EOT你WOFF轉換爲EOT在這裏： http://convertfonts.com/

然後你就可以服務於EOT字體是這樣的：

@font-face { 
    font-family: 'MyFont'; 
    src: url('myfont.eot'); 
} 

現在，它的工作原理在< IE9。然而，現代瀏覽器不再支持EOT，所以現在你的字體在現代瀏覽器中不起作用。所以你需要指定它們。 SRC屬性由逗號支持這種分離該字體的URL和specefying類型：

src: url('myfont.woff') format('woff'), 
    url('myfont.eot') format('embedded-opentype'); 

然而，< IE9不明白這一點，它只是graps第一次報價和最後報價之間的文本，所以它會實際得到：

myfont.woff') format('woff'), 
url('myfont.eot') format('embedded-opentype 

作爲字體的URL。我們可以通過首先指定一個只有一個URL作爲EOT格式的src，然後指定第二個src屬性來適應現代瀏覽器，並且IE9不理解。因爲< IE9不理解它，它會忽略標籤，所以EOT仍然可以工作。現代瀏覽器將使用它們支持的最後指定字體，所以可能是WOFF。

src: url('myfont.eot'); 
src: url('myfont.woff') format('woff'); 

所以，僅僅是因爲在第二SRC屬性指定format('woff')，< IE9不會理解它（或者實際上它只是不能在URL myfont.woff') format('woff找到字體），並會繼續使用指定的第一個一（eot）。

所以現在你已經有了你的谷歌Webfonts爲< IE9和現代瀏覽器工作！

有關不同的字體和瀏覽器支持的詳細信息，請閱讀由Alex Tatiyants這個完美的文章： http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/

Answer 10

這是所有關於嘗試所有這些問題的答案，對我來說，沒有什麼工作，除了在未來的解決方案： 谷歌字體建議使用

@import 'https://fonts.googleapis.com/css?family=Assistant'; 

但是，我在這裏使用的是外語字體，它不適用於IE11。我發現這個解決方案，它的工作：

@import 'https://fonts.googleapis.com/css?family=Assistant&subset=hebrew'; 

。希望救一個人寶貴的時間