在所有文本上使用CSS規則“text-rendering：optimizelegibility;”是否安全？

Question

我注意到這個woo主題例如它設置在HTML標簽上，因此整個網站的文本都設置了它。 我讀到它可能會導致性能問題，但那是一段時間以前。 有些人建議只將它添加到標題和大文本中。

規則現在改變了嗎？ 瀏覽器是否表現良好？

Answer 1

否：多年來在各種平台上出現了許多錯誤，導致文本無法正確顯示或顯示（見下文）。 如果您的目標是啟用連字，那么實際上在CSS Fonts Level 3中定義了標准屬性font-variant-ligatures ，它提供了完全控制：

font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

有關可以啟用的其他印刷功能，請參閱font-variant ，例如小型大寫字母，備用字母形式等。

歷史

在添加font-variant-ligatures和相關屬性之前，較舊的font-feature-settings屬性允許啟用相同的功能。 這是一個較低級別的界面，除了啟用沒有更高級別界面的OpenType功能外，不再推薦使用它。

http://blog.fontdeck.com/post/15777165734/opentype-1有一個簡單的例子：

h1 {
    -webkit-font-feature-settings: "liga", "dlig";
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}

http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/也有更多的討論。

Bug Gallery

由於各種渲染問題，流行的HTML5 Boilerplate項目在兩年前刪除了它：

https://github.com/h5bp/html5-boilerplate/issues/78

我今天早上剛剛解決的兩個Chromium錯誤導致Windows XP上的Chrome 21無法完全執行字體替換，顯示丟失的字符符號而不是使用其他字體，並顯示錯誤地重疊其他元素的文本：

http://code.google.com/p/chromium/issues/detail?id=114719

http://code.google.com/p/chromium/issues/detail?id=149548

有關其他一些問題，請參見http://aestheticallyloyal.com/public/optimize-legibility/ 。

http://bocoup.com/weblog/text-rendering/強調了Android上的兼容性問題和一般性能問題

Answer 2

來自MDN 文本呈現頁面，最后更新於2012年4月29日18:27，內容如下：

文本呈現CSS屬性向呈現引擎提供有關在呈現文本時要優化的內容的信息。 瀏覽器在速度，易讀性和幾何精度之間進行權衡。 文本呈現屬性是SVG屬性，未在任何CSS標准中定義。 但是，Gecko和WebKit瀏覽器允許您將此屬性應用於Windows，Mac OS X和Linux上的HTML和XML內容。

它告訴我們它沒有在任何CSS標准中定義，從而導致跨瀏覽器問題，如瀏覽器兼容性表所示。

默認

瀏覽器在繪制文本時做出有關何時優化速度，易讀性和幾何精度的有根據的猜測。

因此，可以安全地假設最好的選擇是讓瀏覽器處理這樣的細節，因為此功能不是標准（ 尚未 ），並且大多數瀏覽器不支持它。

Answer 3

text-rendering: optimizeLegibility; 用於我們的一個網絡應用程序。 它在所有瀏覽器中正確呈現，除了一個 - 在Windows 7上的chrome（64）。

由於我們的大多數最終用戶來自該類別，因此必須刪除該屬性。

Answer 4

我剛剛修正了Chrome拒絕呈現網絡字體的錯誤（它總是回歸到非網絡字體，我們無法辨別）。 最后 - 在經過大量的頭痛之后 - 通過將來自optimizeLegibility （由Twitter Bootstrap設置，為了它的價值）的文本呈現設置為auto 。

所以我現在想說答案可能是“不”。 這並不是說不要使用它，但不要將它應用於一切。 在需要的地方使用它並仔細測試它是否存在奇怪或意外的影響（特別是在Chrome中！）。

Answer 5

使用“text-rendering：optimizelegibility”也會導致Android本機瀏覽器中的渲染錯誤（4.2和4.3）。 如果將此屬性與通過@ font-face加載新字體結合使用，則字體將根本不顯示（僅后退）。 沒有“text-rendering：optimizelegibility”和@ font-face字體加載並按預期顯示。

Answer 6

CSS文本渲染看起來很不穩定。 不要用不好的CSS屬性來磨削時間，這可能是值得的...

如果Javascript是你的選擇，Kerning.js看起來很有前途，一種javascript方法，用於在Github上托管的字距調整和字距調整對。

http://kerningjs.com

另外值得注意的是，如果你對排版很認真，可以使用Font Squirrel免費使用網頁字體。

http://www.fontsquirrel.com