科技猎产品经理必备：H5页面设计法则
导语
H5页面设计基本手册系列，让设计者或项目管理人员深入了解H5制作上各个领域的基础知识，避免多走弯路。
本文讲述主题为：设计篇——如何避免因为字体侵权。 大家常用的微软雅黑，其实是方正名下的商用字体，平时不得用在产品、商业展示PPT、商业海报等场合中，否则就可能侵权。
以下整合出可能是最全的免费可商用字体，与应用方法，下载方式见文末。
一、字体的科普时间
你可能经常看到“方正××_GBK”这样的字体，却不一定知道GBK是什么。
其实，它是一种字体编码方式，每种编码会规定支持的字形数量。比如GBK支持20000多个文字，包括简体、繁体、西文和标点符号等多种字形；而且，不同版本的GBK支持的字数还不一样。
你试试能不能自己看懂下面这张图
同样是方正楷体，上面4种字体采取的编码标准不一样，所以支持的字数、字形也有差别。不能显示成楷体，就表示这种字体不支持这个字。
简单地说，有四个区别——
（1）楷体GBK字数最全，简繁体都Hold得住；
（2）楷体简体一遇到繁体就无能；
（3）楷体繁体会自动把简体转为繁体，但不支持繁体；
（4）楷體有时支持简体，有时支持繁体，而且个别字形不同。
楷體会这样，是因为它遵循的BIG-5编码，属于台湾、香港和海外地区通用的繁体编码标准，有些字的写法和内地不一样。
换句话说，楷体GBK通用性最强；
楷体繁体能让你一键转繁体，方便内地人与港澳台同胞交流；
如果你的受众是台湾、香港用户时，最好用楷體，使用他们常用的正体字/繁体字/异体字。
二、免费可商用的字体
1、思源黑体
思源黑体，Adobe和谷歌针对中日韩推出的开源字体，严格意义上来说只有一种字体，但字重（字体粗细程度）分7个层级。
这套字体美观性比较强，包含内地（SC）、港澳台（TC）两个版本， 并针对常规、粗体两种字体推出了HW（等宽）版本，主要是英文字形上的差异，文字宽度一致。
强烈建议下载黑体、黑體两种，很多简体字的字形不一样，各有各的优势。
比如上面是新京报用iH5做的720度全景H5 ，右侧是把文字全部用思源黑体替换的效果。
你可以看到，只是简单地调整了字宽、字高、字距、字体颜色，设计感就能很强烈。
[适用类型]
比较方正、边缘平滑的版式，比如以几何图形为主的设计，标题字、正文字体都适用。
[示例H5]
- 2016年改变世界的15大科技成果，都在这里（By新京报社，iH5作品）
- 对学霸来说，拿A挺难的（By Joy_Long，iH5作品）
- 《时空探寻》发现之旅（By有有的爱，iH5作品）
2、思源宋体
接下来就是这几天的业界喜讯，思源宋体的发布了！
依然是Adobe和Google发起的开源项目，依然一次性面向中日韩，依然保留7种字重。
[适用类型]
图形边缘不太规则的版式，比如光雾电等，适合用在标题字、短文案上。
[示例H5]
- 独生子女的木偶人生（By 网易沸点工作室，开发作品）
- 【凤起潮鸣】十门之内，尊贵有别（By 蓝国智联，iH5作品）
3、庞门正道标题体
庞门正道阿门发起的公益项目，引用阿门的一句话表明他们对这套字体的态度：“不限时，不限量，不收费，随便用！”
这套字体由字游空间的设计师花费多个月设计完成，字形比较扁平、圆滑，设计的可塑性很强。
[适用类型]
比较方正或带弧形设计的版式，常用于字体的再造（字形的重新设计），适合用作海报、H5的标题字。
4、文泉驿系列
说到中文字体开源的鼻祖，学者房骞骞2004年发起的公益项目——文泉驿应该算一个，开源、允许商业发布。
据说发起这个项目，初衷是改善当时高质量中文字体匮乏的情形，以适应Linux系统开发。字体不多，但支持的字很全。
[适用类型]
比较方正、边缘平滑的版式，适合字号中等或较小的短文案、正文字体。
[示例H5]
- 这16个群聊记录燃爆朋友圈，看你错过了什么？（By 新京报社，iH5作品）
5、站酷系列
截止目前有4种字体，都是 免费授权全社会使用，允许商用 。
站酷高端黑、站酷快乐体、站酷意大利体、站酷酷黑体分别由胡晓波和刘兵克、刘兵克、大猫Addic、胡晓波发起。有些是站酷设计师自发组织的群体设计成果，可能高达100多人参与制作。
也有个人设计师推出的字体， 比如郑庆科的黄油体 。
[适用类型]
比较方正、边缘平滑的版式，常用于字体重设计，适合用在标题字、短文案上。
[示例H5]
- 雪佛兰迈锐宝XL开拓功能场景营销新领（By 腾讯智慧，iH5作品）
- 魄罗闪现英雄联盟快闪店（By 英雄联盟，开发作品）
- 告别暑假瘫，答题赢优惠（By 江涣，iH5作品）
6、方正系列
方正对外提供四款免费字体，楷体、黑体、仿宋、书宋，可以商业发布，只要不进行转换、改编、传播。
除书宋体外，都支持GBK（简繁扩展）、BIG-5（港澳台）、GB12345-90（大陆繁）、GB2312-80（大陆简）四种编码。
[适用类型]
非常标准的常用字体。方正楷体、仿宋、书宋适合带弧形的版式，用于正文字体时必须注意线形太细会否影响阅读；黑体和文泉驿正黑适用类型相近。
[示例H5]
- 中国网邀你踏诗前行（By 中国互联网新闻中心，iH5作品）
- 《一带一路纪念册》中国金币总公司出品（By CIT，iH5作品）
7、Font Space
Font Space有很全的字体，都是用户自己上传的，截至2017年3月有21款免费可商用的字体（包含2款文泉驿中文）。
英文就26个字母，我们动辄就得开发上万个字形，门槛还是差很多的。但设计中有一些英文字体装饰，也很有用。
[示例H5]
- Come crack secrets of China's longest manned spacemission（By 中国日报网，iH5作品）
8、Arual
最后推荐一款广告人爱用的英文字体，Arual。
这是国外一个设计师学生时期开发的字体，虽然简单但实用性很强。
三、字体安装攻略
（1）Windows系统：将字体文件复制到C:\WINDOWS\Fonts 文件夹即可（Win7以上版本选中文件，右键可以直接安装）。
（2）MAC OS系统：点击菜单栏—>前往—>应用程序—>字体册，将字体文件复制到字体册中。
可惜的是，现在还没有开源的中文书法体。
据说前些年宝洁、暴风被方正状告，赔了几百万还是几千万……最近字体商又开始频频发律师函了，一个字体要罚好几万啊！而且连微软雅黑都是方正的……
我们还没申请到专项费用的，还是先乖乖用免费的吧！
以上字体下载请戳： http://pan.baidu.com/s/1kVyV5oN
