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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了字体重量不适用于下载的字体相关的知识,希望对你有一定的参考价值。

我下载了一个名为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版本。

以上是关于字体重量不适用于下载的字体的主要内容,如果未能解决你的问题,请参考以下文章

某些 Google 字体不适用于 iFrame innerHTML

CSS字体系列不适用于IE11

TabbedPage 选项卡图标不适用于字体真棒

自定义字体不适用于 React-Native 0.62

UITextView - 在 XCode 5 上设置字体不适用于 iOS 6

UITextView - 在 XCode 5 上设置字体不适用于 iOS 6