浏览器如何处理“豆腐"?人物 [英] How do browsers deal with "Tofu" characters

问题描述

字符.我正在创建的混合 Cordova/Android 应用程序中使用

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

对于西班牙语，它只呈现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.

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.

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.

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>

Clearly, Chrome is silently using a reliable fallback here when it finds Tofu in Orbitron. My questions

1. Just how does this Tofu substitution occur?
2. Is it OK to rely on automatic Tofu substitution or is it advisable to deal with language specific issues with some judicious CSS and a well selected font family instead?

解决方案

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.

E.g. for Japanese it will use "Yu Gothic" for 5 glyphs and "SimSun" for 3 glyphs.

For Tamil it uses 2 glyphs from "Orbitron" (the space and the exclamation mark) and the remaining 12 are rendered in "Nirmala UI":

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屋！