文本超出段落宽度求助：Adobe Duffy Script字体排版异常

安全阿岳

2026-6-22

文本超出段落宽度问题解决方案（Duffy Script字体场景）

问题背景

从事Web开发20余年首次遇到：指定使用Duffy Script字体时，文本会超出所在段落的宽度边界，切换为sans serif字体后该异常消失。

可行解决方案

方案1：启用换行强制拆分

通过overflow-wrap: break-word让长文本或无法自然分割的内容强制换行，避免溢出容器：

p {
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
  overflow-wrap: break-word;
}

方案2：微调字符/单词间距

部分手写脚本字体的字形间距设计可能和浏览器排版逻辑冲突，微调间距可缓解溢出：

p {
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
  word-spacing: -0.4px; /* 可根据实际显示效果调整数值 */
  letter-spacing: -0.1px;
}

方案3：使用文本平衡换行（现代浏览器支持）

利用text-wrap: balance让文本更均匀地分布在容器内，减少单侧溢出情况：

p {
  font-family: "duffy-script", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
  text-wrap: balance;
}

方案4：优化字体加载逻辑

确保字体加载完成后再应用，避免无样式文本阶段的排版异常残留：

/* 字体未加载时使用备用字体 */
p {
  font-family: sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  background: rgba(255, 0, 0, 0.2);
}
/* Typekit字体加载完成后切换目标字体 */
.wf-active p {
  font-family: "duffy-script", sans-serif;
}