字體：糟糕的垂直度量會導致跨瀏覽器的行高不一致。解？

經過幾個小時的調試和周圍的研究，我發現不可能在不同的瀏覽器上一致地縱向排列一個字體和差的垂直指標。如果一個字體的垂直指標差它可能會呈現太高或太低，看起來很可怕，尤其是在按鈕內部。沒有辦法用css來解決這個問題。字體：糟糕的垂直度量會導致跨瀏覽器的行高不一致。解？

您可以檢查一個字體的垂直度量與本網站上的測試：http://levien.com/webfonts/vmtx/（只要下載一個測試，更換字體）

這是結果我得到。上一個具有以下差度量一個擁有他們的權利：（都有一個固定的line-height）

Fontsquirrel提供了一個固定在其在專家模式發生器差垂直度量。不幸的是，我必須使用的字體屬於微軟（SegoePrint），並且被列入發電機的Fontsquirrel列入黑名單。

更新：

爲了使問題更清楚..這是我面對現在的情況：我想垂直

對齊按鈕的文字中間（見下圖）。在左邊你會看到它是如何在Android上的Chrome中顯示的，在右邊你會看到它是如何在Windows上的Chrome中呈現的。 Arial和最常見的字體是很好的中心，瀨越打印不..

我嘗試了對齊在CSS不同的方法，沒有一貫致力於..我也有同樣的結果試了一下里面搗鼓，因爲字體不是免費的，所以我無法顯示。這是一個字體特定的問題，唯一的解決方案似乎是修復字體本身。

這是該按鈕的CSS（值是虛構的）：

div.parent { 
    height:40px 
} 
h3 { 
    line-height: 40px; 
    font-size: 14px 
}

來源

2015-11-10 Rotareti

您使用你可以解釋一下你的意思（因爲vmtx除了支持'vert'或'vrt2'功能的字體，你的文本顯然沒有被使用的情況下不會使用）？它看起來像是在談論基線到基線的距離，在CSS中稱爲「line-height」，並且您可以明確指定自己的值來覆蓋任何字體正在做的事情。看起來你只是想讓文本選擇亮點很好地排隊，這通常不值得嘗試完美。相反，讓文本看起來更爲重要。 –

在澄清字體本身導致問題並瀏覽網頁之後，我得出結論，字體的垂直度量很差。但因爲我不是字體專家，所以它可能與其他字體相關。我不確定。我更新了問題，可能有助於確定原因。 – Rotareti

您定位的是哪個版本的Android？因爲這是一個經典的[XY問題]（http://meta.stackexchange.com/a/66378），您實際上只想知道如何垂直對齊HTML容器中的文本（實際上StackOverflow中有很多答案，但要點是，如果你的目標是Android 4.2或更高版本，答案是[「使用flexbox」]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）） –

我花了一段時間，但我剛剛發現我的字體經銷商讓我下載之前配置的字體。我能夠在字體中添加「線條高度調整」。這些是可用的選項：

行高度調整

最好的（用最好的方法來標準化此字體線高度）

120％（重新定義行的高度點的大小的120％）

自動（分配OS/2。跨伸部，下伸和線間隙）錯字值

邊框（匹配字形的邊界框，線間隙將始終爲0）

天然（如在字體定義使用線高度，結果可能有所不同瀏覽器）

「邊界框」選項的伎倆。現在「Segoe Print」很好地調整。

每當我再次面對這個問題，我要麼免費使用的字體的fontsquirrel發電機或從分銷商，提供了一個選項來調整行高度開箱的購買字體...

來源

2015-11-12 18:28:02 Rotareti

字體：糟糕的垂直度量會導致跨瀏覽器的行高不一致。解？

回答

相關問題