设置相同font-size时泰米尔字体显示偏大的技术求助

问题分析 #

当前CSS写法存在两个核心问题：

• 重复声明font-family属性会直接覆盖前序设置，最终所有文本强制使用notoRegularTamil字体，导致英语、僧伽罗语也用泰米尔语字体渲染，这本身不符合多语言字体匹配的逻辑。
• 即使正确匹配字体，泰米尔语字体的设计（如em-square、x-height）与Lato、僧伽罗语Noto字体存在差异，相同font-size下视觉尺寸会偏大。

解决方案 #

1. 修正多语言字体匹配逻辑 #

将font-family设置为字体列表，让浏览器根据文本语言自动选择对应字体，而非强制单一字体：

@font-face {
   font-family: latoRegular;
   src: url(../../../assets/fonts/Lato-Regular.ttf);
} 

@font-face {
   font-family: notoRegularSinhala;
   src: url(../../../assets/fonts/NotoSansSinhala-Regular.ttf);
}

@font-face {
    font-family: notoRegularTamil;
    src: url(../../../assets/fonts/NotoSansTamil-Regular.ttf);
}

* {
  font-family: latoRegular, notoRegularSinhala, notoRegularTamil, sans-serif;
}

body {
  font-family: latoRegular, notoRegularSinhala, notoRegularTamil, sans-serif;
}

如果需要更精准的语言匹配，可以结合HTML的lang属性为特定语言设置字体：

/* 英语文本用Lato */
:lang(en) {
  font-family: latoRegular, sans-serif;
}
/* 僧伽罗语文本用NotoSansSinhala */
:lang(si) {
  font-family: notoRegularSinhala, sans-serif;
}
/* 泰米尔语文本用NotoSansTamil */
:lang(ta) {
  font-family: notoRegularTamil, sans-serif;
}

2. 统一不同字体的视觉尺寸 #

针对泰米尔语字体的视觉偏大问题，可通过以下两种方法调整：

方法一：使用font-size-adjust（推荐）

该属性基于字体的x-height比例调整大小，让不同字体的视觉高度统一：

:lang(ta) {
  font-family: notoRegularTamil, sans-serif;
  /* 先获取Lato字体的x-height与font-size的比例，假设为0.58，设置泰米尔语字体匹配该比例 */
  font-size-adjust: 0.58;
}

你可以通过字体工具查看目标字体的x-height比例，设置为与Lato一致的值即可。

方法二：直接调整font-size

如果无法获取x-height比例，可直接为泰米尔语文本设置更小的字体大小：

:lang(ta) {
  font-family: notoRegularTamil, sans-serif;
  font-size: 0.9em; /* 根据实际视觉效果调整数值 */
}

内容的提问来源于stack exchange，提问作者Viraj Sandakelum Anawarathna