如何在Tailwind CSS中让可变字体（10-218）适配标准CSS权重类

问题背景 #

项目使用多种字体，包括一款采用非标准权重范围（10-218）的可变字体Chopin，以及采用CSS标准权重范围（100-900）的常规字体N27。

目前由于权重体系不匹配，不得不为每个文本元素使用两套不同的Tailwind类：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'N27': ['N27','Arial', 'Helvetica', 'sans-serif'],
        'Chopin': ['Chopin', 'Arial', 'Helvetica', 'sans-serif'],
      },
      fontWeight: {
        'Chopin-thin': '10',
        'Chopin-light': '75',
        'Chopin-normal': '125',
        'Chopin-medium': '150',
        'Chopin-semibold': '175',
        'Chopin-bold': '200',
        'Chopin-black': '218',
      },
    }
  }
}

这导致冗余的标记代码：

<!-- 常规字体 -->
<p class="font-N27 font-bold">Normal font bold text</p>

<!-- 需要特殊权重类的可变字体 -->
<p class="font-Chopin font-Chopin-bold">Chopin font bold text</p>

需求目标 #

希望为两种字体使用统一的标准font-weight类（如font-bold、font-medium等），让可变字体自动将其原生10-218权重映射到标准100-900权重体系。理想的HTML代码如下：

<p class="font-N27 font-bold">Normal font bold text</p>
<p class="font-Chopin font-bold">Chopin font bold text</p>

让浏览器自动识别：常规字体的font-bold对应700，Chopin字体的font-bold对应200。

核心疑问 #

是否可以在Tailwind CSS中通过CSS自定义属性或其他技术标准化这些权重体系，让两种字体共用标准font-weight类？

补充背景 #

• 可变字体Chopin的权重范围为10-218
• 其他字体采用标准权重（100-900）
• 使用Tailwind CSS v3.x版本

当前已实现的解决方案 #

通过Tailwind插件实现了需求，但配置代码较为冗余：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'N27': ['N27','Arial', 'Helvetica', 'sans-serif'],
        'Chopin': ['Chopin', 'Arial', 'Helvetica', 'sans-serif'],
      }
    }
  },
  plugins: [
    function({ addBase }) {
      addBase({
        // 定义Chopin字体的权重映射
        ':root': {
          '--font-weight-thin-chopin': '10',
          '--font-weight-extralight-chopin': '45',
          '--font-weight-light-chopin': '75',
          '--font-weight-normal-chopin': '125',
          '--font-weight-medium-chopin': '150',
          '--font-weight-semibold-chopin': '175',
          '--font-weight-bold-chopin': '200',
          '--font-weight-extrabold-chopin': '210',
          '--font-weight-black-chopin': '218',
        },
        // 根据字体族条件应用权重映射
        '.font-Chopin': {
          '&.font-thin': { fontWeight: 'var(--font-weight-thin-chopin)' },
          '&.font-extralight': { fontWeight: 'var(--font-weight-extralight-chopin)' },
          '&.font-light': { fontWeight: 'var(--font-weight-light-chopin)' },
          '&.font-normal': { fontWeight: 'var(--font-weight-normal-chopin)' },
          '&.font-medium': { fontWeight: 'var(--font-weight-medium-chopin)' },
          '&.font-semibold': { fontWeight: 'var(--font-weight-semibold-chopin)' },
          '&.font-bold': { fontWeight: 'var(--font-weight-bold-chopin)' },
          '&.font-extrabold': { fontWeight: 'var(--font-weight-extrabold-chopin)' },
          '&.font-black': { fontWeight: 'var(--font-weight-black-chopin)' },
        }
      })
    }
  ]
}

该方案允许使用标准font-weight类：

<p class="font-N27 font-bold">Uses weight 700</p>
<p class="font-Chopin font-bold">Uses weight 200</p>

优点 #

• 保留标准Tailwind类
• 兼容两种字体类型
• HTML标记简洁

缺点 #

• 配置代码冗余
• 需要维护两套权重体系
• 维护成本较高

更优雅的优化方案 #

方案一：通过CSS @font-face原生映射权重（推荐） #

直接在@font-face定义中为Chopin字体的标准权重值映射到它的非标准原生权重，无需修改Tailwind配置，直接使用标准font-weight类即可。

/* 在项目的全局CSS文件中添加 */
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 10 218; /* 声明字体的原生权重范围 */
  font-style: normal;
}

/* 为标准权重值映射到Chopin的对应权重 */
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 100; /* 标准thin */
  font-style: normal;
  font-variation-settings: 'wght' 10;
}
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 200; /* 标准extralight */
  font-style: normal;
  font-variation-settings: 'wght' 45;
}
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 300; /* 标准light */
  font-style: normal;
  font-variation-settings: 'wght' 75;
}
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 400; /* 标准normal */
  font-style: normal;
  font-variation-settings: 'wght' 125;
}
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 500; /* 标准medium */
  font-style: normal;
  font-variation-settings: 'wght' 150;
}
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 600; /* 标准semibold */
  font-style: normal;
  font-variation-settings: 'wght' 175;
}
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 700; /* 标准bold */
  font-style: normal;
  font-variation-settings: 'wght' 200;
}
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 800; /* 标准extrabold */
  font-style: normal;
  font-variation-settings: 'wght' 210;
}
@font-face {
  font-family: 'Chopin';
  src: url('path/to/Chopin.woff2') format('woff2-variations');
  font-weight: 900; /* 标准black */
  font-style: normal;
  font-variation-settings: 'wght' 218;
}

之后Tailwind配置只需保留字体族定义：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'N27': ['N27','Arial', 'Helvetica', 'sans-serif'],
        'Chopin': ['Chopin', 'Arial', 'Helvetica', 'sans-serif'],
      },
    }
  }
}

这样就可以直接使用标准font-weight类，浏览器会自动为Chopin字体映射到对应的原生权重。

方案二：简化Tailwind插件配置 #

如果不想修改@font-face定义，可以通过循环减少插件配置的冗余代码：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'N27': ['N27','Arial', 'Helvetica', 'sans-serif'],
        'Chopin': ['Chopin', 'Arial', 'Helvetica', 'sans-serif'],
      }
    }
  },
  plugins: [
    function({ addBase }) {
      // 定义标准权重到Chopin原生权重的映射表
      const weightMap = {
        thin: '10',
        extralight: '45',
        light: '75',
        normal: '125',
        medium: '150',
        semibold: '175',
        bold: '200',
        extrabold: '210',
        black: '218',
      };

      // 生成自定义属性
      const rootVars = Object.fromEntries(
        Object.entries(weightMap).map(([key, value]) => [`--font-weight-${key}-chopin`, value])
      );

      // 生成字体权重覆盖规则
      const chopinWeightRules = Object.fromEntries(
        Object.entries(weightMap).map(([key]) => [
          `&.font-${key}`,
          { fontWeight: `var(--font-weight-${key}-chopin)` }
        ])
      );

      addBase({
        ':root': rootVars,
        '.font-Chopin': chopinWeightRules,
      });
    }
  ]
}

后续修改权重只需更新weightMap对象即可，大幅降低维护成本。

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