使用Nuxt时如何解决Safari浏览器Do Hyeon字体渲染异常问题

问题成因 #

这是Safari浏览器渲染Do Hyeon这类开源韩文无衬线字体的已知Bug：初始渲染短文本、非全大写文本时，Safari会错误将空格字符的宽度计算为0，只有触发元素重绘（比如悬停、选中文本、页面缩放）时，才会重新计算字符宽度正常显示空格。你之前添加的text-rendering: optimizeLegibility和-webkit-font-feature-settings: 'kern' 1会强制Safari启用字距优化，反而可能加重该解析错误。

可用解决方案 #

• 方案一（最常用，无侵入）：给使用Do Hyeon字体的元素添加以下CSS属性，避开字距解析Bug同时强制初始渲染走GPU计算

.target-element {
  font-kerning: none;
  -webkit-text-size-adjust: 100%;
  transform: translateZ(0);
}

• 方案二（兼容极端场景）：手动给文本内的空格添加占位标签，强制保留空格宽度
  CSS代码：

.space-placeholder {
  display: inline-block;
  width: 0.25em;
}

文本使用示例：欢迎<span class="space-placeholder"></span>使用

• 方案三（备选）：给Safari单独指定兜底字体，规避该字体的渲染问题

/* 仅Safari生效的规则 */
@supports (-webkit-touch-callout: none) {
  .target-element {
    font-family: system-ui, sans-serif, "Do Hyeon";
  }
}

问题现象参考：


（第二张图为选中文本时的正常渲染效果）

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