如何在SCSS中根据font-family值设置对应CSS属性？

因为纯CSS/SCSS无法直接通过元素计算后的font-family值来匹配选择器，不过结合你提到的「字体族数量不多」的条件，可以通过以下两种SCSS方案实现需求，同时不用修改现有类名或HTML结构：

方案一：使用混合宏（Mixin）统一管理 #

先定义一个包含字体族判断逻辑的混合宏，之后在每个类的定义中调用它，自动注入对应属性：

// 定义混合宏：传入字体族，自动添加对应样式
@mixin font-family-based-styles($font-family) {
  // 基础字体设置
  font-family: $font-family;
  text-transform: lowercase;
  // ... 其他原有共用属性

  // 根据字体族匹配对应样式
  @if $font-family == 'RobotoBold' {
    font-weight: bold;
  } @else if $font-family == 'RobotoItalic' {
    font-style: italic;
  } @else if $font-family == 'RobotoBoldItalic' {
    font-weight: bold;
    font-style: italic;
    background-color: #f5f5f5;
  }
  // 可继续添加其他字体族的判断
}

// 在现有类中调用混合宏
.my-css-class {
  @include font-family-based-styles('RobotoBold');
}

.another-custom-class {
  @include font-family-based-styles('RobotoItalic');
}

.third-class {
  @include font-family-based-styles('RobotoBoldItalic');
}

这种方式的好处是逻辑集中，后续新增字体族或修改样式时，只需要更新混合宏即可，不用逐个修改类定义。

方案二：使用映射（Map）+ 循环批量生成样式 #

如果你的类和对应字体族可以整理成映射关系，还可以用循环批量生成所有类的样式，进一步减少重复代码：

// 1. 定义「类名-字体族」映射
$font-class-map: (
  'my-css-class': 'RobotoBold',
  'another-custom-class': 'RobotoItalic',
  'third-class': 'RobotoBoldItalic',
  // 可继续添加更多类和对应字体族
);

// 2. 定义「字体族-对应样式」映射
$font-style-map: (
  'RobotoBold': (font-weight: bold),
  'RobotoItalic': (font-style: italic),
  'RobotoBoldItalic': (font-weight: bold, font-style: italic, background-color: #f5f5f5)
);

// 3. 循环生成所有类的样式
@each $class-name, $font-family in $font-class-map {
  .#{$class-name} {
    // 基础属性
    font-family: $font-family;
    text-transform: lowercase;
    // ... 其他原有共用属性

    // 注入对应字体族的样式
    @if map-has-key($font-style-map, $font-family) {
      @each $prop, $value in map-get($font-style-map, $font-family) {
        #{$prop}: $value;
      }
    }
  }
}

这种方式适合类数量较多的场景，只需要维护两个映射表，就能自动生成所有类的完整样式。

特殊情况处理：如果无法修改现有类定义 #

如果这些类是第三方代码或已经固化无法修改，纯CSS/SCSS就无法实现需求了。此时可以用JavaScript辅助实现：遍历页面元素，获取计算后的font-family值，再动态设置对应样式：

const fontStyleMap = {
  'RobotoBold': { fontWeight: 'bold' },
  'RobotoItalic': { fontStyle: 'italic' },
  'RobotoBoldItalic': { fontWeight: 'bold', fontStyle: 'italic', backgroundColor: '#f5f5f5' }
};

// 遍历所有元素（可根据实际情况缩小选择范围，比如只选择有特定前缀的类）
document.querySelectorAll('*').forEach(el => {
  const computedFont = getComputedStyle(el).fontFamily.replace(/['"]/g, ''); // 去除引号
  if (fontStyleMap[computedFont]) {
    Object.assign(el.style, fontStyleMap[computedFont]);
  }
});

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