手機和桌面之間的CSS行高屬性差異

我在創建我的網站http://geekket.co/的文本徽標時遇到了這種奇怪的情況。手機和桌面之間的CSS行高屬性差異

在桌面瀏覽器（Firefox 51，Chrome 56，IE 11.576，Edge 38）中，徽標完美工作，它看起來象點完美，正如我們的設計文檔指定的那樣。

但是在移動設備中，行高屬性似乎工作不正確。 Opera很好，但Firefox和Chrome不能按預期工作。

手機截圖imgur專輯，因爲我還沒有足夠的聲譽：http://imgur.com/a/Ij3cF

這是專門爲標誌的特定部分的CSS代碼：

#LogoGeek { 
    display: inline-block; 
    background-color: rgb(90, 186, 71); 
    font-family: "ForcedSquare"; 
    font-size: 90px; 
    line-height: .72; 
    height: .74em; 
    padding: 0 .05em 0 .12em; 
    vertical-align: middle; 
}

「ForcedSquare」是Web字體，我們添加到該網站。

我在移動Chrome瀏覽器中使用了Remote Dev Tools功能，發現如果將line-height更改爲.87，它可以按預期工作，但是，我覺得這是一個可笑的修復方法。

據我所看，這似乎是某種問題與特定的字體。但是爲什麼沒有與桌面和/或Opera Mobile的所有不同瀏覽器打交道，我不得不想。

有沒有更好的方法來調整它，或使其在所有瀏覽器中正常工作？謝謝大家！

來源

2017-02-26 Tamh

我知道這種情況的兩種解決方案。首先，您可以使用填充而不是行高。其次，你只使用一種字體格式。您必須使用TTF，OTF，WOFF等所有格式。你可以在w3school頁面閱讀更多內容。 Link for W3schools.com

來源

2017-02-26 17:55:28

感謝您的洞察。我嘗試過使用所有的字體文件格式，但它也不起作用，實時頁面現在使用CSS文件中的所有格式。此外，嘗試刪除行高，它完全混淆了一致性，因爲它使上邊框更大。另外，我正在使用填充來保持背景的一致性。 – Tamh

@tamh如果你使用SVG代替Font，會發生什麼？ –

手機和桌面之間的CSS行高屬性差異

回答

相關問題