text-rendering属性可能导致iconfont图标字体显示不出来

问题

在做Ghost主题时想沿用默认主题的字体样式,但发现替代为阿里的图标文件后,qq图标显示不出来

解决办法

找到

text-rendering: geometricPrecision;

修改为

text-rendering: auto;

引申

Text-rendering 属性是一个非标准属性,主要用来告诉渲染引擎(rendering engine)渲染文字的时候如何来优化,浏览器根据这个属性来权衡速度、易读性、几何精度等方面。

暂时只有Gecko(Firefox)and WebKit(Safari 或 Chrome)支持这个属性。

Text-rendering属性有如下取值:

  • auto

    浏览器为速度、易读性、几何精度等自动优化来绘制文本
    在实践中,Gecko桌面浏览器(Firefox)如果字体大小为20 px或者更大,会使用optimizeLegibility;否则对于较小的文本使用optimizeSpeed

  • optimizeSpeed

    绘制文本时速度优先,会禁用字距调整和连字

  • optimizeLegibility

    绘制文本时易读性优先,会启用字距调整和连字

  • geometricPrecision

    绘制文本时几何精度优先,暂时和optimizeLegibility相同

参考:http://www.feeldesignstudio.com/2013/05/text-rendering/

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏