為多語言網站選擇字體時的注意事項

作為一名為全球客戶工作的前端開發者，我一直苦於處理多語言網站，特別是同時使用從右到左(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中文網其他相關文章！