字体重量不适用于下载的字体

Posted 2021-03-26

我下载了一个名为Gilroy的字体。我想将它包含在我的项目中，并需要各种字体权重。

我已经包含了字体，然后加载。但是当我尝试更改.h类的h1上的字体权重时，它不起作用。

这里有什么想法？

@font-face {
    font-family: 'Gilroy';
    font-style: normal;
    src: local('Gilroy'), url('../../vendor/fonts/gilroy-extrabold.otf') format('truetype');
  }

  .h {
    font-family: 'Gilroy', serif;
    font-size: 48px;
    font-weight: 300;

  }

答案

CSS @font-face是一个声明性系统，您可以在其中教授浏览器哪种字体资源用于CSS字体属性的组合。因此，如果你所指定的只是“for combination family = Gilroy and style = normal使用gilroy-extrabold.otf”那么这就是你教过浏览器所做的一切。它不能神奇地切换到更轻的东西，因为它可以进行文本整形的唯一数据源是你给它的这个额外的粗体字体文件。

如果你需要额外的权重，那么你需要教他们存在的浏览器，以及它们应该使用哪些字体属性。例如：

@font-face {
  font-family: Gilroy;
  weight: 400;
  src: url(/fonts/gilroy-regular.woff) format("woff");
}

@font-face {
  font-family: Gilroy;
  weight: 300;
  src: url(/fonts/gilroy-light.woff) format("woff");
}

@font-face {
  font-family: Gilroy;
  weight: 600;
  src: url(/fonts/gilroy-bold.woff) format("woff");
}

现在，您在页面CSS中为font-family: Gilroy规则加载了三个权重，支持权重300,400 /正常和600 /粗体。

另请注意，字体资产本身与CSS属性无关，因此以下内容完全合法：

@font-face {
  font-family: Gilroy;
  weight: 400;
  src: url(/fonts/gilroy-regular.woff) format("woff");
}

@font-face {
  font-family: Gilroy;
  weight: 600;
  src: url(/fonts/gilroy-light.woff) format("woff");
}

@font-face {
  font-family: Gilroy;
  weight: 300;
  src: url(/fonts/gilroy-bold.woff) format("woff");
}

恭喜你，你的体重：300现在呈现粗体字体，而你的体重：600呈现浅色字体。 （承担绑定：不要将“额外粗体”绑定到CSS权重600，这是与“标准粗体”相关联的值。将其绑定到700,800或900）

另外，don't use ttf fonts on the modern web。获取.woff和/或.woff2版本，不要使用完整的通用OpenType版本。