某些字體真棒圖標未在Safari中呈現

Question

我正在使用Font Awesome圖標。 所有圖標均在Chrome中完美呈現。

但是在Safari中，“某些圖標”並未呈現。 當我說它沒有渲染時，它不是通常的方框。 其更像是圖標隱藏的css可見性。

當我在開發人員工具中更改圖標的任何屬性時，該圖標就會顯示出來。 這是台式機中的行為。

在Ipad中，當我更改屬性時，它也會顯示出來。 此外，在橫向模式下，所有圖標都可以完美呈現。 但是在縱向模式下，某些圖標不會顯示。 我必須將方向更改為橫向，然后再返回至縱向以渲染圖標。

不確定如何解決？

Answer 1

我的目標是Font Awesome 4.2.0，它在IIS Web服務器上本地托管。

奇怪的是，我發現，使用緩存破壞符為Font Awesome CSS庫添加后綴可以解決此問題。 例如

font-awesome.min.css?v=1234

Answer 2

您可以為圖標字體添加“文本呈現” CSS屬性。

text-rendering: optimizeLegibility;

瀏覽器強調渲染速度和幾何精度方面的可讀性。 這樣就可以使用某些字體在字體文件中可能包含的特殊字距調整和可選連字信息。

Answer 3

當我遇到相同的問題時，我發現如果您安裝了adblocker插件，則可能會在safari中發生，因為字體超贊的文檔清楚地表明該插件可能會阻止某些字體超贊的圖標。

您可以檢查一下，但是對我來說，這個插件沒有安裝，所以我找到了第二個解決方案，它對我有用。

嘗試在CSS中使用它

text-rendering: optimizeLegibility;