字体显示差异 safari 9.1.3

Question

所以我有两个代码元素的样式完全相同，在 safari 检查器中都有完全相同的计算样式：

-webkit-box-direction: normal;
color: rgb(213, 93, 33);
display: inline;
font-family: monospace, monospace;
font-size: 14px;
font-weight: normal;
height: auto;
line-height: 21px;
text-align: center;
white-space: pre;
width: auto;

上面的 css 是用于在两张图片中为单词“setf”着色的跨度。

唯一的区别是一个嵌套在一个section>aside>header>nav>pre>code中，另一个嵌套在同一个section然后main>section>pre>code:

以下是详细信息：

侧边栏

页脚

很明显，第二个中的字体粗细更大，但是我在任何地方都找不到随附的样式规则（我会提供更多的 css，但它是规范化器和一些东西的混乱组合）。有没有我应该寻找的没有出现在计算样式中的东西？

网站的工作参考在这里：example

左边有较薄的例子，页面底部有分页元素。任何帮助将不胜感激。

Answer 1

这在我看来可能是字体平滑问题。是否添加

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

修复它？

（注意：出于某种原因，我首先认为您看到了两种浏览器之间的差异。如果这有帮助，那就太好了，但现在我觉得不太可能）