在 HTML/CSS 中加载自定义 Chinese/Japanese 字体是否有比 @font-face 更快的方法？

Question

我正在做一个以中文为主，但到处都是日语短语和句子的网站。保持字体的整体风格统一对我来说很重要，同时非常注意日文字符的显示方式。也就是说，我不允许简单地将这些日文字符替换为与它们相近的中文字符。为此，我目前分别为中文和日文使用不同的自定义字体。这些是专为中文或日文设计的视觉上相似的 OTF 字体。我通过 CSS @font-face 命令加载它们。但是，这些 .otf 字体文件有好几 MB，需要几秒钟，甚至几分钟才能加载。此外，对于查看者打开的每个新网页都会发生这种情况。我想知道是否有更快的方式加载这些字体。非常感谢您的帮助！

（警告：我是初学者。）

P.S。我的网站迎合了中国大陆的观众，所以 google 字体在这里可能不是一个好的解决方案。

Answer 1

您可以使用 WebFontLoader 来提高@font-face 的性能。它由 Google 和 Typekit 开发。您可以将它与他们的服务一起使用，也可以用于自托管字体。

使用@font-face 在 css 中包含字体，就像您已经做的那样。

@font-face {
    font-family: 'My Font';
    src: ...;
}
@font-face {
    font-family: 'My Other Font';
    src: ...;
}

将此代码添加到主页底部，就在 </body>

之前

<script>
  WebFont.load({
    custom: {
      families: ['My Font', 'My Other Font']
    }
  });
</script>

Answer 2

我最终使用了 Adobe Typekit 提供的 "dynamic subsetting" 功能。它动态生成仅包含网页上使用的字符的字体文件，并通过其内容分发网络发送。我需要做的就是创建一个帐户，select 字体来自他们的网站，并在我的 HTML 中包含一些外部 javascript 文件的代码。这种方法的一个缺点是我不能再使用自己的字体，而且 Adobe Typekit 提供的 Chinese/Japanese 字体范围似乎有限。幸运的是，我能够找到适合我需要的字体。此外，我仍然会遇到一定程度的 FOUT，但我认为目前这对我来说不是什么大问题。不过，仍然希望将来有一个开源解决方案。

在 HTML/CSS 中加载自定义 Chinese/Japanese 字体是否有比 @font-face 更快的方法？

Is there a faster way of loading custom Chinese/Japanese fonts in HTML/CSS than @font-face?

html

css

fonts

cjk