以相同的實際尺寸顯示不同的字體？

當我在相同的字體大小使用兩個不同的字體在網頁中，他們往往表現在不同的實際尺寸：以相同的實際尺寸顯示不同的字體？

此示例使用兩個谷歌的字體，萬民法和變質，在相同的字體大小，指定爲20px。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <link id="Gentium Book Basic" rel="stylesheet" type="text/css" 
     href="http://fonts.googleapis.com/css?family=Gentium Book Basic" 
     media="all"> 
    <link id="Metamorphous" rel="stylesheet" type="text/css" 
     href="http://fonts.googleapis.com/css?family=Metamorphous" media="all"> 
    </head> 
<body style="font-size: 20px"> 
    <span style="font-family: Gentium Book Basic">Test Text Length (Gentium)</span> 
<br> 
<span style="font-family: Metamorphous">Test Text Length (Metamorphous) </span> 
</body> 
</html>

這個例子的JSBin可以找到here。

我對指定像px這樣的絕對長度的字體大小的理解是，字體將被縮放以匹配該長度。我的期望是兩個不同的字體在相同的字體大小將有匹配的高度或匹配的長度（我瞭解字體的長寬比可能會不同）。但似乎並不是這裏的情況。有什麼辦法可以使兩個任意字體在相同高度或相同長度下顯示，而無需手動計算和應用修正？

編輯：一個例子顯示在相同字體大小下顯示的兩種字體的上行距離的下降。

清楚地顯示的兩個距離是不是這兩種字體相同。

編輯：一個例子示出了具有和不具有在兩種字體重音字母：

再次，清楚的字母是不同的尺寸。

編輯：繼續討論this article中描述的問題，問題是font-size控制字體em值的顯示大小。但em值是任意的（它不必與字體中的任何內容相對應，特別是不必是小寫字母'm'的高度），並且不包括上行和下行，它們可以是任何大小在所有（從上面的文章所採取的示例）：

所以結果是一個「100像素」的字體可以只是關於不得以任何有效尺寸。上述文章的作者計算出當時Google Web字體的有效大小範圍爲0.618至3.378。

由於字體指標（如em尺寸，首字母高度，上升和下降值）未在CSS中公開，因此在CSS中似乎沒有任何方法使兩個任意字體具有相同的效果尺寸。對於任何特定的字體，您可以使用字體編輯器來查找字體指標值，並根據需要使用這些數字來縮放字體。對於任意字體，一個選項是顯示一些文本並使用測量的邊界框來確定有效大小並計算適當的縮放因子。

感謝大家對此解釋！

來源

2017-08-07 Dr. Pain

我不認爲除手動調整外，您可以對此進行任何操作。我已經建立了一個小沙箱進行實驗。我用['ch']（https://developer.mozilla.org/en/docs/Web/CSS/length#ch）單元繪製了兩個'div'元素。這個想法是看每個字體有多大的一個字符會呈現。不同的'font-size'單位似乎沒有任何影響。 https://jsfiddle.net/t31779e1/ –

你應該使用像rem這樣的東西然後px :)因爲rem是一個相對度量單位，而px是絕對的。但字體總是有不同的大小，而且它不可能實現你想要的。

來源

2017-08-07 14:26:18 Sharpy35

這回答問題的方式是什麼？ – Rob

的font-size的覺得還不如單個字符本身的實際大小，但包含每一個字符，就像排版字母塊的大小：

塊的大小在你的CSS中定義（使用px，pts，ems等），但是這些塊中字符的實際大小可以根據使用的字體而有所不同。

字體的任何給定部分的實際高度取決於用戶定義的DPI設置，當前元素字體大小以及使用的特定字體。

https://en.wikipedia.org/wiki/Em_(typography)#CSS

可以使用font-size-adjust屬性來幫助改變這些字體的一個更接近其他縮放：https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust雖然它支持目前僅限於火狐：http://caniuse.com/#feat=font-size-adjust

來源

2017-08-09 00:19:35 jrrdnx

這似乎不是真的。從上面的註釋（https://jsfiddle.net/t31779e1/）中看到JSFiddle，它顯示了對於不同的字體，相同字體大小的「塊」大小（如你所說）是不同的。 –

@ Dr.Pain定義每個塊的寬度和高度，在這裏擊敗你的目的。 [這是一個更新的小提琴]（https://jsfiddle.net/5bzj7ghw/），去除了約束寬度和高度，設置爲內嵌塊，以便您可以並排查看它們，並使用輪廓代替背景。我還爲每個div添加了一個字母，並將「line-height」屬性設置爲匹配。您可以看到它們的高度匹配（它們已被調整爲具有相同的基線），並且它們的高度與正在設置的字體大小（20px = 20px，2em/2rem = 32px）完全相同。 – jrrdnx

@ Dr.Pain如果你想看一看，這裏有一篇非常深入的文章：https：//iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align – jrrdnx

字體大小字形從上行字符的大小（例如字母「h」的頂部）到下行字母，例如字母'g'的底部。如果將字體大小設置爲20px，則從字母'h'的頂部到字母'g'底部的長度將爲20px。一些字母有終端或馬刺，字母的末尾可能會延長一些字母的px或者更高。

在你的榜樣，有兩種字體之間的差異像素。 Metamorphous字體在Gentium沒有的一些字母上面有一個標記，這就是高度差異的原因。

You can read more here.

編輯：看到這裏與C上面的「卡隆」相比，在右側的兩個萬民法字母。

來源

2017-08-09 00:35:15 Rob

謝謝你的解釋。但是，很多字體組合顯然不是這樣： –

對不起，Stackoverflow不會讓我繼續以前的評論。我已經添加了一個例子，顯示兩個以相同字體大小顯示的字體，上行距離與下行距離的差異。這有什麼原因會發生？ –

我做到了。不同之處在於Metamorphous的字母包含那些在字母上面也有標記的字母。因爲它是字母表的一部分，所以它是字體大小的一部分，因此是更大的尺寸。 Gentium沒有這些標記，所以'g'到'h'是字體大小，而在Metamorphous中，'g'到<任何那些字母都帶有標記'是字體大小而不是'h'。 – Rob

以相同的實際尺寸顯示不同的字體？

回答

相關問題