我是否必须加载 60 种字体才能在网站中支持 60 种语言？答案

【问题标题】：Do I have to load 60 fonts to support 60 language in website?我是否必须加载 60 种字体才能在网站中支持 60 种语言？
【发布时间】：2020-11-08 08:16:12
【问题描述】：

我正在制作一个支持 60 种语言的 react 网站。但我不确定如何开发该网站。我是否必须在我的网站中加载 60 种字体（例如通过 CDN 链接）才能正确支持所有语言？还是有其他更好的方法？

【问题讨论】：

这取决于这些语言使用的字母表以及您的字体支持的字母表。

标签： javascript css reactjs frontend webfonts

【解决方案1】：

根据您需要支持的语言和您希望使用的字体，您可能需要使用多种字体，不过有很多字体涵盖了很多不同的语言和排版。

Google Noto font 是尝试支持尽可能多语言的字体示例

【讨论】：

一次加载太多字体会不会影响网站性能？
是的，太多会影响性能。我想你不应该真的需要超过 3-4 种不同的字体，因为大多数语言共享字符集。优化以便只下载用户语言所需的字体是个好主意

【解决方案2】：

TL;DR 不，你不知道。只需使用支持大多数拉丁语言的字体+用于中文等特殊情况的字体。不要包含第三方链接来加载您的资源！

准确解释

起初：您可能知道，世界上大多数语言都使用拉丁字母+一些额外的字母。如果您有一种字体支持此字母 + 额外字母 (ASCII)，您还可以支持大多数语言，如法语、德语、英语等。因此，对于 60 种语言，您并不需要正好 60 种字体。仅 1 个用于具有所有必需字母 + 特殊字体的拉丁语言。

其次您可能会考虑针对其他特殊语言优化您的用户界面，这些语言的母语人士习惯以不同于英语等国家/地区的方式阅读他们的字母（从上到下到左右阅读，或从右到左到上下）。

第三：不要使用链接从第三方加载资源。如果您使用此链接，您可能会很好，但随着您在此 uri 背后获得的资源消失，您的 ui 可能无法正常工作。最佳做法是：从 Google 字体下载您的字体并将它们放在您应用的资源文件夹中。如果发生反应，请将其放在src/fonts/someOtherDirForLanguagesMaybe。

原因：React 可以将你的资源与 webpack 捆绑在“src”中，并且可以大大减少网络流量。只需加载用户真正需要的字体。所以以英语为母语的人不会使用任何中文字母。

第四：当您开发您的网站时，您不应该尝试同时支持所有语言。首先对您的网站做一个概念并很好地构建您的用户界面。从基本语言开始，例如英语/德语/西班牙语/法语（所有基于拉丁语的语言），并使用一些有用的功能，如果您认为支持其他语言可能有用，请尝试其他语言。

希望这能深入回答您的问题。 :)

【讨论】：