即使在使用 reset.css 之后，chrome 和 firefox 的字体字距也不同答案

【问题标题】：font kerning differs in chrome and firefox even after using the reset.css即使在使用 reset.css 之后，chrome 和 firefox 的字体字距也不同
【发布时间】：2013-09-05 17:52:49
【问题描述】：

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

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

如果您在 Firefox 中看到标题与右侧开始气球重叠

【问题讨论】：

你展示了一些差异的描述。乍一看，它们并不明显，是吗？
永远不要期望字体在不同的设备、系统和浏览器上/在不同的设备、系统和浏览器中呈现相同的效果。恕我直言，您的问题的最佳解决方案是您为标题指定特定宽度，以便文本无论如何都不能进入按钮下方，并在必要时换行。
呈现不同的不是您的字体（Noto Serif），而是浏览器的默认字体。大多数计算机没有 Noto Serif，也没有 @font-face 可以使它成为可下载字体（网络字体）。
非常感谢.. 虽然我使用了条件 css

标签： html css google-chrome firefox

【解决方案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 作为可下载字体，要么在 @987654325 之前或代替 @987654325 之前放置一些广泛可用的字体，如 Times New Roman @ 在列表中。

【讨论】：

【解决方案2】：

浏览器对字体大小的解释往往不同。我个人倾向于将正文字体大小设置为 62.4%，通过这样做，您可以使用 ems 为单个元素设置字体大小，例如，1.4em = 14px、1.8em = 18px 等。这可能适用于你。

说了这么多......差异真的很小......真的值得所有的麻烦吗？生活中还有更重要的事情:)

【讨论】：