在IE8字體後備中使用的Web字體

我正在嘗試在我構建的網站上實現web字體，我想用它作爲font-family屬性內的後備，即如果字符未在Arial/Helvetica中表示那麼它應該在使用的webfont內。在IE8字體後備中使用的Web字體

我意識到這不會在IE6和7中工作，但預計它在IE8中工作，它似乎不太。

我只是想知道如果有人有過這個問題的任何經驗，並且如果在IE8中使用webfont作爲備用字體是可能的，或者任何人都可以看到我只是在代碼中做錯了什麼。

在此先感謝，任何幫助

這裏是我的CSS代碼：

@font-face { 
    font-family: 'stix'; 
    src: url('/webfonts/webfont.eot'); 
    src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'stix'; 
    src: url('/webfonts/bold-webfont.eot'); 
    src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'stix'; 
    src: url('/webfonts/talic-webfont.eot'); 
    src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'stix'; 
    src: url('/webfonts/bold_italic-webfont.eot'); 
    src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg'); 
    font-weight: bold; 
    font-style: italic; 

} 

body { font-family: arial, helvetica, clean, stix, sans-serif} 
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }

來源

2011-03-02 Nick

錯字，也許有所作爲：/webfonts/talic-webfont.eot - > /webfonts/italic-webfont.eot – 2011-03-08 17:06:49

我正在使用精簡版的代碼（僅爲了清晰起見 - 沒有什麼問題），並在很多瀏覽器中進行測試（webfont是STIX，就像你，不是我知道這是否起作用），而且我看到一些奇怪的行爲：在大多數瀏覽器中字體回退確實工作，但只有當排除所有字體的斜體變體（斜體或粗體）。

I.e.這工作（時間的100％），與瀏覽器回落至STIX這些字符不是Arial字體：

@font-face { 
    font-family: 'stix'; 
    src: url('stixgeneral-webfont.eot'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'stix'; 
    src: url('stixgeneralbol-webfont.eot'); 
    font-weight: bold; 
    font-style: normal; 
} 
body {font-family: arial, stix, sans-serif;}

...但這樣做的時候不工作100％（雖然有時它做顯示字符）：

@font-face { 
    font-family: 'stix'; 
    src: url('stixgeneral-webfont.eot'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'stix'; 
    src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */ 
    font-weight: normal; 
    font-style: italic; 
} 
body {font-family: arial, stix, sans-serif;}

這樣做的原因似乎是在STIX字體包有錯誤。

爲了解決這個問題，在FontForge中打開您的STIX字體包並保存 - FontForge會通知您錯誤。修正這些，然後才導入到FontSquirrel中。字體後備應該現在可以正常工作。

來源

2011-03-04 11:19:00 dotcode

當它用作主字體而不是後備時，它是否正確地應用所有變體字體？ – 2011-03-08 17:27:21

嘗試使用轉換器上fontsquirrel.com

來源

2011-03-02 17:12:32 methyl

感謝您的答覆甲基。它最初是使用fontsquirrel.com創建的，所以這不是問題。 – Nick 2011-03-03 09:58:49

什麼是使用STIX作爲後備的好處？

如果是爲了防止UA下載字體，除非需要它，否則你運氣不好，目前只有webkit有這種行爲https://gist.github.com/478344更糟的是，IE會下載@ font-face中定義的所有字體，即使它們'沒有在CSS中的其他地方引用。

如果是因爲STIX沒有常規字符，是的，IE會把你搞砸在這裏。我建議將STIX與免費字體合併在一起，以創建一個包含所有需要的字符的交付物。

來源

2011-03-03 11:35:19

理想情況下，STIX的使用應該限制在小的或其他什麼。有些JS可以在非數學unicode範圍內查看它並且使用字符串字符。此代碼只在IE中需要，並且後備將是該跨度的所有STIX。 – 2011-03-03 11:41:54

另一個建議是......嘗試使用arial作爲後備，而不是STIX。從STIX中刪除常規字符，並查看IE是否回退到默認值。我很確定IE8會回退網頁字體（我認爲它只是IE6沒有） – 2011-03-03 12:02:16

問題可能是「在Internet Explorer 8和早期版本中，only one URL value is supported」。

此外，不要使用@ font-face作爲回退字體，而應選擇一個您喜歡的字體，並且不要聲明其中有序的「arial，helvetica」，而是直接回退到無襯線字體。這樣，在每個平臺上都會使用最適合的sans-serif，例如Arial for Windows和Helvetica for OS X等。

來源

2011-03-03 11:59:26 Marcel

Btw ... IE會嘗試加載SVG格式，所以你應該在svg之後定義EOT src！（IE bug）。

來源

2012-04-21 12:04:11 xpepermint

在IE8字體後備中使用的Web字體

回答

相關問題