Front-end Chinese fonts make me cry just talking about it, and can drive obsessive-compulsive designers and obsessive-compulsive front-end designers to death.
My personal experience with Chinese fonts under various font rendering engines is as follows:
字体选择
GDI Grayscale
GDI Cleartype
DirectWrite
Quartz(iOS)
Quartz(Mac)
MacType
serif
锯齿 （中易宋体）
锯齿 （中易宋体）
锯齿 （中易宋体）
尚可 （华文细黑）
字重过小 （宋）
尚可(宋体)
sans-serif
锯齿 （中易宋体）
锯齿 （中易宋体）
锯齿 （中易宋体）
尚可 （华文细黑）
尚可 （华文细黑）
尚可(宋体)
中易宋体
锯齿
锯齿
锯齿
默认无
默认无
尚可
中易黑体
锯齿，变形
锯齿
锯齿
默认无
默认无
尚可
微软雅黑
无法辨认
尚可
尚可
尚可
尚可
字重过大
冬青黑
无法辨认
x-height失常
x-height失常
很好
很好
x-height失常 字重过大
Under the current situation, it is still necessary to comprehensively consider the number of users of each UA and the corresponding common font sets.
For example, Microsoft Yahei cannot be viewed under XP, but the number of users who take the initiative to install Microsoft Yahei is still very small. If they know how to do this, the system will probably be upgraded. (In order to take care of these users, Renren’s approach is to distinguish UA with JS and then overwrite font-family设置)
As for users who use Xinheidi, I don’t think they can be considered. The threshold of 30,000 yuan for personal authorization fees has already made the number of users who have Xinheidi sufficiently small that they cannot be considered on the front end.
On a practical level, my commonly used font-family is set like this, which is not very good-looking, but not too ugly (the English font settings in the front have been omitted):
"Microsoft YaHei", "Hiragino Sans GB", sans-serif
You can read this in detail for the reason.
Personally, I think the most ideal screen font is Lanting Fine Black, which is within the acceptable range under various rendering engines (except for MacType, the font weight of any font rendered by MacType is too large).
If the amount of Chinese characters is small and the content is not created by users, you can consider webfont. After using sfntly to find the subset, the size of the Chinese font will be at an acceptable level. Of course, you must hold the copyright of webfont.
A specific example is a certain version of the official website of Xiaomi 4. Their font used Lanting Super Fine Black (it was eventually replaced, probably because the horizontal lines would break under GDI Grayscale. There was no way, it was too thin).
Want to know what font rendering engine your UA is? I did some sorting before:
I will write an article "Typography on the front end", so stay tuned.
Under the premise that there is no perfect cross-platform and cross-user Chinese font, the best solution is not to set a Chinese font and let the system, browser, and users choose.
First of all, no matter whether the system default font is good or bad, the fonts that users see every day will also appear on your website, at least it will not cause resentment. Moreover, even if the default font of the operating system is not good-looking, at least it will not be acclimatized.
Secondly, I believe that many users who care about font rendering effects will adjust the system's default fonts and their effects for the best. At this time, it is still best to let the system make its own choices.
However, if the font is set manually:
First of all, those users who don’t care about the default font may not notice that the font has changed, so they are neither flattering nor worse;
Secondly, for users who care about fonts, the fonts may get better or worse, and the latter is more likely because it is difficult to adjust.
To sum up, manually setting Chinese fonts on the front end is basically a thankless task.
Even if set, common default fonts should not appear, such as Chinese Heilongjiang, Microsoft Yahei, and Zhongyi Songti, because if such fonts take effect, they will either take effect originally or take effect in places where they should not take effect. Setting They are unnecessary.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Front-end Chinese fonts make me cry just talking about it, and can drive obsessive-compulsive designers and obsessive-compulsive front-end designers to death.
My personal experience with Chinese fonts under various font rendering engines is as follows:
Under the current situation, it is still necessary to comprehensively consider the number of users of each UA and the corresponding common font sets.
For example, Microsoft Yahei cannot be viewed under XP, but the number of users who take the initiative to install Microsoft Yahei is still very small. If they know how to do this, the system will probably be upgraded. (In order to take care of these users, Renren’s approach is to distinguish UA with JS and then overwrite
font-family设置)As for users who use Xinheidi, I don’t think they can be considered. The threshold of 30,000 yuan for personal authorization fees has already made the number of users who have Xinheidi sufficiently small that they cannot be considered on the front end.
On a practical level, my commonly used font-family is set like this, which is not very good-looking, but not too ugly (the English font settings in the front have been omitted):
"Microsoft YaHei", "Hiragino Sans GB", sans-serifYou can read this in detail for the reason.
Personally, I think the most ideal screen font is Lanting Fine Black, which is within the acceptable range under various rendering engines (except for MacType, the font weight of any font rendered by MacType is too large).
If the amount of Chinese characters is small and the content is not created by users, you can consider webfont. After using sfntly to find the subset, the size of the Chinese font will be at an acceptable level. Of course, you must hold the copyright of webfont.
A specific example is a certain version of the official website of Xiaomi 4. Their font used Lanting Super Fine Black (it was eventually replaced, probably because the horizontal lines would break under GDI Grayscale. There was no way, it was too thin).
Want to know what font rendering engine your UA is? I did some sorting before:
I will write an article "Typography on the front end", so stay tuned.
Under the premise that there is no perfect cross-platform and cross-user Chinese font, the best solution is not to set a Chinese font and let the system, browser, and users choose.
First of all, no matter whether the system default font is good or bad, the fonts that users see every day will also appear on your website, at least it will not cause resentment. Moreover, even if the default font of the operating system is not good-looking, at least it will not be acclimatized.
Secondly, I believe that many users who care about font rendering effects will adjust the system's default fonts and their effects for the best. At this time, it is still best to let the system make its own choices.
However, if the font is set manually:
First of all, those users who don’t care about the default font may not notice that the font has changed, so they are neither flattering nor worse;
Secondly, for users who care about fonts, the fonts may get better or worse, and the latter is more likely because it is difficult to adjust.
To sum up, manually setting Chinese fonts on the front end is basically a thankless task.
Even if set, common default fonts should not appear, such as Chinese Heilongjiang, Microsoft Yahei, and Zhongyi Songti, because if such fonts take effect, they will either take effect originally or take effect in places where they should not take effect. Setting They are unnecessary.
I think the fonts in Jianshu are just fine, but many fonts look pretty good on Mac