Chinese Language Stack Exchange is a question and answer site for students, teachers, and linguists wanting to discuss the finer points of the Chinese language. It only takes a minute to sign up.
Sign up to join this community
I have the line
<link href="https:/ /fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
to display a nice font for Chinese characters, which looks like brushed hanzis, but i need to display also pinyin with tone.
Some accents are not available with this line in CSS : font-family: 'Ma Shan Zheng', cursive;
Pinyin-friendly sans serif faces at Google Fonts
As of January 9, 2018, Google Fonts had 848 font families, 134 of which are sans serif faces. Of those, 22 can handle Hanyu Pinyin with tone marks.
Find some pinyin text (or go to Google Translate and paste some Chinese text and copy the pinyin output) and paste it into the "Custom" text field of the Google Fonts page (Your sample text should contain all four tone marks.) Then scroll through the fonts and see which one can display the pinyin text without boxes. Those fonts should be safe.
A screenshot of what this should look like. If you see boxes instead of tonemarked letters, those fonts won't work.
UPDATE
I have to update this answer, because to go safe, you should make sure that your sample text contains all possible diacritic characters used for pinyin, using just any random text won't do. Since the critical part of pinyin is really just the glyphs that contain diacritic marks, instead of random sample text use this:
āēīōūǖáéíóúǘǎěǐǒǔǚàèìòùǜü
This should contain all four tones and the character ü (in neutral tone, though I can't name an actual character that would need it.)
