如何在SCSS中为类设置可区分语言的动态font-family？

核心前提 #

CSS/SCSS本身无法直接识别文本的语言类型，必须依赖HTML的lang属性来标记不同语言的文本块或行内内容，这是实现需求的基础。

实现步骤 #

1. HTML标记语言 #

给不同语言的文本添加lang属性，支持块级或行内混合标记：

• 块级示例：

<div class="language-aware" lang="en">Hello World</div>
<div class="language-aware" lang="zh-CN">你好，世界</div>

• 行内混合示例：

<p class="language-aware">
  Hello <span lang="zh-CN">你好</span>, welcome to my site.
</p>

2. SCSS编写样式 #

通过属性选择器匹配lang属性，为不同语言设置对应字体，推荐两种实现方式：

方式一：基础写法

适合语言类型较少的场景，直接编写规则：

.language-aware {
  // 默认字体（可选，比如设为英文默认）
  font-family: 'Arial', 'Helvetica', sans-serif;

  // 中文字体规则（覆盖块级和行内元素）
  &[lang="zh-CN"],
  & [lang="zh-CN"] {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }

  // 日文字体规则
  &[lang="ja"],
  & [lang="ja"] {
    font-family: 'Meiryo', 'MS Gothic', sans-serif;
  }
}

方式二：批量处理（推荐）

用SCSS的map和@each循环批量生成规则，方便扩展多语言：

// 定义多语言字体映射表
$language-fonts: (
  en: 'Arial', 'Helvetica', sans-serif,
  zh-CN: 'PingFang SC', 'Microsoft YaHei', sans-serif,
  ja: 'Meiryo', 'MS Gothic', sans-serif,
  ko: 'Apple SD Gothic Neo', 'Nanum Gothic', sans-serif
);

.language-aware {
  // 设置默认字体（取英文字体作为全局默认）
  font-family: map-get($language-fonts, en);

  // 批量生成块级和行内的语言字体规则
  @each $lang, $font-stack in $language-fonts {
    &[lang="#{$lang}"] {
      font-family: $font-stack;
    }

    & [lang="#{$lang}"] {
      font-family: $font-stack;
    }
  }
}

注意事项 #

• 始终为字体设置备选（fallback），避免目标字体未加载时显示异常；
• 若页面整体有默认语言，可在<html>标签设置lang属性，局部文本的lang属性会覆盖全局设置；
• 部分浏览器对某些语言的字体支持有差异，建议优先选择系统默认支持的字体。

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