|English Name||Chinese Name|
My aim is to determine whether or not Browsers can select and use fonts by their, in this case, Chinese names. Here is the relevant html code:
<p style="font-family:'HanziPen SC'">
1b 拉夫堡，莱斯特，伦敦。</p><hr />
<p style="font-family:'Wawati SC'">
2b 拉夫堡，莱斯特，伦敦。</p><hr />
<p style="font-family:'Xingkai SC'">
3b 拉夫堡，莱斯特，伦敦。</p><hr />
<p style="font-family:'Yuppy SC'">
The text is in pairs labelled a and b. A Browser that recognises both the English and Chinese names for a font will render a and b text identically as it will be using the same font. A Browser that does not recognise the Chinese name will use a substitute font and hence a and b text will appear differently. It is expected that a Browser will always recognise an English font name but, as will demonstrated, Chinese font names are often not recognised. Figure 1 shows correct Browser behaviour and Figure 2 shows incorrect browser behaviour.
|Figure 1: Correct Browser Behaviour, strings a and b rendered with same font|
|Figure 2: Incorrect Browser Behaviour, strings a and b rendered with different fonts|
I tested with Chrome (31.0.1650.63), Firefox (v26.0) and Safari (v7.0.1). Test OS was OSX Mavericks 10.9.1. Only Firefox worked correctly!!! My OSX localization for the tests was English. I did switch my OSX to Chinese and repeated my tests but the results were the same.
Here is what W3C have to say in CSS Fonts Module Level 3 w3.org/TR/css3-fonts/#font-family-prop: "Some font formats allow fonts to carry multiple localizations of the family name. User agents must recognize and correctly match all of these names independent of the underlying platform localization, system API used or document encoding"
So, in due course, all Browsers should work with all Localized Font Names. As evidenced by my tests, that is not yet the case. So, what do we do in the meantime. I am with Kendra Schaefer's (www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/) recommendations, which is to include all the Localized Font names in the font-family declaration eg
font-family: "Yuppy SC", "雅痞-简", sans-serif;