html - 即使在使用 reset.css 之后，字体字距在 chrome 和 firefox 中也有所不同

Question

这对我来说是新鲜事。即使在使用 reset.css 之后，我的 html 字体在 chrome 和 firefox 中呈现不同。这是我的网址

http://spheretekk.com/form1/fct14-grpap-marseille-Paris.html

如果您在 firefox 中看到标题被右侧的开始气球覆盖

Answer 1

这不是字距调整，而是 font-variant: small-caps 的不同实现。

浏览器使用的常见默认字体(或与此相关的 Noto Serif 字体)不包含真正的小型大写字母，即由排版师设计的小型大写字形。即使他们这样做了，当前的浏览器也无法使用它们来实现 CSS 设置。相反，他们通过用缩小尺寸的相应大写字母替换小写字母来生成假的小型大写字母。这在排版上都是错误的——笔划宽度变得太小，因此大写字母在风格上与假的小型大写字母不同(看起来比它们更粗)。

显然，浏览器在减小大小方面略有不同。

您可以通过删除 small-caps 并自行减少字体来解决这个问题，例如写作

C<small>ULINARY</small> F<small>RENCH</small> W<small>ATERWAYS</small>

和设置例如

small { font-size: 70% }

在 CSS 中(根据您的喜好调整百分比)。它在排版上仍然很糟糕，但至少在浏览器之间尽可能相似——前提是你要么使用 Noto Serif 作为可下载字体，要么将一些广泛使用的字体(如 Times New Roman)放在前面或代替 serif列表。