为多语言网站选择字体时的注意事项

作为一名为全球客户工作的前端开发者，我一直苦于处理多语言网站，特别是同时使用从右到左 (RTL) 和从左到右 (LTR) 排版的案例。不过，在这个过程中，我学到了一些东西，并将在本文中分享一些技巧。

让我们以阿拉伯语和英语为例，这不仅是因为阿拉伯语是我的母语，更是因为它是一个经典的 RTL 使用案例。

为网站添加 RTL 支持

在此之前，我们需要为网站添加对 RTL 语言的支持。我们可以通过两种方法实现，但这两种方法都不是理想的。

不理想的方法一：为每个方向使用特定字体

第一种方法是依赖于任何给定元素上的 dir 属性（通常是 元素，因此它全局设置方向）：

/* 对于 LTR，使用 Roboto */
[dir=ltr] body {
  font-family: "Roboto", sans-serif;
}

/* 对于 RTL，使用 Amiri */
[dir=rtl] body {
  font-family: "Amiri", sans-serif;
}

PostCSS-RTL 使为每个方向生成样式变得更容易，但这种方法的问题在于，你只使用了一种字体，如果一段文字中有多种语言，则不是理想的选择。

原因如下：你会发现多语言段落会弄乱 UI，因为阿拉伯文字符会被赋予一个与元素不匹配的默认字体。

在某些浏览器中，情况可能会比其他浏览器更糟。

不理想的方法二：使用同时支持两种语言的单一字体

第二个选择是使用同时支持两种方向的字体。然而，根据我的个人经验，只为两种语言使用一种字体会限制创造力和使用不同方向不同字体的自由度。这可能还不错，取决于设计要求。但我确实参与过一些项目，在这种项目中，这会产生影响。

那么，正确的做法是什么呢？

我们需要一个更简单的解决方案。根据 MDN：

字体选择并不仅仅停留在用户系统上列表中的第一个字体。相反，字体选择是逐个字符进行的，因此，如果可用的字体没有所需字符的字形，则会尝试后面的字体。

这意味着，我们仍然可以使用 font-family 属性，但在第一个字体没有字符字形的情况下使用回退字体。这实际上解决了上述两个问题，一举两得！

body {
  font-family: 'Roboto', 'Amiri', 'Galada', sans-serif;
}

为什么这种方法有效？

就像 flexbox 和 CSS grid 使 CSS 布局更加灵活一样，字体匹配算法使处理不同语言的内容变得更容易。W3C 对其如何将字符与字体匹配的说明如下：

当文本包含诸如组合标记之类的字符时，理想情况下，应使用与标记相同的字体来渲染基字符，这确保了标记的正确放置。出于这个原因，集群的字体匹配算法比单独匹配单个字符的通用情况更专业化。对于包含变体选择器的序列（指示要为给定字符使用的精确字形），用户代理始终尝试系统字体回退以查找合适的字形，然后再使用基字符的默认字形。

(强调是我的)

字体是如何匹配的？规范概述了算法采取的步骤，我将在此处概括说明。

• 浏览器查看文本集群，并尝试将其与 CSS 中声明的字体列表进行匹配。
• 如果它找到一个支持所有字符的字体，那就太好了！这就是使用的字体。
• 如果浏览器找不到一个支持所有字符的字体，它会重新读取字体列表，以找到一个支持未匹配字符的字体，并将其应用于这些特定字符。
• 如果浏览器在列表中找不到既匹配集群中所有字符，又匹配单个字符的字体，那么它就会使用默认系统字体并检查它是否支持所有字符。
• 如果默认系统字体匹配，同样，那就太好了！这就是使用的字体。
• 如果系统字体不起作用，那就是浏览器渲染损坏字形的地方。

让我们谈谈性能

我们刚才看到的序列可能会影响网站的性能。想象一下，浏览器必须遍历每个定义的回退，将特定字符与字形匹配，并根据其发现的内容下载字体文件。这可能会累积大量工作，更不用说 FOUT 和其他渲染异常了。

目标是让字体匹配算法决定将哪种字体应用于每个文本，而不是依赖于一种字体来处理两种语言或添加额外的 CSS 来处理不同的方向。如果字体从未应用于任何内容（例如，特定页面为 RTL，并且碰巧没有任何 LTR 文本，反之亦然），则不会下载堆栈中未使用的字体。

要实现这一点，需要选择合适的多种语言字体。合适的多种语言字体是指那些具有您预计在页面上使用的尽可能多的字符字形的字体。如果您无法找到支持所有字符的字体，那么使用支持大多数字符的字体，然后回退到支持其他字符的字体是一种有效的方法。如果碰巧是默认系统字体，那就同样好，因为它少了一个要下载的字体文件。

让 font-family 属性决定每个字形的字体（而不是为每个方向创建额外的 CSS 选择器）的好处在于，这种行为已经存在，正如我们前面概述的那样——我们只需要利用它即可。

以上是为多语言网站选择字体时的注意事项的详细内容。更多信息请关注PHP中文网其他相关文章！