特定网页的 Firefox 字体呈现方式不同答案

【问题标题】：Fonts render differently on Firefox for a particular webpage特定网页的 Firefox 字体呈现方式不同
【发布时间】：2018-11-20 14:41:25
【问题描述】：

我正在为一个网站开发登陆页面：

https://emotional-wellbeing.com/

该页面在 Chrome 中呈现良好，但在 Firefox 中，Open Sans Condensed 字体根本不显示。我已经尝试了这个论坛的一些更改，但没有任何帮助。

谷歌字体包括：

<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Open+Sans+Condensed:700" as="style" onload="this.rel='stylesheet'"/>

页面是Open Sans字体，除了：

<div class="sectionmainheadline"><h1 style="font-family: 'Open Sans Condensed', sans-serif; font-weight:700; font-stretch: condensed;">"Discover How You Can <span style='color: #3a9921;'>Melt Away</span> Away Your Stress & <span style='color: #3a9921;'>Overcome </span>Your Anxiety,<br/><span class='underline'>In As Little As 5 Minutes From Now</span>"</h1></div>

我正在使用 Bootstrap 4。

您可以在此处查看它在 Chrome 上的外观：

但在 Firefox 上，红色圆圈区域看起来不像 Open Sans Italic，蓝色圆圈区域是天知道是什么字体！：

我怎样才能让这些带圆圈的区域看起来像 Chrome 版本？我没有想法。

【问题讨论】：

看起来 <link rel="preload" […] as="style" onload="this.rel='stylesheet'"/> 在 FF 中无法正常工作。一旦我在检查器中手动将rel 更改为stylesheet，所提到的部分就会以所需的字体正常显示。
干杯 - 是的，这就是问题所在。感谢您解决它:)
@Sylv99：当系统允许时，您可以点击下方答案旁边的勾号图标，将问题标记为已解决。这不是强制性的，但我们鼓励这样做。
注意：您的所有链接在本站底部都已损坏。

标签： html css google-chrome firefox google-fonts

【解决方案1】：

看起来像这样

 <link rel="preload" […] as="style" onload="this.rel='stylesheet'"/>

在 FF 中一开始就无法正常工作。一旦我在检查器中手动将rel 更改为stylesheet，所提到的部分就会以所需的字体正常显示。

因为在此之前我什至没有看到对样式表 URL 的请求，所以我认为这里出错的不是 onload 部分，而是 FF 通常不希望以这种方式预加载样式表(?)。

【讨论】：