特殊字体的处理方式
设计稿的处理中，有些字体只有设计师有，需要前端拓展了系统字库才能显示正确的效果。
对于前端页面使用的用户，可能系统中没有这些字体，因此无法完全展现正确的效果。
解决方案
1.使用系统自带字体
字体是有版权的，比如微软雅黑，方正给微软的的授权是有限授权，即只可以在Windows上使用。即文字内容，在Windows上调用微软雅黑的形式显示没问题，但是如果把这个内容制作成图片，比如logo，就构成了侵权——未经授权使用方正的雅黑字体。
用户系统中自带的字体，不需要任何特殊支持的，这类也被成为web安全字体。这部分设计师可以放心采用。但是一个项目中的正文也是建议控制在一种常规字体，建议body里定义默认正文字体列表，而不是每个部分都需要单独查看字体定义字体。
操作系统的预装字体
Windows操作系统
黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋GB2312：FangSongGB2312
楷体GB2312：KaiTiGB2312
微软雅黑：Microsoft YaHei （Windows 7开始提供）
OS X操作系统
华文细黑：STHeiti Light （又名STXihei）
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
苹方：PingFang
如果用户安装了MicroSoft Office，则会多出以下字体：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei
CSS
约定了五种都会支持的字体，另外不同系统也会支持不同的字体.
serif
sans-serif
cursive
fantasy
monospace
Windows平台和Mac平台
Windows和Mac的中文字体没有交叉，因此应该同时为两个平台指定字体。
常见的做法，Windows平台指定微软雅黑，Mac平台指定华文细黑。
前端语法
font-family属性是多种字体的名称，作为一个"应变"制度，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体，它尝试下一个的字体。你想要的字体类型如果浏览器找不到，它会从通用的字体类型中找到与你相似的.代码语法如下:
body{font-family:PingFang SC,Source Sans Pro,Hiragino Sans GB,Helvetica Neue,Helvetica,Microsoft Yahei,arial,sans-serif;}
参考资料：
- 中文字体网页开发指南，阮一峰
- web字体规范，RobinsonZhang
网友评论