即使在使用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）列表中的1}}。

Answer 2

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

说完这一切......这种差异真的很小......真的值得所有麻烦吗？生活中有更重要的事情：）