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):
(Safari also displays boxes, like IE and Chrome.) In Firefox the title shows up correctly. Why am I getting boxes in the other browsers?
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.)
