css网页字体选择设置
无衬线字体对于屏幕展示更加友好一些,奈何网页字体怎么展示还是更依赖于用户的设备字体情况(web font按下不表),所以Web网页对中文字体的设置需要尽可能保证在不同系统(OSX/iOS/Android/Windows/Linux~)上都有不错的表现效果。
上代码
1 |
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei","WenQuanYi Micro Hei",Tahoma,Simsun,sans-serif; |
参阅 AlloyTeam的方案 ,主要思路就是优雅降级展示。
随着设备和厂商技术的升级可以考虑使用新的设置方案:
预览图

CSS Code:
1 |
font-family: -apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif |