Dealing with Apple's Hiragino font-family, and various browsers available for OS X. The key is using the correct font-names for the various browsers. Firefox (upto Fx2.0.0.x), IE Mac and Opera will understand the font–family only if the (Japanese) QuickDraw name is used. Safari and Omniweb (and other applications or browsers using the WebCore rendering engine) need the full name of the font, but without the font-weight identifier. This can be found via the FontBook application. To get the text to display as bold, one has to specify it explictely in the stylesheet.
Gecko 1.9 switched to using ATSUI, and both the full name and the Japanese name are supported. Other browsers also improved their support for Japanese fonts since this research was first published. It is also no longer necessary to specifically add a font-family for bolding elements.
A simplified stylesheet for cross-browser usage follows
body {font-family:font-family: "Hiragino Kaku Gothic","ƒqƒ‰ƒMƒmŠpƒS Pro W3", sans-serif;}
h1, h2 {font-family:font-family: "Hiragino Mincho Pro", "ƒqƒ‰ƒMƒm–¾’© Pro W3", serif;font-weight:bold;}Related: Jpn-gothic and Jpn-mincho.
updated: September 12, 2007.
.kgw3 { font-family: "Hiragino Kaku Gothic Pro","ƒqƒ‰ƒMƒmŠpƒS Pro W3"; }
.kgw6 { font-family: "Hiragino Kaku Gothic Pro", "ƒqƒ‰ƒMƒmŠpƒS Pro W6";font-weight:bold;}
.kgw8 { font-family: "Hiragino Kaku Gothic Std", "ƒqƒ‰ƒMƒmŠpƒS Std W8"; }
.mgw4 { font-family: "Hiragino Maru Gothic Pro", "ƒqƒ‰ƒMƒmŠÛƒS Pro W4"; }
.mw3 { font-family: "Hiragino Mincho Pro", "ƒqƒ‰ƒMƒm–¾’© Pro W3"; }
.mw6 { font-family: "Hiragino Mincho Pro","ƒqƒ‰ƒMƒm–¾’© Pro W6";font-weight:bold;}
All screenshots are taken with Mac OS X 10.3.6