如何規範在不同的字體家庭

字體大小，我在我的網站使用奧斯瓦爾德（http://www.google.com/fonts/specimen/Oswald）和自由的抵達Neue（http://dharmatype.com/dharma-type/bebas-neue.html）。如何規範在不同的字體家庭

我加載都通過font-face（奧斯瓦爾德通過谷歌Web字體，但它是相同的過程）。

然而，自己使用相同的字體大小的定義當與顯着不同的高度出現的字體（例如font-size:14px呈現兩個非常不同的尺寸）。

我需要它們呈現相同大小的頁面才能工作。

有兩個問題：i）是什麼導致了這種差異，ii）可以採取什麼措施來解決這個問題？最好符合IE8。

由於

來源

2013-08-26 alias51

我認爲這是不可能的，因爲如果你已經創建了一個字體，你知道每個字符都有一個保留空間，並且你能夠在該空間創建任意大小的字符。 –

字符（相對於字體大小）的大小取決於字體設計者的決定。這基本上就是你在選擇字體組合時需要考慮的事情。通常情況下，字體混合不好，除非設計。

的font-size-adjust財產旨在解決這個問題。但它僅受Firefox的支持，並且以破碎的方式。

來源

2013-08-26 16:45:14

答案1：字體中的字形定位在畫布上。他們需要周圍的空白來定位彼此。白色的數量不同。其中一個原因是x高度與上行者（bdfhklt）和下行者（gjqpy）的大小之比。如果字體具有相對較小的x高度（較大（as/de）中心），比字形具有相對較大x高度的字體更多。有更多的變量影響白色的數量。大寫/小寫字母比例和字體重量。

答案2：沒有什麼是壞的。您可以使用css並相對設置字體大小並更正文本的大小。

x-height and capital height

您可以將圖像滾動到你的瀏覽器窗口來檢查哪裏字形排列的邊緣。

上：無調整

中：相同的X-高度。這看起來不錯！

底部：相同的資本高度。這是你所需要的，因爲你的一種字體都是大寫字母。

的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <style> 
     p 
     { 
      border: 1px solid red; 
      line-height: 1EM; 
      font-size: 600%; 
      margin: 0 0 0.1EM 0; 
     } 

     .arial { font-family: 'Arial'; } 
     .times { font-family: 'Times New Roman'; } 

     .times_same_x_height { font-size:116%; } 
     .times_same_capital_height { font-size:108%; }   

     .font_stack { font-family: "Does not exist", serif; } 

    </style> 
</head> 
<body> 

    <p> 
     <span class="arial">xH</span> 
     <span class="times">xH</span> 
    </p> 

    <p> 
     <span class="arial">xH</span> 
     <span class="times times_same_x_height">xH</span> 
    </p> 

    <p> 
     <span class="arial">xH</span> 
     <span class="times times_same_capital_height">xH</span> 
    </p> 

</body> 
</html>

注0：如果它看起來正確的，它是對的。所以不要使用x-height並且要做到這一點。有時，明顯的尺寸差異會使字體組合更加和諧。用你的眼睛（和大腦）。

注1：我將文本放在同一段落中。我這樣做是因爲它使基線對齊。但它更可能是你的文本元素相互分離。定義合適的line-height和margin來定位。使用相對值。一時有點基線漂移：.shift { top: -.01EM; position:relative; }

注2：如果您的字體不存在。font_stack將使用下一個最好的字體。意識到您的精美版式適用於堆疊中的所有字體！

提示：如果你想稍微改變字體的重量。你可以讓顏色變得更輕。例如。從黑色到深灰色。這將使它看起來不那麼大膽。

獎勵：IE會遵守。

反饋表示讚賞。

來源

2013-08-26 22:48:19 allcaps

如何規範在不同的字體家庭

回答

相關問題