单字体家族含40+变体时，如何规范命名多字体变体？

核心思路：用CSS标准属性区分变体，而非修改font-family #

不要为每个变体单独设置不同的font-family，统一使用'Sequel Sans'作为家族名，通过font-weight、font-stretch、font-style这三个CSS属性区分不同变体，这是符合Web字体规范的标准做法。

具体步骤 #

1. 解析字体文件名结构
   Sequel Sans的变体文件名通常包含三个关键信息：字重（如Book/Medium/Bold）、宽度（如Condensed/Extended）、样式（如Disp/Italic）。比如Sequel Sans Book Disp.ttf里，Book是字重，Disp属于显示类分支，不影响核心属性映射。

2. 映射到CSS标准属性

• font-weight：按行业惯例映射到100-900的数值范围，通用规则参考：
  • Thin → 100
  • ExtraLight → 200
  • Light → 300
  • Book/Regular → 400（对应normal）
  • Medium → 500
  • SemiBold → 600
  • Bold → 700（对应bold）
  • ExtraBold → 800
  • Black → 900
• font-stretch：文件名含Condensed则设为condensed，含Extended设为expanded，默认用normal。
• font-style：带Italic的变体设为italic，其余用normal。

3. @font-face规则示例

/* Book Display 常规变体 */
@font-face {
  font-family: 'Sequel Sans';
  src: url('Sequel Sans Book Disp.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

/* Medium Display 常规变体 */
@font-face {
  font-family: 'Sequel Sans';
  src: url('Sequel Sans Medium Disp.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

/* Bold Display 斜体变体 */
@font-face {
  font-family: 'Sequel Sans';
  src: url('Sequel Sans Bold Disp Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-stretch: normal;
}

/* Condensed Book 常规变体 */
@font-face {
  font-family: 'Sequel Sans';
  src: url('Sequel Sans Book Condensed.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-stretch: condensed;
}

4. 调用字体变体的方式
   在CSS中直接指定对应属性组合即可：

/* 使用Book Display变体 */
.text-book {
  font-family: 'Sequel Sans';
  font-weight: 400;
}

/* 使用Bold Display斜体变体 */
.text-bold-italic {
  font-family: 'Sequel Sans';
  font-weight: 700;
  font-style: italic;
}

/* 使用Condensed Book变体 */
.text-condensed-book {
  font-family: 'Sequel Sans';
  font-weight: 400;
  font-stretch: condensed;
}

参考技术资源 #

• CSS Fonts Module Level 4：官方规范定义了@font-face的所有属性，包括font-weight、font-stretch、font-style的合法取值和使用场景，是处理Web字体变体的权威依据。
• 行业通用字体命名惯例：专业字体文件名通常遵循「字重-宽度-样式」结构，掌握这个规律可快速解析任意字体的变体属性。

内容的提问来源于stack exchange，提问作者jean d'arme