使用CSS中的@font-face功能导入字体，但没有像创建者宣传的那样显示

Question

上图是导入的字体应如何显示（编辑：第一种字体样式），正如创建者所说的那样。

然而，上图就是我看到的样子。

下面是我的CSS。我只添加了文本阴影作为测试。当我删除文本阴影时，它仍然无法正常工作。有人知道我做错了什么吗？

#hero {
    display: flex;
    flex-direction: column;
    border: 3px solid black;
    border-radius: 10px;
    width: 500px;
    margin: auto;
    text-align: center;
    font-size: 50px;
    font-family: reglisse;
    text-shadow: 1px 1px 1px black;
}
@font-face {
    src: url("Reglisse-0WOD9.otf");
    font-family: reglisse;
}
#jdogs{
    color: #ff0054;
    margin: 5px;
}
#corn {
    color: #ffbd00;
    margin: 5px;
}
#dogs {
    color: #ff0054;
    margin: 5px;
}

我尝试使用@font-face 功能，就像我对导入文本所做的那样。上面的图片展示了我的预期和实际结果。我没有通过谷歌找到答案。以下是创建者页面的链接：https://www.fontspace.com/reglisse-font-f43313。

另外，我意识到它在创建者页面上是黑白的，但我需要使用我的代码中的颜色。

Answer 1

您需要在

@font-face

规则和样式规则中指定字体粗细。
否则，您的文本会被人为加粗。 这种 “仿粗体” 样式的工作方式与笔划非常相似 - 字形的透明区域将由该笔划填充。

@font-face {
    font-family: 'Reglisse';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body{
  font-family:Reglisse;
  font-size:5em;
  font-synthesis: none;
}


.jdogs{
    color: #ff0054;
    margin: 5px;
}

<h1>DOGS</h1>
<p class="jdogs">JDOGS</p>
<p class="jdogs"><strong>JDOGS</strong></p>
<p class="jdogs"><em><strong>JDOGS</strong></em></p>

将“Reglisse”定义为 font-weight:bold/700 可能更容易，以防止这种假粗体渲染。

您还可以通过以下方式防止这种人造样式

font-synthesis

像这样的属性

body{
  font-family:Reglisse;
  font-size:5em;
  font-synthesis: none;
}

这也可以防止假雅体字 - 倾斜字形

@font-face {
    font-family: 'Reglisse';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


body{
  font-family:Reglisse;
  font-size:5em;
}


.jdogs{
    color: #ff0054;
    margin: 5px;
}

<h1>DOGS</h1>
<p class="jdogs">JDOGS</p>
<p class="jdogs"><strong>JDOGS</strong></p>