Angular 12应用在特定移动端浏览器中文字显示为矩形问题咨询

• 核心原因是你引入的Google Fonts的Playfair Display字体默认只包含拉丁字符集，缺失你页面中用到的非拉丁字符（比如中文、特殊符号等）的字形，移动端浏览器在字体降级（fallback）机制失效或加载优先级异常时，无法渲染的字符就会显示为空白矩形，也就是常说的「豆腐块」。
• 额外触发条件：部分低版本移动端Chrome的字体加载逻辑存在缺陷，当使用display=swap参数时，字体加载完成前的兜底字体（这里你定义的是serif）如果也不包含对应字符字形，会优先保留占位的矩形而不是继续降级到系统默认可渲染字体，就出现了持续显示方块的问题。
• 该问题和Angular 12本身没有直接关联，属于Web字体兼容范畴的共性问题。

你可以按照优先级选择以下适配方案：

1. 指定Google Fonts加载对应字符集
   如果你的页面包含中文等非拉丁字符，在引入Google Fonts时追加subset参数指定需要的字符集，同时删除非必要的字重减少加载体积，示例修改后的引入代码：

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&display=swap&subset=chinese-simplified,latin');

2. 完善字体降级队列
   在字体栈中追加系统内置的兜底字体，确保外部字体加载失败/缺失字形时，能顺利降级到系统可渲染的字体，避免出现豆腐块，示例修改后的样式：

h1, .h1{ 
  font-size: 2.5rem; 
  font-family: 'Playfair Display', "PingFang SC", "Microsoft YaHei", serif; 
}

3. 针对低版本移动端Chrome优化字体加载逻辑
   可以移除display=swap参数，改成自定义的字体加载控制逻辑，监听字体加载状态，加载完成后再给对应元素添加应用自定义字体的类，避免兜底阶段的渲染异常。
4. 少量特殊字符转图片内嵌
   如果缺失的是个别特殊符号，直接切图内嵌到页面里，能完全规避跨设备字符渲染差异问题。

内容的提问来源于stack exchange，提问作者chadoulis