本地@font-face引入可变字体后无法修改font-weight与width的问题

针对你遇到的本地Archivo可变字体无法调整字重、字宽的问题，核心原因是**@font-face声明缺少可变字体的轴范围信息**，浏览器无法识别其可变特性，以下是具体解决方案：

1. 完善@font-face声明 #

谷歌字体的自动生成样式已经包含了字体支持的字重、字宽范围，而本地引入时必须手动声明这些信息，告诉浏览器该字体是可变字体。修改后的代码如下：

@font-face {
    font-family: 'Archivo';
    src: url(fonts/Archivo-VariableFont_wdth,wght.ttf) format('truetype');
    /* 声明字重范围（对应wght轴，Archivo通常支持100-900） */
    font-weight: 100 900;
    /* 声明字宽范围（对应wdth轴，Archivo通常支持75%-125%） */
    font-stretch: 75% 125%;
    /* 若字体支持斜体，添加此声明 */
    font-style: normal italic;
    /* 可选：优化字体加载体验 */
    font-display: swap;
}

2. 修正样式参数的有效性 #

• 注意字重范围限制：Archivo可变字体的wght轴最大支持900，你设置的1000超出了字体本身的范围，会被浏览器忽略，建议调整为900以内的值。
• 优先使用标准属性：相比font-variation-settings，使用font-weight和font-stretch更直观且兼容性更好，示例：

.front .name{
    font-family: 'Archivo', sans-serif;
    font-size: 4.5vw;
    font-weight: 900; /* 对应wght轴的900 */
    font-stretch: 100%; /* 对应wdth轴的100 */
    color: rgb(255,222,90);
}

如果坚持使用font-variation-settings，确保轴名是4字符的标准标签（区分大小写，Archivo的是"wght"和"wdth"），且值在字体支持范围内：

font-variation-settings: "wght" 900, "wdth" 100;

3. 排查其他可能问题 #

• 文件路径验证：确认fonts/Archivo-VariableFont_wdth,wght.ttf的路径相对于CSS文件是正确的，可在浏览器开发者工具的Network面板查看字体是否成功加载。
• 清除缓存：浏览器可能缓存了旧的字体资源，可通过添加版本号（如url(fonts/Archivo-VariableFont_wdth,wght.ttf?v=1)）或手动清除缓存解决。

内容的提问来源于stack exchange，提问作者Wegg