使用移动浏览器浏览 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 字符。