CSS无需Webfont实现近似「微软雅黑Light」的字体效果

Posted 2020-06-13

在网页制作中，美观的字体能很大程度上提升一个网页的整体外观浏览效果（说白了就是提升逼格），但受各种因素的影响（例如中文字体应用Webfont的麻 烦），使开发者在制作过程中不得不使用“Web安全字体”，这使网页的外观效果大幅下降。今天在改模板的过程中偶然发现一个很笨的方法，实现近似微软雅黑 Light的字体效果。

实际上「微软雅黑Light」字体就是相对于「微软雅黑」字体较细，但是它的显示效果却要让人觉得舒适很多，只要字体不会太小，显示效果还是不错的。

所以直接用font-weight属性设置字体的粗细度就可以了，目前来看它的值为300时比较近似「微软雅黑Light」。

h1 {

  font-family:  "Microsoft YaHei";  

  font-weight:  300;

}