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

Question

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

我正要着手切换到由 Google 创建的 Noto * 字体系列，所以有 No more Tofu - tofu 是排字员用来描述空白矩形的术语当字体没有适合显示的字形时出现的框。

在我的应用程序中加入 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”，我不确定为什么，但我猜它基本上使用现有的感叹号并旋转它。

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