如何防止不同的瀏覽器呈現不同的字體？

我試圖在所有瀏覽器中保持不變的字體樣式。如下所示，safari的字體渲染系統使得字體重量小於chrome的字體重量。如何防止不同的瀏覽器呈現不同的字體？

Safari瀏覽器： Safari

鉻： Chrome

我已經使用上的其他問題找到了解決方案，但他們還沒有解決這個問題嘗試。我如何在所有主流瀏覽器中保持不變的字體風格？那就是Chrome，Safari，Opera，Firefox和Internet Explorer。

這是我試過的。

-webkit-font-smoothing: antialiased;
font-weight: 800;
text-rendering: optimizeLegibility;

2015-06-16 Pav Sidhu

我也很好奇。像「webkit-font-smoothing」這樣的東西是否給它更多的定義外觀？我知道它與不同瀏覽器和操作系統的字體渲染引擎不同（如果我正確記得，Chrome不使用默認設置）。我不認爲有可能使這一點一致（除了使用諸如'cufon'之類的東西），但我很有興趣知道。 – somethinghere

字體渲染真的很奇怪，我發現前綴將幫助一噸，以及更大的字體家族的倒退。編輯細字體我發現使用'-webkit-font-smoothing：antialiased;' –

請同時顯示一些代碼：這是一個自定義Web字體，你用什麼CSS來強制使用相同樣式你可以，等等？ –

瀏覽器，總的來說，具有不同的字體呈現引擎/方法。有關更多詳細信息，我建議您閱讀this,this和/或this。

老實說，對於普通用戶來說，這種差異並不是那麼明顯，而且絕大多數情況下，像素完美的跨瀏覽器顯示任何東西都被長期拋棄爲打印世界的後遺症。

如果出於某種自虐的原因，像素完美性比理智性和可維護性代碼更重要，您可以嘗試舊的standy-bys（文本圖像，圖像/文本替換）或關閉通過CSS的子像素渲染儘管並非所有的瀏覽器都支持它，並且文本的可讀性會降低）。

希望有所幫助。

來源

2015-06-16 21:24:13 htmlmonkey

很多差異與瀏覽器添加或忽略字體的不同默認權重/樣式有關。要停止這種情況發生，請確保在您的CSS代碼塊中有font-weight: normal和font-style: normal您的@fontface代碼塊。

然後您需要將必要的樣式應用於HTML元素。

所以，如果我有一個名爲geo-light字體，我會做：

@font-face {font-family: 'geo-light'; 
    src: url('fonts/geo-extralight.woff2') format('woff2'), url('fonts/geo-extralight.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
}

然後添加特定的樣式使用該字體的每個元素。

/*SET STYLES ON ELEMENTS*/ 
h1, h2, h3, h3 > a, p, li { 
    font-family: 'geo-light', sans-serif; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: none; 
}

我幾乎從未在網站上看到過這種情況，並且這是您的圖像中發生的情況。這些差異不是由反鋸齒問題引起的。

原始答案中的第1篇和第3篇文章涉及完全不同的問題，而正在鏈接的中間文章將意味着圖像示例中會出現相反的效果。

來源

2018-01-21 01:56:56

如何防止不同的瀏覽器呈現不同的字體？

回答

相關問題