如何在custom.css中添加Mont系列字体？是否需独立配置@font-face？

嘿，这个问题问得很关键！答案是你必须为每个不同字重、样式的字体文件单独定义@font-face规则，不能只用一个规则覆盖所有。

为什么呢？因为每个你存放的字体文件都对应着不同的字重（Thin、SemiBold）和字体样式（常规、斜体），浏览器需要明确的映射关系，才能在你指定font-weight或font-style时，加载对应的正确字体文件——而不是用浏览器自带的算法去模拟加粗或斜体（模拟出来的效果往往很生硬，完全达不到字体本身的设计质感）。

给你一个正确的实现示例，把这段代码放到你的custom.css里就可以了：

/* Mont Thin 常规 */
@font-face {
  font-family: "Mont";
  src: url("/static/fonts/Fontfabric---Mont-Thin.otf");
  font-weight: 100; /* Thin对应的标准字重值是100 */
  font-style: normal;
}

/* Mont Thin 斜体 */
@font-face {
  font-family: "Mont";
  src: url("/static/fonts/Fontfabric---Mont-Thin-Italic.otf");
  font-weight: 100;
  font-style: italic;
}

/* Mont SemiBold 常规 */
@font-face {
  font-family: "Mont";
  src: url("/static/fonts/Fontfabric---Mont-SemiBold.otf");
  font-weight: 600; /* SemiBold对应的标准字重值是600 */
  font-style: normal;
}

/* Mont SemiBold 斜体 */
@font-face {
  font-family: "Mont";
  src: url("/static/fonts/Fontfabric---Mont-SemiBold-Italic.otf");
  font-weight: 600;
  font-style: italic;
}

这样设置之后，你在页面里就可以像使用系统字体一样灵活调用这些变体了，比如：

• 要使用细体：font-weight: 100;
• 要使用半粗体斜体：font-weight: 600; font-style: italic;

如果只用你最开始写的那一个@font-face规则，浏览器只会加载Mont Thin常规字体，当你尝试设置其他字重或斜体时，要么找不到对应字体而回退到系统字体，要么会自动生成不自然的加粗/斜体效果，完全发挥不出你这些字体文件的作用。

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