在使用可变字体的过程中，我也遇到了这些问题。
把它分享出来，这样或许你们也可以少走一些弯路。
在 CSS 中启用可变字体
@font-face{
font-weight: 200 700;
src: url("./Inter.ttf");
font-style: normal;
}
html, body {
font-family: "Inter", "SF Pro", sans-serif;
font-weight: 600;
font-variation-settings: "slnt"1, "opsz"17;
/* Inter 还不支持 slnt，这里只是举个例子说明
可变字体的可变属性应该怎么设置。
*/
font-optical-sizing: auto;
font-feature-settings: "cv11" on, "ss07" on;
}
-
其中，字重可以不必在
font-weight-settings里面设置"wght"700，直接使用font-weight: 700即可。 -
在
@font-face内部必须指明可变字体的字重范围font-weight: 100 1000，否则浏览器不会以为这是可变字体，只会使用一种字重，对于更粗的字重，将使用浏览器自己的算法加粗字体（可以理解为机械地描边），使得显示出来的字体并不那么美观。毕竟字体设计需要经过专门的美学微调，简单粗暴的算法是无法完美地解决不同字重的问题的。In this example, we set a font weight of 200 to 700. Once our range is defined, we can choose any number within that range as our font weight, for example 658. Importantly if you set your font weight range as 200 to 700 and then try to define a weight of 900, even if the font has a 900 weight defined in its axis you will not be able to use it. The range defines what you have access to in your CSS.
-
光学尺寸：推荐在具体使用的过程中使用
font-optical-sizing: auto属性，自动设置光学尺寸。 -
font-feature-settings: "cv11" on, "ss07" on这是 OTF 的字体特性设置，可以激活不同样式的部分字符特性。
比如双层 a 与单层 a。
Inter 的单层 a 特性的代码是 “cv11”，SF Pro 的单层 a 系列的特性的代码是 “ss07”。
因为我暂未考虑适配暗黑模式。
