如何为斜体样式指定特定的可变字体？

问题核心在于你给两款字体设置了不同的font-family名称，浏览器无法自动关联常规和斜体字体，导致斜体文本只能用常规字体强制变形。正确的做法是给两款字体设置相同的font-family，通过font-style区分常规/斜体，让浏览器自动匹配对应字体文件。

修改后的@font-face配置 #

@font-face {
  font-family: "Rubik"; /* 统一字体名称 */
  src: url(https://fakewebsite.me/1/39/Rubik-VariableFont.ttf) format("truetype");
  font-style: normal; /* 指定为常规样式 */
  font-weight: 400 700; /* 明确字体支持的字重范围（Regular到Bold） */
}

@font-face {
  font-family: "Rubik"; /* 与常规字体共用同一个名称 */
  src: url(https://fakewebsite.me/3/43/Rubik-Italic-VariableFont.ttf) format("truetype");
  font-style: italic; /* 指定为斜体样式 */
  font-weight: 400 700; /* 对应斜体字体的字重范围 */
}

页面区域的字体使用代码 #

保持原有设置即可，浏览器会根据元素的font-style自动选择对应字体：

#content.mw-body {
    font-family: Rubik, serif;
    font-size: 12pt;
    /* 默认font-style为normal，无需强制设置；有特殊需求可保留 */
}

原理说明 #

• 当浏览器遇到font-style: italic的文本（比如<em>/<i>标签，或手动设置该属性的元素），会自动匹配font-family: "Rubik"且font-style: italic的@font-face规则，加载专门的斜体字体文件，避免强制变形。
• 常规文本则会调用font-style: normal的字体文件，保持正常显示。
• 明确font-weight: 400 700可以让浏览器精准识别可变字体的字重范围，确保Bold字重也能正确匹配。

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