如何导入字体粗细为 500 的字体

Question

我正在使用一些 adobe 字体的网站工作，但我无法将字体粗细设置为 500。

我有像这样导入的 adobe 字体：

        <link rel="stylesheet" href="https://use.typekit.net/<some-random-code>.css">

href 指向一个如下所示的 css 文件：

...

@font-face {
  font-family:"itc-avant-garde-gothic-pro";
  src:url("<some-url>") format("woff2"),url("<some-url>") format("woff"),url("<some-url>") 
  format("opentype");
  font-display:auto;
  font-style:normal;
  font-weight:700;
}

@font-face {
  font-family:"itc-avant-garde-gothic-pro";
  src:url("<some-url>") format("woff2"),url("<some-url>") format("woff"),url("<some-url>");
  font-display:auto;
  font-style:normal;
  font-weight:300;
}


.tk-itc-avant-garde-gothic-pro { font-family: "itc-avant-garde-gothic-pro",sans-serif; }

它显示字体粗细 300 和 700，但不显示 500。

我的理解是，浏览器不会知道如何执行指定 div 具有 font-weight: 500 的 CSS 代码。

事实上，当我查看带有 font-weight: 500 的选择器并通过 chrome 开发者控制台将它们降低到 400 时，我发现没有任何变化。

那么如何让网站显示我想要的字体粗细？

Answer 1

我注意到，当您最初将该字体添加到套件时，默认设置是仅包括 Book 和 Bold，但如果您注意到还有一个选项，即 Medium（500 粗细）字体。您需要编辑您的工具包/网络项目以包含它。

您不必担心从 Adob​​e 加载的 CSS 文件，只要它正在加载并包含所有 3 个权重。如果您像这样为书本、中号和粗体定义类

<style>
.book {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 300;
    font-style: normal;
}
.medium {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
}
.bold {
    font-family: itc-avant-garde-gothic-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
}
</style>

然后将这些类应用于您的标记，您应该会看到 3 个不同的权重。

<p class="book">
Nunc nec neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. Nullam vel sem. Etiam vitae tortor. 
</p>
<p class="medium">
Sed aliquam ultrices mauris. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Vivamus consectetuer hendrerit lacus. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Sed fringilla mauris sit amet nibh. 
</p>
<p class="bold">
Etiam vitae tortor. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec posuere vulputate arcu. Nullam accumsan lorem in dui. Aenean imperdiet. 
</p>