HTML 斜体和非斜体文本被渲染得太近答案

【问题标题】：HTML italics and non-italics text is rendered too close to each otherHTML 斜体和非斜体文本被渲染得太近
【发布时间】：2021-04-26 11:14:04
【问题描述】：

当斜体文本之后和下一个文本跨度（非斜体）之前没有添加额外空格时，标记为斜体的文本存在渲染问题：

Eureka!

<span style="font-style: italic">Eureka</span>!

这使得 感叹号 被渲染得太接近最后一个斜体字符 a。

引擎：Google Chrome 版本 90.0.4430.85（官方版本）（64 位）

另一方面，MS Word 插入了一些额外的空间，混合文本看起来不错：

对

有没有办法解决这个问题？

【问题讨论】：

为什么不在斜体中加入标点符号？
你用的是什么字体？还要注意 i 标签实际上是为了强调而不一定是斜体。如果字体有斜体，字体样式的斜体会更肯定会得到正确的斜体（只是一个评论，并不是说这解决了你的感叹号问题）
@mplungjan 后面的空格比较短，差别不大。寻找一个通用的解释/解决方案。
@AHaworth 我使用的是 Open Sans，但它不依赖于特定的字体，我已经检查过了。 i 也只是为了简单起见。实际的标记是基于 CSS 的。
感谢您的澄清。请注意，使用标签 i 与使用 CSS 字体样式不同。

标签： html css fonts rendering

【解决方案1】：

您可以在 CSS 中使用 letter-spacing。这可以提示您如何设置文档样式：

body {
  font-size: 24px;
  font-family: Arial, sans-serif;
}
.tag {
  font-style: italic;
  letter-spacing: 2px;
}

&lt;span class="tag"&gt;Eureka&lt;/span&gt;!

【讨论】：

嗯...字母间距只会改变字母之间的距离，不是吗？不确定它是否解决了所述问题。
是的，它确实为字符添加了间距。但是，比较浏览器和 Word 显示文本的方式有点不公平，因为它们生成文本的方式不同并且可能取决于设置 - 例如，我刚刚在我的 Word 副本中尝试了您的示例（看起来您使用的是 Times New Roman 字体那里），对我来说，感叹号也非常接近文字，比你的截图更接近。因此，对于 CSS，您的最佳选择是 letter-spacing 或 margin 设置为 1 或 2 px：jsfiddle.net/avzL5of7/1
@lgal 够公平的！在这种情况下，MS Word 渲染结果仅用作“看起来正确”的视觉参考。实际上，印刷版与 Word 所做的以及电子版中的预期非常相似。

【解决方案2】：

我似乎无法重现您使用 Open Sans 的问题。但似乎您使用的是紧缩严重的版本。至少，我认为是字距决定了特定字形之间的空间，但我不确定这是否适用于不同的字体样式，即使在同一个系列中也是如此。但也许 Chrome 决定不紧缩。在这种情况下，您可以使用font-kerning 要求它正常紧缩。

我认为字母间距不能解决您的问题，因为这是关于所有字形之间的间距。

body {
  font-size: 24px;
  font-family: Open Sans, sans-serif;
}
.problem {
  font-style: italic;
}
.hack {
  margin-right: 0.1ex;
}
.kern {
  font-kerning: normal;
}

<span class="problem">Eureka</span>!<br>
<span class="problem hack">Eureka</span>!<br>
<span class="problem kern">Eureka</span>!<br>

【讨论】：

解决方案的关键词是“重现”。发现问题是字体加载不正确。您可以看到我的屏幕截图中的两个“a”是相似的，而斜体和非斜体时它们应该完全不同。赏金归你。感谢您提供解决方案提示！