Mot NATO, for fred


July 6, 2023

Chinese typesetting for the WWW

This document contains a presentation of selected Chinese fonts suitable for webpages, along with brief descriptions and download URLs. Some URLs presented here link to fonts that are free to use for all purposes, some link to fonts that free to use for non- commercial purposes only, and some link to fonts that are commercially available only.

Apple built-in Chinese fonts

All Apple systems ship the PingFang font (six weights, simplified and traditional characters), and lets face it, it is not a terribly exciting font to work with if you are doing Chinese layout:

PingFang SC Ultralight
苹方简体
PingFang SC Thin
苹方简体
PingFang SC Light
苹方简体
PingFang SC Regular
苹方简体
PingFang SC Medium
苹方简体
PingFang SC Semibold
苹方简体

The Stylesheet code for the above looks like the following: (Remember, no font source URL is required, since this font is shipped with all Apple systems. Helvetica Neue, Arial, and sans-serif are used as fallbacks for non-Apple systems.)

.PingFangSCUltraLight { font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-weight: 100; } .PingFangSCThin { font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-weight: 200; } .PingFangSCLight { font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-weight: 300; } .PingFangSCRegular { font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-weight: 400; } .PingFangSCMedium { font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-weight: 500; } .PingFangSCSemibold { font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-weight: 600; } @font-face { font-family: 'PingFang SC'; font-weight: 1 999; font-stretch: 75% 100%; /* Adjust the stretch range as needed */ font-style: normal; }

The corresponding HTML part of the code looks like this:

<div class="PingFangSCUltraLight"> <font size="20"> PingFang SC Ultralight<br> 苹方简体 </font> </div> <div class="PingFangSCThin"> <font size="20"> PingFang SC Thin<br> 苹方简体 </font> </div> <div class="PingFangSCLight"> <font size="20"> PingFang SC Light<br> 苹方简体 </font> </div> <div class="PingFangSCRegular"> <font size="20"> PingFang SC Regular<br> 苹方简体 </font> </div> <div class="PingFangSCMedium"> <font size="20"> PingFang SC Medium<br> 苹方简体 </font> </div> <div class="PingFangSCSemibold"> <font size="20"> PingFang SC Semibold<br> 苹方简体 </font> </div>

While the difference between the Medium weight and the Semibold weight is almost indescernable, this font does not come with a heavy weight for the really fat headings. If you need to typeset a really fat heading the PingFang font simply won't do.

You may change the font size and font color as to your liking in the HTML part of the code. The above serves as an example of how to code for any built-in Apple font - here is a list of all fonts shipped with Apple systems:



The rest of this article is for subscribers only. Contact the Editor in order to subscribe.