不同语言的字体？

前端开发 2026-07-08

我在调整这个，让arimo用于希伯来语，alef用于其他所有文本。

这是我的CSS：

@import url("https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alef:wght@400;700&family=Arimo:ital,wght@0,400..700;1,400..700&display=swap");

@font-face {
  font-family: Arimo, sans-serif;
  src: url("https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap");
  unicode-range: U+0590-05FF, U+FB1D-FB4F; /** HEBREW **/
}

@font-face {
  font-family: Alef, sans-serif;
  src: url("https://fonts.googleapis.com/css2?family=Alef:wght@400;700&family=Arimo:ital,wght@0,400..700;1,400..700&display=swap");
}

* {
  font-family: "Arimo", "Alef", sans-serif;
  font-size: 1.1rem;
}

我原本以为在 * 选择器里列出多种字体族，浏览器会先尝试一种，再尝试下一种，并且认为Unicode范围会把arimo限制为只对希伯来字形起作用。然而看起来（至少在codesandbox中）这种排列似乎让Alef字体被彻底忽略。基本上就是Arial的英文字体搭配Arimo的希伯来字形。

我尝试了其他配置，但要么只有一个字体起作用，要么另一个起作用，但从来没有两者同时起作用。

为了简单起见，我希望有一种方法，不需要在每个元素的HTML标签中输入语言属性。我是在为别人搭这个网站，他们以后也可能自己修改，通常我希望避免任何会给未来的HTML编写带来怪癖的解决方案。

我花了很大力气找答案，但能找到的只有这个。

如果排版或措辞有些问题，抱歉，这是我第一次在Stack Overflow发帖。

提前感谢

解决方案

你通过两处 @import同时添加了Arimo字体，这两种方式都没有按你预期的方式限制Unicode范围，而 @font-face的定义存在多处错误，导致字体无法加载。

我建议通过 @import加载Alef，通过经过修正的 @font-face加载Arimo，像这样：

@import url("https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap");

/* hebrew */
@font-face {
  font-family: 'Arimo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/arimo/v36/P5sMzZCDf9_T_10bxCF8jA.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

body {
  font-family: serif;
}
span {
  font-size: 1.1rem;  
  font-family: sans-serif;
}
.Arimo.Alef {
  font-family: Arimo, Alef, sans-serif;
}
.Arimo {
  font-family: Arimo, sans-serif;
}
.Alef {
  font-family: Alef, sans-serif;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <p>Arimo then Alef:<br><span class="with Arimo then Alef"> 
      הַשֶּׁמֶשׁ זוֹרַחַת בַּשָּׁמַיִם. הַיּוֹם הוּא יוֹם יָפֶה. אֲנִי לוֹמֵד עִבְרִית this is a test
    </p>
    <p>Arimo only:<br><span class="with Arimo only">
      הַשֶּׁמֶשׁ זוֹרַחַת בַּשָּׁמַיִם. הַיּוֹם הוּא יוֹם יָפֶה. אֲנִי לוֹמֵד עִבְרִית this is a test
    </p>
    <p>Alef only:<br><span class="with Alef only">
      הַשֶּׁמֶשׁ זוֹרַחַת בַּשָּׁמַיִם. הַיּוֹם הוּא יוֹם יָפֶה. אֲנִי לוֹמֵד עִבְרִית this is a test
    </p>
    <p>Neither:<br><span class="with neither">
      הַשֶּׁמֶשׁ זוֹרַחַת בַּשָּׁמַיִם. הַיּוֹם הוּא יוֹם יָפֶה. אֲנִי לוֹמֵד עִבְרִית this is a test
    </p>
  </body>
</html>

注意，上述内容只是为了解释你的字体问题。正如评论区所指出的，它并不能替代正确的HTML标记。

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。