爲同一元素定義不同的字體大小

我想使用Arial字體的嵌入字體作爲替代。嵌入式字體需要更大的字體大小。爲同一元素定義不同的字體大小

如何確保Arial在15pt顯示，Bebas在20pt顯示相同的元素。（同一篇文章）

謝謝！

*讓我進一步解釋：

我有一個文本字符串。我希望它顯示爲Bebas或Arial。當Arial作爲替代品加載時，它需要具有不同的字體大小和重量，因爲共享字體大小對於這些字體（Bebas很小）效果不佳。

2013-10-17 Dom Beatson

如果你我們e「嵌入的」（可下載的，Web）字體，那麼它將被使用，除非瀏覽器被告知不使用這種字體或某些用戶設置引起的副作用。所以防範這種情況可能毫無意義。關於回退字體，它們應該與主字體相似，所以如果您需要大幅改變尺寸，則應該使用其他字體。 –

您可以使用像FontChecker這樣的腳本來檢查字體是否可用。它依賴於MooTools和被調用是這樣的：

window.addEvent('domready',function() { 
    var fc = new FontChecker(); 
    if (!fc.check('Bebas')) { 
    $$('.someclass').setStyles({'font-size': '15pt'}); 
    } 
});

如果自由的不可用，它設置的字體大小與SomeClass的類所有元素15pt。

你的CSS文件：

.someclass { 
    font-family:Bebas,Arial,sans-serif; 
    font-size:20pt; 
}

如果你不使用MooTools的，也許還有其他圖書館或香草JS一個類似的腳本（=純JS無庫）。或者只是重寫它，it's quite short。

編輯：

其他一些腳本（我不認識他們，我只用FontChecker）：

的jQuery：http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/
香草：http://www.samclarke.com/2013/06/javascript-is-font-available/
另一個香草： http://www.lalit.org/lab/javascript-css-font-detect/

來源

2013-10-17 15:28:59 Reeno

FontChecker是一個kludge，它只比較不同字體文本的寬度。對我來說，它給出了一個誤報（Bebas可用，當它實際上不是）。 –

爲同一元素定義不同的字體大小

回答

相關問題