工作中遇到了这么个问题:
移动端:ionic内部默认设置text-rendering为optimizeLegibility,导致了在单行溢出显示省略号时,在安卓设备中省略号显示鬼畜的问题(有时显示2个点,有时显示三个点,有时直接不显示点);
基于上面的问题查找了网上资料得知,text-rendering的值为如下:
auto
浏览器依照某些根据去推测在绘制文本时,何时该优化速度,易读性或者几何精度。对于该值在不同浏览器中解释的差异,请看兼容性表。
optimizeSpeed
浏览器在绘制文本时将着重考虑渲染速度,而不是易读性和几何精度. 它会使字间距和连字无效。
optimizeLegibility
浏览器在绘制文本时将着重考虑易读性,而不是渲染速度和几何精度.它会使字间距和连字有效。该属性值在移动设备上会造成比较明显的性能问题。
geometricPrecision
浏览器在绘制文本时将着重考虑几何精度, 而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放,所以该值可以使使用某些字体的文本看起来不错。
对于 SVG,当文本缩放时,浏览器会计算文本最终大小(取决于特定的字体大小和相应的缩放比例)并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小,比如 9 并且 140% 的缩放,这个最终的字体大小为 12.6,字体系统中明显不存在,所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。
但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放,你可能看到并不太漂亮的文本渲染,但这个字体大小是你期望的,而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。
通过对以上属性值的了解将ionic内部设置默认的text-rendering:optimizeLegibility,改为了auto属性值;问题得以解决。
以上属性的见解参考于MDN web docs