浏览器如何处理“豆腐”字符

Question

字符。我在自己创建的Cordova / Android混合应用程序中使用Orbitron font，这很简单，因为它紧凑且具有我追求的简洁，未来主义的外观。但是，不久之前，我意识到Orbitron是一种相当有限的字体，仅支持基本的拉丁字符集。

我正准备转而使用由Google创建的Noto *系列字体，所以不再有豆腐-豆腐是印刷者用来描述空白矩形的术语字体不适合显示的字形时显示的框。

将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中找到豆腐时，在这里默默地使用可靠的备用。我的问题

1. 这种豆腐替代品是如何发生的？
2. 依靠自动豆腐替代品还是可以的，建议使用一些明智的CSS和精心选择的字体家族来处理特定于语言的问题？

Answer 1

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

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

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

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

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