Here’s some text in Japanese: \u3053\u306e\u30bb\u30f3\u30c6\u30f3\u30b9\u306f\u65e5\u672c\u8a9e\u3067\u66f8\u3044\u305f\u3002<\/p>\n
Nothing strange so far, right?<\/p>\n
Here’s the same sentence in a If you’re using Google Chrome, you may not even see the sentence at all. It will, however, render when you view the source code.<\/p>\n Curious to know why some parts of my sites render Japanese text and others do not, I started inspecting elements with Japanese text in Chrome, enabling and disabling rules. When I disabled font-family<\/tt> rules specifying sans-serif fonts, the Japanese text re-appeared. Enabling the sans-serif rule made them disappear again.<\/p>\n <\/p>\n I’m running a Windows XP machine, and when I opened up the Character Map to see what extended characters Helvetica supports, I saw a sea of dots. Verdana and Arial supported extended Western characters but no Asian characters. (Arial Unicode MS does support Asian characters.)<\/p>\n It looks like Chrome is pretty literal about how it renders fonts — if it encounters a character the font doesn’t support, it’s not going to render it. In fact, it won’t even bother trying to render an analogous sans-serif Japanese font.<\/p>\n Here’s our same example sentence with a Firefox and Internet Explorer look like they substitute fonts to render sans-serif Japanese text, probably falling back on MS PGothic.<\/p>\n If you want a mix of English and Japanese text to render with a sans-serif font in Google Chrome, it looks like you have to specify those sans-serif fonts in your CSS.<\/p>\n Example: This sentence mixes \u65e5\u672c\u8a9e and \u82f1\u8a9e with Arial MS Unicode and MS PGothic specified in the font-family<\/tt>.<\/span><\/p>\n Of course, this means your English text is also rendered in Arial Unicode MS or MS PGothic, which pales next Helvetica. And Mac users? Well, that’s an entire cross-platform can of worms I haven’t even tested.<\/p>\n UPDATE, 06\/01\/2010, 0917:<\/strong> Of course, this site uses UTF-8 for character encoding. If a site uses Shift-JIS or EUC-JP, these problems may not be an issue.<\/p>\n Also, the examples may not adequately demonstrate the sans-serif issue, so here are more examples using Sans-serif specified in Helvetica and sans-serif specified in font-family<\/tt>:<\/p>\n MS PGothic specified in font-family<\/tt>:<\/p>\n Arial Unicode MS specified in font-family<\/tt>:<\/p>\n Firefox falls back on MS PGothic in the Helvetica example. Internet Explorer falls back on a serif Japanese font. Chrome does not render it.<\/p>\n<span\/><\/code> tag with a style<\/code> attribute specifying Helvetica, Verdana and Arial fonts: \u3053\u306e\u30bb\u30f3\u30c6\u30f3\u30b9\u306f\u65e5\u672c\u8a9e\u3067\u66f8\u3044\u305f\u3002<\/span><\/p>\nstyle<\/code> attribute specifying a sans-serif font-family<\/code>: \u3053\u306e\u30bb\u30f3\u30c6\u30f3\u30b9\u3092\u66f8\u3044\u305f\u3002<\/span><\/p>\n<h1\/><\/code>.<\/p>\nfont-family<\/code>:<\/p>\n\u65e5\u672c\u8a9e<\/h1>\n
\u65e5\u672c\u8a9e<\/h1>\n
\u65e5\u672c\u8a9e<\/h1>\n
\u65e5\u672c\u8a9e<\/h1>\n