如何修復@fontface與默認字體大小 - 如果@fontface未加載，則佈局中斷

如果網站使用@fontface加載2個自定義字體，並且還使用ariel或sans-serif字體作爲默認/備份字體但是這兩種字體的大小差別很大 - 如何解決如果@fontface字體未加載時發生的佈局問題？如何修復@fontface與默認字體大小 - 如果@fontface未加載，則佈局中斷

問題是@fontface字體比默認的ariel字體佔用的空間少。所以如果標題大小爲45px，並且@fontface字體在div內完全加載。但是，如果@fontface字體沒有及時載入 - 默認字體會加載（45px），而且ariel在div中佔用更多空間，導致標題分成兩行，從而破壞了版面。

那麼我們如何控制@fontface風格和默認風格。理想情況下，我希望將h2 @fontface樣式保留爲45px，並強制默認字體以相同h2樣式的30px加載。

2011-06-01 Tigger

偉大的問題！和野性，我昨天會發布相同的確切問題 - 我最終只使用Arial Narrow作爲備份字體，因爲它沒有打破我的佈局。有興趣看到對此的迴應。 – 2011-06-01 16:50:55

如果您不介意依賴JavaScript支持，您可以使用類似Modernizr的東西，其中包括@font-face支持的html元素的fontface類。然後，只需返工你的CSS如果類存在只使用更好的字體，像這樣：

h2 { font:30px/1.2 sans-serif; } 
html.fontface h2 { font:45px/1.2 'awesome font', sans-serif; }

2011-06-01 17:02:58 Marcel

這裏的缺點是，通常瀏覽器*不支持@ font-face，但是直到字體加載（或者如果它不是因爲網絡錯誤等），佈局被破壞。 – 2011-06-01 17:05:37

我正在嘗試使用字體大小百分比和em，但是我看到填充/邊距因此不同。所以我可以讓文本本身在兩者之間很好地發揮作用，但是間距很遠。 – Tigger 2011-06-01 17:12:29

@Tigger：然後爲每組規則使用不同的邊距/填充值。你可以基本上做出完全不同的佈局，這取決於是否支持'@ font-face'。 – Marcel 2011-06-01 17:16:21

使用選項X-height Matching:和Adjust Glyph Spacing

2011-06-07 09:26:11 seler

要完全擺脫FOUT Id建議this method。

如果不支持@font-face，則可以使用this filter來爲javascript替代品（如Cufón或Typeface.js）提供服務。

2011-06-07 11:29:10 Knu

我會推薦使用Google Web Font Loader，這會向body元素添加額外的類，它指示字體是否具有：開始加載，完成加載，無法加載。使用這些體類可以適當調整字體樣式。例如，如果加載的@ font-face失敗，則可以將字體系列設置爲較小的字體。

2011-06-10 08:32:08 Tom

哇，太棒了！謝謝！如果沒有什麼更好的話，我會留下這個開放的答案，並獎勵賞金。 – 2011-06-10 17:08:07

您需要使用度量元素來衡量當前正在使用的字體的實際大小，即像素比率。

一般的想法是，你有一個不可見的元素，使用基礎字體大小（如<span> </span>），然後使用JavaScript來衡量它在渲染頁面佔用多少（主要是高度）。

從那裏，您可以確定是否需要增加或減少活動字體大小，以便使用javascript將其縮放到所需的設計規格。

當然技巧取決於有一個單一的基本大小設置和其他設置的百分比（ala YUI重置/字體樣式）否則，你必須通過並重寫所有內容，而不僅僅是body的樣式。

引用我在我的書籤中找到：http://www.alistapart.com/articles/fontresizing在IE7時代寫的，但仍然正常工作。

該技術還解決了「如何補償用戶縮放文本/增加字體大小不破壞頁面佈局」。

2011-06-11 07:45:52 colinross

看看

，你會發現所有的指標可供您

我個人推薦point系統，如果你想使用一個固定大小（em太大和你的數字似乎更奇怪）

2011-06-11 07:53:04

回答