選擇性樣式後備字體沒有JavaScript？

我見過幾種使用JavaScript對fallback字體進行樣式設計的方法：one by Google & Typekit, for example，但我很好奇，如果沒有任何JavaScript方法的話。選擇性樣式後備字體沒有JavaScript？

例如，我想使用Arial height:10px;，如果用戶沒有Arial，我想使用Times height:24px;，如果沒有，我想使用藍色的san-serif字體。好吧，而不是一個荒謬的例子，但它顯示了我要去的一般效果。

任何幫助將不勝感激！

來源

2012-04-19 DACrosby

在CSS中沒有辦法做到這一點。如果你找到一種方法來使用JavaScript，請分享它。（有一種方法可以在IE中獲得所有已安裝的JavaScript字體列表，但我不知道任何跨瀏覽器的方式。）

請注意，您引用的頁面不會設置後備字體的樣式;相反，它會動態加載字體（並且可以做到這一點，備用字體將失去重要意義）。

來源

2012-04-19 05:15:36

呀，這個鏈接肯定不是一個理想的解決方案，但它會帶着幾分種工作調整（好吧，可能很多，跨瀏覽器最好是可疑的）。 – DACrosby 2012-04-19 05:19:47

javascript方法只爲每個瀏覽器提供@ font-face堆棧和正確的URL。 - 等

font-family:your-google-font-name, arial, helvetica, freesans, sans-serif;

如果JavaScript在瀏覽器中禁用，字體會回落到宋體，如果Arial字體沒有安裝，到hevetiva：

，你可以按如下方式使用這個堆棧

不同的高度不應該是問題，因爲通常你有後備字體，表現和看起來幾乎相同的原始想要的字體。

與JavaScript，沒有問題設置它不顯眼。

使與Jasvascript（我喜歡這裏的jQuery）一個html的className：

(function($){ 

    $(document).ready(function(){ 

    $('html').addClass('withJS'); 

    }); 

}(jQuery));

現在你可以在CSS設置不同的樣式或不使用JavaScript。

設置不同的高度，這取決於實際的字體家庭使用（在身體標記示例）

var myFontFamily = $('body').css('fontFamily'); 

// Log to see whats the name you are working with: 
console.log(myFontFamily); 

if(myFontFamily == 'your-family-name-here'){ 
    $('body').css({fontSize: '20px' }); 
} else { 
    // do something else... 
}

來源

2012-04-19 09:44:58

「通常情況下，你的回退字體的行爲看起來幾乎相同」這就是我想要克服的問題：如果沒有足夠接近的字體，或者如果你發現一個類似，它就足夠不同你的網站？因此，在您的示例中，我希望樣式helvetica不同於arial，與「your-google-font-name」不同，具體取決於用戶看到的內容。如果我沒有弄錯，你的方法允許樣式，如果JS啓用或不是，但不是每個使用的後備字體。此外''.css（「fontFamily」）'返回整個字體樹：不僅是用過的。 http://jsfiddle.net/U9uBS/ – DACrosby 2012-04-19 22:17:26

你是對的 - 我沒有找到任何解決方案。但也許這篇文章可以清楚地告訴你如何使用modernizr http://webdesignerwall.com/tutorials/css3-font-face-design-guide - 這只是瀏覽器的後備 - 但對於生產系統，我會在這裏方向... – 2012-05-08 11:44:17

選擇性樣式後備字體沒有JavaScript？

回答

相關問題