7

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:

enter image description here

  • 1
    I found the following article a pretty interesting (and possibly helpful) article in relation to using english and chinese fonts. kendraschaefer.com/2012/06/… I'm not affiliated with the site at all – Bronwyn V Oct 16 '17 at 23:15
  • "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" Did you try? I do the same with Thai font and it works. Some font set has both Thai and Latin maybe is the same for Chinese. – Massimiliano Rubino Oct 17 '17 at 9:52
  • 1
    @MassimilianoRubino Yes, it does work, but I'd like to understand why so I can predict in which situations it will work and in which not. Updated with an example btw. – PetaspeedBeaver Oct 17 '17 at 11:36
  • My idea isn't the best but it may work if your guests don't care about bandwidth. put all chinese text in an image and show that image on your page instead of text. – Mike Oct 18 '17 at 0:42
  • 1
    @MassimilianoRubino Is that really so, that the font has to have glyphs for both languages for that to work? I'm dubious since I'm pretty shure that neither "courier" nor "georgia" or whatever font is used as "serif" has Chinese glyphs. – PetaspeedBeaver Oct 18 '17 at 11:03
3

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:

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.).

0
  • 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 &#x4F60;&#x597D;&#x55CE;. These coded characters will show any browser, regardless of the encoding.
  • 1
    Interesting points, but you don't address the thing with fonts and why my example is rendered as it is (with Chinese characters being rendered correct despite that I set the "wrong" fonts without Chinese characters ...) How about that :) – PetaspeedBeaver Oct 18 '17 at 11:06
  • Please give more details. – nikant25 Oct 19 '17 at 7:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.