html 如何在一个有47种样式的字体上使用特定的样式？

to94eoyn 于 12个月前发布在其他

关注(0)|答案(1)|浏览(131)

我想在网络上使用SF Pro Expanded的SF Pro字体。但我不知道如何让它使用扩展样式而不仅仅是普通的SF Pro字体（如果有意义的话）
如何在CSS中做到这一点？

@font-face {
  font-family: "SFPro-ExpandedLight";
  src: url(font/SF-Pro.ttf);
}

body {
  background-image: url("websitebg.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: "SFPro-ExpandedLight", sans-serif;
}

字符串
这只是使用普通的SF Pro字体，而不是Expanded
我试着改变字体的重量，以“扩大”，但没有运气

Html

来源：https://stackoverflow.com/questions/77441868/how-can-i-use-a-specific-style-on-a-font-with-47-styles

1条答案

按热度按时间

p8h8hvxi1#

您可以使用font-variation-settings css属性。查看Chris Coyier https://codepen.io/chriscoyier/pen/RwMQYyQ编写的代码
特别是第57到63行，

tr:nth-child(4) {
  @for $i from 1 through 10 {
    td:nth-child(#{$i + 1}) {
      font-variation-settings: "wght" #{(($i - 1) * 110) + 5}, "wdth" 130;
    }
  }
}

字符串
转换为CSS我相信光扩展将是
font-variation-settings: "wght" 225, "wdth" 130;个
您可以在this article中阅读更多内容
font-variation-settings有漂亮的conditional support（需要特定的操作系统更新来支持），这是毫无价值的。

赞(0）回复(0）举报 12个月前

我来回答

html 如何在一个有47种样式的字体上使用特定的样式？

1条答案

相关问题

热门标签

最新问答