Question

我下载了一种名为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;

  }

Answer 1

CSS @font-face是一个声明式系统，在该系统中，您可以教给浏览器用于CSS字体属性的哪种组合的字体资源。因此，如果您指定的只是“针对组合family = {Gilroy和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");
}

恭喜，您的weight：300现在呈现粗体，而您的weight：600呈现浅体。（在bind中要注意的是：不要将“额外的粗体”绑定到CSS权重600，这是与“标准的粗体”相关联的值。将其绑定到700、800或900）

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

字体粗细不适用于下载的字体

1 个答案: