iOS Safari中字体显示异常矢量线条的解决方法咨询

以下是针对该特定环境异常的可行修复方案：

1. 调整字体栈优先级，优先使用苹果原生字体 #

当前字体栈中苹果原生字体位置靠后，Safari可能优先加载了第三方字体导致渲染异常。调整顺序让系统优化过的字体优先：

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Lucida Grande', 'Liberation Sans', sans-serif;

苹果原生字体在iOS Safari上的渲染兼容性最佳，能规避第三方字体的渲染bug。

2. 调整文本渲染属性 #

iOS Safari的渲染引擎在放大场景下可能触发异常矢量计算，尝试添加以下CSS强制优化渲染：

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;

若上述效果不佳，可尝试添加以下属性强制Safari重新计算文本路径：

-webkit-text-stroke: 0.01px transparent;

3. 检查文本容器的干扰属性 #

如果文本所在容器存在transform、filter或clip-path等属性，可能干扰Safari的文本渲染逻辑：

• 移除不必要的硬件加速属性（如transform: translateZ(0)）
• 避免对文本容器使用filter: blur()类视觉滤镜

4. 临时简化字体栈 #

若以上方法无效，可暂时移除第三方字体，仅保留苹果原生字体和通用无衬线字体：

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

该问题大概率是iOS 16.6.1 Safari的版本特定bug，待后续系统更新后可恢复完整字体栈。

内容的提问来源于stack exchange，提问作者user3163495