支持英日的Web应用不同语言元素字体差异化配置咨询

嘿，这个场景我太熟了——不用一个个改元素样式，咱们靠CSS的优先级规则就能搞定！既然你已经能给body加上lang-eng或lang-ja类，那这就是最关键的突破口。

第一步：先声明日语字体的@font-face #

和你配置英语字体的方式一样，先把日语需要的字体用@font-face定义好，比如：

@font-face {
  font-family: "JapaneseSans";
  src: url("你的日语字体文件路径");
  font-weight: normal;
  font-style: normal;
}

/* 如果需要粗体，单独声明对应的字体文件 */
@font-face {
  font-family: "JapaneseSans";
  src: url("你的日语粗体字体文件路径");
  font-weight: bold;
  font-style: normal;
}

第二步：用语言类的后代选择器覆盖目标元素 #

CSS里有个优先级规则：带类的选择器优先级比单纯的元素选择器高。所以咱们直接针对lang-ja下的h1、h2、p等元素写样式，就能覆盖它们原本指定的字体：

/* 日语端目标元素的字体覆盖 */
.lang-ja h1,
.lang-ja h2,
.lang-ja p {
  font-family: "JapaneseSans", sans-serif;
  /* 要是原有元素的样式优先级特别高（比如用了ID），可以加!important强制覆盖，不过尽量少用哦 */
  /* font-family: "JapaneseSans", sans-serif !important; */
}

原理很简单：当body有lang-ja类时，它下面的所有h1、h2、p都会优先用这个新规则，不管这些元素之前有没有单独写字体——毕竟.lang-ja h1的优先级比单独的h1高多了。要是不同元素需要不同日语字体，也可以拆分写：

.lang-ja h1 { font-family: "JapaneseSerif", serif; }
.lang-ja h2, .lang-ja p { font-family: "JapaneseSans", sans-serif; }

进阶小技巧：优化日语字体的 fallback 链 #

考虑到字体加载失败的情况，给日语字体加个合理的系统字体 fallback，体验会更好：

.lang-ja h1,
.lang-ja h2,
.lang-ja p {
  font-family: "JapaneseSans", "Hiragino Sans", "Meiryo", sans-serif;
}

这样就算自定义字体没加载出来，也会用用户系统自带的日语字体显示，不会乱码。

最后验证一下 #

给body加上lang-ja类，刷新页面，用浏览器的开发者工具看看元素的样式面板——确认新的字体规则是不是已经把原来的覆盖掉了就行～

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