如何一致地調整本身小於標準的字體？

我的問題是我使用的是本地託管的webfont（我們將其稱爲Gothic），並且我在樣式表中應用的字體大小對聲明的備份字體有顯着影響。如何一致地調整本身小於標準的字體？

實施例，使用爲便於虛數：

哥特在48，像素或EM尺寸，佔用約300像素的寬度。備份字體Arial，如果它由於任何原因加載，在48 px或em，加載寬度大約爲1200像素。

我從來沒有見過一個字體的行爲是這樣的，這讓我想知道是否奇怪是由於構建文件格式，但我不確定。任何幫助將受到歡迎。

2012-09-15 AccountStackOverflow

您需要提供您正在使用的CSS。 –

字體大小定義了字形的_height_，而不是寬度。不同的字體具有不同的平均寬度，因此呈現的文本在字體之間的總寬度可能會有很大差異。看看[font-size-adjust'屬性]（http://www.w3.org/TR/2012/WD-css3-fonts-20120823/#propdef-font-size-adjust），但顯然瀏覽器支持非常差。 – lanzz

@lanzz我使用的是一種超濃縮的字體，佛法哥特式，所以這個理論似乎是合理的。任何解決方法？ – AccountStackOverflow

首先，來看看瀏覽器的@font-face support並注意：

EOT格式是由IE瀏覽器只支持
WOFF是通過任何瀏覽器的支持，但IE8
SVG不支持IE和Firefox
TTF/OTF是深受任何瀏覽器，但IE

你支付任何瀏覽支持R'

然後，您需要爲不支持@ font-face的瀏覽器提供回退功能。

我建議您在文檔的頭部包含Modernizer。

選擇@字體面和添加近代化的下載頁面的CSS類，或按照此download link。

Modernizer將類添加到頁面的<html>元素，因此您可以使用此類來覆蓋不支持特定功能的瀏覽器的設置。此規則將適用於整個文檔：

.no-fontface { 
    font-size:16px; /* the font size value for Arial only */ 
}

它必須放置下面任何其他font-size規則。或者，您可以聲明font-size:16px !important;並將規則放置在樣式表中的任何位置。它不會被覆蓋（當然使用important!的其他規則除外）。

如果要定位特定元素，則必須在選擇器的開始處放置.no-fontface。例如：

.no-fontface #header h1 { 
    font-size:18px; 
}

來源

2012-09-15 13:22:05 Giona

Modernizr似乎是最容易實現的解決方案;我用於我的頭條的印刷術對於任何網頁安全來說都是獨一無二的。謝謝！ – AccountStackOverflow

理想情況下，您要爲字體堆棧選擇一組相似比例的字體組。如果在任何類似於首選字體的操作系統上沒有可以預期的字體，那麼在這個時候就沒有辦法做到這一點。

字體大小不是你可以依賴的任何東西，因爲用戶可以並且將會修改這個。當他們的設計發生什麼？

來源

2012-09-15 13:11:49 cimmanon

查看我的回答編輯 – Giona

如何一致地調整本身小於標準的字體？

回答

相關問題