angular - 使用移动浏览器浏览 Angular 12 应用程序时使用矩形而不是字母

Question

我在 Angular 12 中开发了一个网站。使用桌面浏览器浏览时，一切正常。从某些特定的移动浏览器（例如，Android 11 中的 Chrome 95.0.4638.74）浏览时，HTML 文本中的一些字母会丢失，而是出现矩形，如下面的屏幕截图所示。

用于此标题的字体在 CSS 文件中描述为：

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
h1, .h1{ font-size: 2.5rem; font-family: 'Playfair Display', serif; }

谁能告诉我问题的技术根源并提出最佳解决方案？

标签： angularfonts

Answer 1

根本问题是字体被用来显示不支持文本中所有字符的文本。当字体不支持字符时，将使用“.notdef”字形（字形 0），并且在许多看起来像图像中显示的矩形的字体中。

您似乎正在从 Google Fonts 请求 Playfair Display 字体。根据谷歌关于该字体的字形曲目的文档，它不支持希腊文字中的字符。

但是，您显示的图像根本不是 Playfair Display！同样，无论浏览器选择何种字体，矩形都会出现，因为该字体不支持这些字符。

更有趣的问题是：

• 为什么不使用 Playfair Display？
• 浏览器选择了什么字体？
• 为什么浏览器没有为第一种字体不支持的字符选择另一种字体（字体回退）？

特别是最后一个问题：对于 Android 上的 Chrome，通常会使用 Noto（“no tofu！”）字体来避免显示任何矩形（又名豆腐块）。您没有给出实际显示的字符串，因此可能这些不是典型的希腊字符，而是给定设备上的 Noto 字体不支持的一些不常见的 Unicode 字符。