浏览器如何处理“豆腐"?人物 [英] How do browsers deal with "Tofu" characters
问题描述
字符.我在我创建的混合Cordova/Android应用中使用 Orbitron字体因为它紧凑且具有我所追求的干净，未来主义的外观.但是，我不久前才意识到Orbitron是一种相当有限的字体，仅支持基本的拉丁字符集.
character. I am using the Orbitron font in a hybrid Cordova/Android app that I am creating - quite simply because it is compact and has the clean, futuristic look that I am after. However, I realized not so long ago that Orbitron is a rather limited font with support for little more than the basic latin character set.
我正准备转而使用由Google创建的Noto *系列字体，所以不再有豆腐-豆腐是印刷商用来描述空白矩形的术语字体不适合显示的字形时显示的框.
I was about to embark on a switch to the Noto * family of fonts that have been created by Google so there is No more Tofu - tofu beign the term used by typographers to describe the blank rectangular box that appears when a font does not have a suitable glyph to display.
将Noto Sans，Noto Sans Naksh(阿拉伯语)和Noto Sans CJK(远东)字体家族整合到我的应用中会增加字体大小，因此我决定首先在Windows上的Chrome浏览器中进行一项实验(暂时进行了一段时间) Android在其混合应用程序中使用的WebView源自Chrome，因此该测试具有代表性.
Incorporating the Noto Sans, Noto Sans Naksh (Arabic) and Noto Sans CJK (Far Eastern) font families in my app would add to to its size so I decided to do an experiment first in Chrome on Windows (for a while now the WebView used by Android in its hybrid apps is derived from Chrome so the test is fairly representiative.
我的测试标记如下所示.即使将Orbitron指定为默认的 important 字体，Chrome仍可以很好地显示"Hello World！"的文本.西班牙语(Orbitron没有西班牙语反感叹号)，阿拉伯文，简体中文，日文和中文.泰米尔语(所有在Orbitron中都不存在).
My test markup is shown below. Even with Orbitron being specified as the default important font Chrome does a perfectly good job of showing the text for "Hello World!" in Spanish (Orbitron does not have the Spanish inverted exclamation mark), Arabic, Simplified Chinese, Japanese & Tamil (all not present in 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中找到豆腐时，在这里默默地使用可靠的备用.我的问题
Clearly, Chrome is silently using a reliable fallback here when it finds Tofu in Orbitron. My questions
- 这种豆腐替代品是怎么发生的?
- 依靠自动豆腐替代品还是可以的，还是建议您使用一些明智的CSS和精心选择的字体家族来解决特定于语言的问题?
推荐答案
在Chrome中，您可以检查元素，然后切换到计算"标签，它会显示渲染字体". Chrome浏览器(我认为大多数现代浏览器都将使用该字体显示所有受支持的字符，并且将默默使用本地字体显示其余字符.
In Chrome you can inspect the element, then switch into the "Computed" tab and it will show the Rendered Fonts. Chrome (and I think most modern browsers) will use the font for all characters that are supported, and will silently use a local font to display the remaining characters.
例如对于日语，它将使用"Yu Gothic"代表5个字形，使用"SimSun"代表3个字形.
E.g. for Japanese it will use "Yu Gothic" for 5 glyphs and "SimSun" for 3 glyphs.
对于泰米尔语，它使用"Orbitron"中的2个字形(空格和感叹号)，其余12个字形在"Nirmala UI"中呈现:
For Tamil it uses 2 glyphs from "Orbitron" (the space and the exclamation mark) and the remaining 12 are rendered in "Nirmala UI":
对于西班牙语，它仅渲染"Orbitron"，我不确定为什么，但是我猜它基本上使用现有的感叹号并对其进行旋转.
For Spanish it only renders "Orbitron", I'm not sure why, but I guess it basically uses the existing exclamation mark and rotates it.
所使用的本地字体文件可能会因浏览器和操作系统而异.
Which local font file is used can vary based on Browser and OS.
这篇关于浏览器如何处理“豆腐"?人物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
