如何配置单个@font-face规则实现不同font-weight对应不同Roboto字体？

完全可以实现你要的映射效果，这也是Web字体引入的标准最优实现方式，比单独给每个权重定义不同字体名要方便很多。

具体实现逻辑 #

你可以给多个@font-face规则指定完全相同的自定义字体族名称，只需要在每个规则里单独配置font-weight属性匹配你需要的权重值、以及对应的字体文件路径即可。后续使用时只需要给元素统一设置你自定义的字体族名，浏览器会自动根据元素的font-weight取值匹配对应的字体文件加载，不需要额外做其他配置。

代码示例 #

/* 所有字体规则统一使用同一个自定义字体族名，比如 Roboto Custom */
@font-face {
  font-family: 'Roboto Custom';
  src: url('Roboto-Thin.ttf') format('truetype');
  font-weight: lighter; /* 也可以写等价数值 100，兼容性更好 */
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Custom';
  src: url('Roboto-Regular.ttf') format('truetype');
  font-weight: normal; /* 等价数值 400 */
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Custom';
  src: url('Roboto-Bold.ttf') format('truetype');
  font-weight: bolder; /* 等价数值 700 */
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Custom';
  src: url('Roboto-Black.ttf') format('truetype');
  font-weight: bold; /* 等价数值 900 */
  font-style: normal;
}

使用方式 #

/* 全局指定统一使用自定义的Roboto字体 */
body {
  font-family: 'Roboto Custom', sans-serif;
}

/* 只需要设置font-weight即可自动匹配对应字体文件 */
p {
  font-weight: normal; /* 自动加载 Roboto-Regular.ttf */
}
.subtitle {
  font-weight: lighter; /* 自动加载 Roboto-Thin.ttf */
}
.highlight {
  font-weight: bolder; /* 自动加载 Roboto-Bold.ttf */
}
h1 {
  font-weight: bold; /* 自动加载 Roboto-Black.ttf */
}

注意事项 #

• 如果你担心不同浏览器对lighter/normal等关键字的解析有差异，可以把font-weight的属性值替换为对应的标准数值，匹配效果完全一致，兼容性更好。
• 目前CSS规范不支持把多个字体和权重的映射关系写在同一个@font-face规则块里，必须分开写多个规则块，这已经是最简便的实现方案，后续使用时不需要再单独为不同权重的元素指定不同字体族，维护成本很低。
• 字重和字体文件的映射关系可以完全按你的需求自定义，不需要强制符合通用的字重数值对应规则，只要你设置的font-weight值和使用时的取值能对应上即可。

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