HTML字体选择

前言

说来惭愧，前端页面的字体选择我都是用常用的一行设置，其他地方用到也是直接拷贝。至于字体之间有什么区别、要用什么字体都没有研究过。有一天，老板在群里说有家企业因为微软雅黑商用被告了，让我们自查一下字体使用情况。当我看到页面里也基本使用了微软雅黑字体后，我慌了。

完蛋了，看来我们也要被告了！

于是我赶紧搜索这些字体是怎么回事。

当我看到这些字体都是系统自带的时候，终于松了一口气。

关于字体侵权

一般web页面使用字体的情况有3种：

1. font-family声明：没有问题
2. 通过font-face引用web-font

   • font文件在个人的服务器上： 涉及版权问题
   • font文件在其他人的服务器上, 这和第一种情况一样, 没有问题
   • font文件通过base64编码的方式写在个人页面文件的css文件中, 一样有版权问题

3. 图片中使用，涉及版权问题

大公司常用字体

• （小米官网）：

font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;

• （今日头条）：

font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,Helvetica Neue,Arial,sans-serif;

• （淘宝UED）：

font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

• (知乎)：

"Helvetica Neue","Helvetica","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","WenQuanYi Micro Hei","Arial",sans-serif

常用字体介绍

• 微软雅黑Microsoft YaHei：windows推出的一款字体，WIN7以上版本自带这种字体

  "Microsoft YaHei"：兼容性强，不会有编码的问题；
  "微软雅黑"：因为里面含有中文，所以有时候会出现乱码，导致字体失效

• 苹方PingFang SC：IOS/MAC系统内置字体

  font-family 编码分别为简：「PingFang SC」、繁：「PingFang TC」、港：「PingFang TC」。
  同时包含了六种字重：常规体、中等、细体、特粗体、特细体、粗体。

• 冬青黑体简体中文Hiragino Sans GB:简体中文字体，OS X 10.6开始系统自带

• 思源黑体Noto Sans SC：思源系列免费字体

  font-family分为中文、日文、韩文。 一共有7种字重：ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy 可通过link标签引入<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">

• 文泉驿微米黑WenQuanYi Micro Hei：Linux社区常用的简体中文字体

参考链接

1. 如何选择黑体
2. 为什么网站都使用黑体