浏览器字体呈现不一致

当我打开Safari时，我正在做一个项目，这个项目需要我针对我的个人网站在不同的浏览器中调出开发人员工具，并注意到我页面的标题呈现出了多么大的不同。与其他浏览器相比，Safari非常大胆。

我查看了样式表，发现我对标题应用了最小样式，并回想起除了定义字体系列和字体大小之外，只让浏览器处理标题样式的决定。所以重量上的差异是由浏览器造成的。

默认情况下，H1标记是粗体的，但是Safari似乎应用了额外的粗体。

Jason Pamental建议使用字体合成：无；但在Safari或Firefox中没有任何效果(目前其他浏览器不支持)。

我开始分析DevTools中的用户代理样式表和Computed Styles选项卡之间的差异。

在Computed选项卡中，Edge、Chrome和Firefox都显示了字体粗细：粗体计算为700的字体粗细，而Safari的计算字体粗细没有数值，只是计算为粗体。但这仍然解释不了太多问题。

事实上，颇具讽刺意味的是，Safari没有在我可以在DevTools中看到的样式表中的任何位置定义字体粗细：700，但是它为字体Poppins呈现了700字体粗细的H1。

所以现在我更加困惑了，看着我必须定义我使用的字体和字体粗细的那行代码。

我不知道为什么，但是我不得不在Edge中从字符串中删除"；600&34；。我这样做了，突然看到Edge中的标题重新呈现在#34；400"；处。

我在这个字符串的末尾加上，700：Poppins：400,600。我的头标重新渲染，现在与Safari匹配。我去掉，700，它会以600字体粗细重新呈现。我再次删除600，它会以400字宽重新渲染。

Edge、Chrome和Firefox的计算字体粗细都是700，如果特定的字体粗细没有在Google字体代码行中定义，浏览器就会抓取定义的下一个最高的数字字体粗细，并将该粗体粗细呈现为粗体粗细。如果您从Google字体代码中删除所有字体粗细，您将得到字体的最细版本。

那么，当我在Safari中测试它时会发生什么呢？什么事也没有。如果我从字体链接中删除所有字体粗细，那都无关紧要。Safari的标题仍然是粗体的。但是后来我注意到一些有趣的事情，在从字体代码中删除了400,600之后……我网站上的导航栏在Safari中也没有改变。

因此，为了确认我确实看到了我看到的内容，我在我的实时网站上更改了文件，并删除了400,600个文件，因此我所拥有的全部内容如下：

而萨法里丝毫没有改变。我仍然有我的导航链接的CSS，声明它们为font-weight：600，Safari仍然在努力，尽管我没有在字体代码中定义它。

这几乎让人感觉是一个沉重的问题。这个问题几乎类似于跨平台和跨浏览器一致地呈现HTML表单(但是稍微简单一点)。跨平台问题是一个较难解决的问题，因为您无法控制操作系统如何处理字体呈现。

如果你不想让浏览器决定如何加粗字体，那么我建议用数值500、600等来明确定义字体粗细，以避免Firefox、Edge和Chrome退回到定义的最高字体粗细。

还有一点免责声明：我在本文中只看了H1的渲染。我怀疑还有许多其他领域可以用来比较其他标题和段落呈现。

多个浏览器具有相同的ISN行为并不一定表示正确的实现，因此我怀疑我将在以后尝试深入研究浏览器行为以找出正确的实现。