css - 浏览器如何处理 "Tofu"字符

Question

Angular 色。我正在使用Orbitron font在我正在创建的混合 Cordova/Android 应用程序中 - 很简单，因为它很紧凑，并且具有我所追求的干净、 future 主义的外观。然而，不久前我意识到 Orbitron 是一种相当有限的字体，仅支持基本的拉丁字符集。

我正要开始转向由 Google 创建的 Noto * 系列字体，因此不再有 bean 腐 - bean 腐是打印师用来描述空白矩形的术语当字体没有合适的字形来显示时出现的框。

在我的应用程序中合并 Noto Sans、Noto Sans Naksh(阿拉伯语)和 Noto Sans CJK(远东)字体系列会增加其大小，因此我决定首先在 Windows 上的 Chrome 中进行实验(暂时) Android 在其混合应用中使用的 WebView 源自 Chrome，因此测试具有相当的代表性。

我的测试标记如下所示。即使 Orbitron 被指定为默认的重要字体，Chrome 也能很好地显示“Hello World!”的文本。西类牙语(Orbitron 没有西类牙语倒感叹号)、阿拉伯语、简体中文、日语和泰米尔语(Orbitron 中均不存在)。

*{font-family:orbitron !important;}

<link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">

<div id='english'>Hellá</div>
<div id='spanish'>¡Hola Mundo!</div>
<div id='arabic'>مرحبا بالعالم!</div>
<div id='sch'>你好，世界！</div>
<div id='jp'>こんにちは世界！</div>
<div id='tamil'>வணக்கம் உலகம்!</div>

显然，当 Chrome 在 Orbitron 中发现 Tofu 时，它正在悄悄地使用可靠的后备。我的问题

1. 这种 bean 腐替代品到底是如何发生的？
2. 是否可以依靠自动 Tofu 替换，或者是否建议使用一些明智的 CSS 和精心挑选的字体系列来处理特定于语言的问题？

Answer 1

在 Chrome 中，您可以检查该元素，然后切换到“计算”选项卡，它将显示渲染字体。 Chrome(我认为大多数现代浏览器)将为所有受支持的字符使用该字体，并会默默地使用本地字体来显示其余字符。

例如对于日语，它将使用“Yu Gothic”表示 5 个字形，“SimSun”表示 3 个字形。

对于泰米尔语，它使用“Orbitron”中的 2 个字形(空格和感叹号)，其余 12 个在“Nirmala UI”中呈现:

对于西类牙语，它仅呈现“Orbitron”，我不确定为什么，但我猜它基本上使用现有的感叹号并旋转它。

使用哪个本地字体文件可能因浏览器和操作系统而异。