使用移动浏览器浏览 Angular 12 个应用时出现矩形而不是字母
Rectangles instead of letters when browsing Angular 12 app using mobile browser
我在 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; }
谁能告诉我问题的技术根源并提出最佳解决方案？
根本问题是用于显示文本的字体不支持文本中的所有字符。当字体不支持某个字符时，将使用“.notdef”字形（字形 0），并且在许多看起来像图片中显示的矩形的字体中。
您似乎在向 Google 字体请求 Playfair Display 字体。根据 Google 该字体 glyph repertoire 的文档，它不支持希腊文字中的字符。
但是，您显示的图像根本不是 Playfair Display！尽管如此，无论浏览器 select 使用何种字体，都会出现矩形，因为该字体不支持这些字符。
比较有意思的问题是：
- 为什么没有使用 Playfair Display？
- 浏览器使用什么字体select？
- 为什么浏览器 select 为第一种字体（字体后备）不支持的字符编辑另一种字体？
特别是最后一个问题：对于 Android 上的 Chrome，通常会使用 Noto（“没有豆腐！”）字体来避免显示任何矩形（又名豆腐块）。您没有给出显示的实际字符串，因此可能这些不是典型的希腊字符，而是给定设备上的 Noto 字体不支持的一些不常见的 Unicode 字符。
我在 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; }
谁能告诉我问题的技术根源并提出最佳解决方案？
根本问题是用于显示文本的字体不支持文本中的所有字符。当字体不支持某个字符时，将使用“.notdef”字形（字形 0），并且在许多看起来像图片中显示的矩形的字体中。
您似乎在向 Google 字体请求 Playfair Display 字体。根据 Google 该字体 glyph repertoire 的文档，它不支持希腊文字中的字符。
但是，您显示的图像根本不是 Playfair Display！尽管如此，无论浏览器 select 使用何种字体，都会出现矩形，因为该字体不支持这些字符。
比较有意思的问题是：
- 为什么没有使用 Playfair Display？
- 浏览器使用什么字体select？
- 为什么浏览器 select 为第一种字体（字体后备）不支持的字符编辑另一种字体？
特别是最后一个问题：对于 Android 上的 Chrome，通常会使用 Noto（“没有豆腐！”）字体来避免显示任何矩形（又名豆腐块）。您没有给出显示的实际字符串，因此可能这些不是典型的希腊字符，而是给定设备上的 Noto 字体不支持的一些不常见的 Unicode 字符。