粗体自定义字体不适用于Chrome 90，只显示常规字体的重量

Question

我使用的是自定义字体"Tangerine"，但它在Chrome上无法正确显示，即使在Firefox上也能正常工作。标题应该像Firefox中那样粗体显示，但在Chrome中，它只是显示常规的字体重量。我只需要大胆版的橘子。

版本：

• Windows 10上的Chrome(90.0.4430.72(
• Linux上的Chromium(90.0.4430.72(

CSS:

@font-face { 
font-family: 'Tangerine';
src:url('tangerine/TangerineBold.woff2') format('woff2'),
url('tangerine/TangerineBold.woff') format('woff'),
url('tangerine/TangerineBold.ttf') format('truetype');
}
h1 {font-family:'Tangerine', sans-serif}

我尝试了什么：

我在@font-face中使用了font-weight:700和font-style:normal，但没有帮助。我还试图删除woff2和woff，以检查它是否只使用truetype格式。

然后我使用了常规字体，检查是否有差异，但Chrome只是显示常规字体。(它怎么知道Regular的外观呢？(之后，Firefox也只显示了常规字体。所以它只适用于Firefox，如果我只提供粗体的话。

@font-face { 
font-family: 'Tangerine';
src:url('tangerine/TangerineReg.woff2') format('woff2'),
url('tangerine/TangerineReg.woff') format('woff'),
url('tangerine/TangerineReg.ttf') format('truetype');
font-style: normal;
font-weight: 400;
}
@font-face { 
font-family: 'Tangerine';
src:url('tangerine/TangerineBold.woff2') format('woff2'),
url('tangerine/TangerineBold.woff') format('woff'),
url('tangerine/TangerineBold.ttf') format('truetype');
font-style: normal;
font-weight: 700;
}
h1 {font-family:'Tangerine', sans-serif}

请帮帮我，我不知道这些字体是怎么回事。如果不加粗，字体就无法阅读。谢谢！：(

Answer 1

解决方案是只提供Regular Font Weight。现在，不同的浏览器自己制作粗体字体。

@font-face { 
font-family: 'Tangerine';
src:url('tangerine/TangerineRegular.woff2') format('woff2'),
url('tangerine/TangerineRegular.woff') format('woff'),
url('tangerine/TangerineRegular.ttf') format('truetype');
}

另一个解决方案是提供两种字体，而不提供字体权重属性。如果我同时使用这两种字体，谷歌浏览器仍然使用他自己生成的粗体字体。

这只是因为后面的字体规则会覆盖第一个字体。(就像CSS中规则具有完全相同的特定性时一样(

@font-face { 
font-family: 'Tangerine';
src:url('tangerine/TangerineBold.woff2') format('woff2'),
url('tangerine/TangerineBold.woff') format('woff'),
url('tangerine/TangerineBold.ttf') format('truetype');
}
@font-face { 
font-family: 'Tangerine';
src:url('tangerine/TangerineRegular.woff2') format('woff2'),
url('tangerine/TangerineRegular.woff') format('woff'),
url('tangerine/TangerineRegular.ttf') format('truetype');
}

当我尝试首先使用Regular和Bold两种浏览器时，它只适用于Firefox，而不适用于chrome。

@font-face { 
font-family: 'Tangerine';
src:url('tangerine/TangerineRegular.woff2') format('woff2'),
url('tangerine/TangerineRegular.woff') format('woff'),
url('tangerine/TangerineRegular.ttf') format('truetype');
}
@font-face { 
font-family: 'Tangerine';
src:url('tangerine/TangerineBold.woff2') format('woff2'),
url('tangerine/TangerineBold.woff') format('woff'),
url('tangerine/TangerineBold.ttf') format('truetype');
}

当我像我的问题中那样对两种字体都使用字体权重时，Google Chrome和Firefox都失败了。当仅将font-weight: 700用于粗体字体时也会发生这种情况。当我只对正则表达式使用font-weight: 400时，它对两种浏览器都有效，但它只能像情况2所示那样工作。

->谷歌Chrome需要普通字体来生成自己的粗体字体，而粗体版本的字体(tangerine/TangerineBold.woff2(不知何故已损坏，无法使用。。。在Firefox中，生成的粗体字体比真正的粗体字体小一点。

如果一些用户将来也有同样的问题，我很乐意提供帮助。：(