可以给字体起别名 family/weight 吗？

Question

我在一个项目中工作，其中字体系列定义为内联样式，其中内置了权重细节，例如 font-family: Inter_700Bold

有没有办法在 css/html 中将 font-family: Inter_700Bold 变成 font-family: Inter,font-weight:700

的别名

Answer 1

您不能在 html/css 中使用某种动态别名，为此您需要某种预处理器。但是在定义 @font-face 时，您为字体定义了一个本地页面别名：

@font-face {
  font-family: 'this_font_will_be_used_through_this_long_ugly_name';
  ...
}
.some_element{
  font-family: this_font_will_be_used_through_this_long_ugly_name;
}

当然，您需要所有可能的组合，如 @font-face 定义。

Answer 2

一种可能的解决方案是使用您提到的内联样式定位元素的选择器，并将 weight/actual 字体应用于它们。

[style*="font-family: Inter_700Bold"] {
  font-family: 'Inter_700';
  font-weight: 700;
}

<p style="font-family: Inter_700Bold;">has the font family</p>
<p style="text-transform: capitalize; font-family: Inter_700Bold;">has other styles as well</p>
<p>doesn't have the font family</p>

可以给字体起别名 family/weight 吗？

Possible to alias a font family/weight?

html

css

fonts

font-family