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

Question

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

\n\n

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

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

*{font-family:orbitron !important;}

\r\n

<link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">\r\n\r\n<div id=\'english\'>Hell\xc3\xa1</div>\r\n<div id=\'spanish\'>\xc2\xa1Hola Mundo!</div>\r\n<div id=\'arabic\'>\xd9\x85\xd8\xb1\xd8\xad\xd8\xa8\xd8\xa7 \xd8\xa8\xd8\xa7\xd9\x84\xd8\xb9\xd8\xa7\xd9\x84\xd9\x85!</div>\r\n<div id=\'sch\'>\xe4\xbd\xa0\xe5\xa5\xbd\xef\xbc\x8c\xe4\xb8\x96\xe7\x95\x8c\xef\xbc\x81</div>\r\n<div id=\'jp\'>\xe3\x81\x93\xe3\x82\x93\xe3\x81\xab\xe3\x81\xa1\xe3\x81\xaf\xe4\xb8\x96\xe7\x95\x8c\xef\xbc\x81</div>\r\n<div id=\'tamil\'>\xe0\xae\xb5\xe0\xae\xa3\xe0\xae\x95\xe0\xaf\x8d\xe0\xae\x95\xe0\xae\xae\xe0\xaf\x8d \xe0\xae\x89\xe0\xae\xb2\xe0\xae\x95\xe0\xae\xae\xe0\xaf\x8d!</div>

\r\n

\r\n

\r\n

\n\n

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

\n\n

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

\n

Answer 1

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

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

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

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

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