特殊字体的处理方式
设计稿的处理中,有些字体只有设计师有,需要前端拓展了系统字库才能显示正确的效果。
对于前端页面使用的用户,可能系统中没有这些字体,因此无法完全展现正确的效果。
解决方案
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