使用@font-family配置IBM Plex自定义字体：是否需全部配置？

阿华AIGC实验室

2026-5-20

关于IBM Plex OTF字体的使用与托管问题

首先直接给你明确答案：没错，你的理解完全正确。IBM确实没有提供公开的CDN或托管服务来让你直接通过@import或<link>标签引入IBM Plex OTF字体，唯一的官方获取渠道是GitHub下载字体文件包，所以你必须自行将这些字体文件部署到你的站点服务器上，才能在页面中使用。

接下来针对你提到的要配置约80条@font-family规则的情况，这里有个关键优化点：你完全不需要为每个字体文件单独创建一条@font-family规则！

IBM Plex的每个字体系列（比如Sans）里的多个字体文件，本质是对应不同的字重（font-weight）和字体样式（font-style）。你可以把同一系列的字体都归到同一个font-family名称下，通过指定不同的font-weight和font-style来匹配对应的字体文件，这样能大幅减少规则数量。

举个实际的配置例子（以IBM Plex Sans为例）：

/* 常规字重、正常样式 */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

/* 粗体、正常样式 */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

/* 常规字重、斜体样式 */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

/* 粗体、斜体样式 */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}

/* 轻量字重、正常样式 */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/IBMPlexSans-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

这样配置后，你在页面中使用的时候只需要指定同一个字体系列名称，再搭配对应的字重和样式即可：

body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 400; /* 对应Regular字体 */
}

h1 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700; /* 对应Bold字体 */
  font-style: italic; /* 对应BoldItalic字体 */
}

额外补充两个实用建议：