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，但是如果您发现还有一个视图，那就是中号（500粗细）字体。您需要编辑工具包/网络项目以包含它。

您不必担心Adobe加载的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>

如何使用字体粗细500导入字体

1 个答案: