CODEWITHSUNDEEP
htmlunicode
Herb Caudill
Herb Caudill

Reputation: 49992

Unicode HTML titles displaying as boxes in IE, Chrome

Here's my HTML (see also http://www.caudillweb.com/test/test.htm ). 

<!DOCTYPE html >
<html>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
     <title>日历</title>
   </head>
   <body>
      <h1>日历</h1>
   </body>
</html>

Here's what I see in IE, Chrome, and Firefox respectively (note the page title):

enter image description here

enter image description here

enter image description here

(Safari also displays boxes, like IE and Chrome.) In Firefox the title shows up correctly. Why am I getting boxes in the other browsers?

Upvotes: 2

Views: 2468

Answers (1)

bobince
bobince

Reputation: 536587

In IE and Chrome, the title bar and tabs are drawn by the standard OS window controls. As such they are rendered with the OS's selection of available fonts and font-fallback mechanisms, instead of the web browser's font renderer that is used for in-page content(*).

Web browser font rendering tends to be better at finding fallback fonts for different characters than the more conservative OS font rendering.

Firefox is different because it implements the user interface using its own widget code (XUL) instead of using native OS controls.

However your test page's title renders fine for me in a vanilla Windows 7 install, using the Chinese fonts that are installed by default. There may be something about your selection of installed fonts that causes the failure (and Firefox using a non-ClearType font in that tab).

(*: some browsers may use OS widgets for some in-page content, typically the <select> element. This then suffers from the same problem.)

Upvotes: 2

Related Questions