: How to make sure Chinese text is rendered in webpage? I'm making a webpage that's partly in Chinese. I use the UTF-8 encoding for all text. The page contains some parts that are in Chinese,
I'm making a webpage that's partly in Chinese. I use the UTF-8 encoding for all text. The page contains some parts that are in Chinese, mixed with western letters. The font I use for western text doesn't have Chinese characters in it, so I want the Chinese font available on the users computer to be used for rendering the Chinese characters (btw Chinese fonts are super big and not suitable for downloading on the fly).
Can I just put the Chinese characters in the middle of the other text, and expect the browser to find a Chinese font to render them in (if I don't care which font it's rendered in), or should I specify the Chinese font in some way?
How should I specify the font for the Chinese text to make sure the users browser displays 你好 and not □□?
On my browser (Firefox 56.0) the example below renders the Chinese text correct (of course given that there's a Chinese font installed on the computer) in both <span>s. All Chinese text is rendered in the same font, so it looks like the browser in some way can find the font that has the glyphs that are being used in the text, even though I didn't specify the name of any font with Chinese glyphs ... Have no idea how that works :|
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<style>
span.serif {
font-family: "serif";
}
span.courier {
font-family: "courier";
}
</style>
</head>
<body>
<span class='serif'>123， wazzup? 一二三，你好嗎？</span><br />
<span class='courier'>123， wazzup? 一二三，你好嗎？</span>
</body>
</html>
The above is rendered like this on my computer:
More posts by @LarsenBagley505
2 Comments
Sorted by latest first Latest Oldest Best
If the specified font doesn’t contain a glyph for a character, browsers typically use a fallback font to render this character.
(Browsers don’t have do this, of course, and how it exactly works might also depend on the operating system. But it would be really suprising if there were browsers that don’t use fallback fonts. Not to mention that there are many user-agents that don’t even support CSS, e.g., text browser, feed readers, etc.; for them you couldn’t even specify a font to begin with.)
If no suitable font is found, a "replacement glyph" (aka. "tofu"; often, but not necessarily, something like "□") will be displayed for this character.
The algorithms defined by CSS:
CSS 2.1 (REC from 2011):
Font matching algorithm
CSS Fonts Module Level 3 (CR from 2013):
Font Matching Algorithm
CSS 2.2 (WD from 2016):
Font matching algorithm
CSS Fonts Module Level 4 (WD from 2017):
Font Matching Algorithm
So unless you know of a user-agent that doesn’t handle it, I wouldn’t worry about it. But, ideally, always use the lang attribute (in this context, it could help browsers "to select language-appropriate fonts" as fallbacks).
If you care about visual harmony, you might be interested in font families like Noto or Ubuntu. They try to cover all languages/scripts, rendering them in a visually compatible way (e.g., same height etc.).
Create a block for Chinese text using the attributes html, for example p, or em, or strong, or span or something similar. Apply the lang element to indicate the language of the created block. Info W3 about ISO Language Codes. In your case it will be lang=zh. Note that you can specify a subset for the Chinese language, for example for Chinese (Simplified) = zh-Hans, for Chinese (Traditional) = zh-Hant. Also you can specify / localize the country for your Chinese words - info UN about Language-Territory Information. For example, Chinese for Singapore lang=zh-SG.
Apply HTML entity encoder/decoder for your Chinese words. Your first Chinese word will be coded as 你好嗎. These coded characters will show any browser, regardless of the encoding.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.