一首先我们看看各平台的默认字体情况
1Window 下:
宋体 (SimSun):Win 下大部分游览器的默认字体, 宋体在小字号下(如 12px14px) 的显示效果还可以接受, 但是字号一大就非常糟糕了, 所以使用的时候要注意
微软雅黑("Microsoft Yahei"): 从 Vista 开始, 微软提供了这款新的字体, 一款无衬线的黑体类字体, 并且拥有 RegularBold 两种粗细的字重, 显著提高了字体的显示效果现在这款字体已经成为 Windows 游览器中最值得使用的中文字体从 Win8 开始, 微软雅黑又加入了 Light 这款更细的字重, 对于喜欢细字体的设计开发人员又多了一个新的选择
Arial:Win 平台上默认的无衬线西文字体(为什么要说英文字体后面会解释), 有多种变体, 显示效果一般
Tahoma: 十分常见的无衬线字体, 被采用为 Windows 2000Windows XPWindows Server 2003 及 Sega 游戏主机 Dreamcast 等系统的预设字型, 显示效果比 Arial 要好
Verdana: 无衬线字体, 优点在于它在小字上仍结构清晰端整阅读辨识容易
其他: Windows 下默认字体列表: 微软官网维基百科 Office 字体
结论: 微软雅黑为 Win 平台上最值得选择的中文字体, 但非游览器默认, 需要设置; 西文字体的选择以 ArialTahoma 等无衬线字体为主
2Mac OS 下:
华文黑体 (STHeiti) 华文细黑(STXihei): 属于同一字体家族系列, OS X 10.6 之前的简体中文系统界面默认字体, 也是目前 Chrome 游览器下的默认字体, 有 Regular 和 Bold 两个字重, 显示效果可以接受, 华文细黑也曾是我最喜欢的字体之一
黑体 - 简(Heiti SC): 从 10.6 开始, 黑体 - 简代替华文黑体用作简体中文系统界面默认字体, 苹果生态最常用的字体之一, 包括 iPhoneiPad 等设备用的也是这款字体, 显示效果不错, 但是喇叭口设计遭人诟病
冬青黑体( Hiragino Sans GB ): 听说又叫苹果丽黑, 日文字体 Hiragino KakuGothic 的简体中文版, 简体中文有 常规体 和 粗体 两种, 冬青黑体是一款清新的专业印刷字体, 小字号时足够清晰, 拥有很多人的追捧
Times New Roman:Mac 平台 Safari 下默认的字体, 是最常见且广为人知的西文衬线字体之一, 众多网页浏览器和文字处理软件都是用它作为默认字体
HelveticaHelvetica Neue: 一种被广泛使用的传奇般的西文字体(这货还有专门的记录片呢), 在微软使用山寨货的 Arial 时, 乔布斯却花费重金获得了 Helvetica 苹果系统上的使用权, 因此该字体也一直伴随着苹果用户, 是苹果生态中最常用的西文字体 Helvetica Neue 为 Helvetica 的改善版本, 且增加了更多不同粗细与宽度的字形, 共拥有 51 种字体版本, 极大的满足了日常的使用
苹方(PingFang SC): 在 Mac OS X EL Capitan 上, 苹果为中国用户打造了一款全新中文字体 -- 苹方, 去掉了为人诟病的喇叭口, 整体造型看上去更加简洁, 字族共六枚字体: 极细体纤细体细体常规体中黑体中粗体
San Francisco: 同样是 Mac OS X EL Capitan 上最新发布的西文字体, 感觉和 Helvetica 看上去差别不大, 目前已经应用在 Mac OS 10.11+iOS 9.0+watch OS 等最新系统上
其他: Mac 下默认字体列表: 苹果官网维基百科
结论: 目前苹方和 San Francisco 为苹果推出的最新字体, 显示效果也最为优雅, 但只有最新系统才能支持, 而黑体 - 简和 Helvetica 可以获得更多系统版本支持, 显示效果也相差无几, 可以接受
3Android 系统:
Droid SansDroid Sans Fallback:Droid Sans 为安卓系统中默认的西文字体, 是一款人文主义无衬线字体, 而 Droid Sans Fallback 则是包含汉字日文假名韩文的文字扩展支持
结论: Droid Sans 为默认的字体, 并结合了中英文, 无需单独设置
4iOS 系统:
iOS 系统的字体和 Mac OS 系统的字体相同, 保证了 Mac 上的字体效果, iOS 设备就没有太大问题
5Linux:
文泉驿点阵宋体: 类似宋体的衬线字体, 一般不推荐使用
文泉驿微米黑: 几乎是 Linux 社区现有的最佳简体中文字体
二选择字体需要注意的问题
1 字体的中英文写法:
我们在操作系统中常常看到宋体微软雅黑这样的字体名称, 但实际上这只是字体的显示名称, 而不是字体文件的名称, 一般字体文件都是用英文命名的, 如 SimSunMicrosoft Yahei 在大多数情况下直接使用显示名称也能正确的显示, 但是有一些用户的特殊设置会导致中文声明无效
因此, 保守的做法是使用字体的字体名称 (英文) 或者两者兼写如下示例:
2 声明英文字体:
绝大部分中文字体里都包含英文字母和数字, 不进行英文字体声明是没有问题的, 但是大多数中文字体中的英文和数字的部分都不是特别漂亮, 所以建议也对英文字体进行声明
由于英文字体中大多不包含中文, 我们可以先进行英文字体的声明, 这样不会影响到中文字体的选择, 因此优先使用最优秀的英文字体, 中文字体声明则紧随其次如下示例:
3 照顾不同的操作系统:
英文数字部分: 在默认的操作系统中, Mac 和 Win 都会带有 Arial, Verdana, Tahoma 等几个预装字体, 从显示效果来看, Tahoma 要比 Arial 更加清晰一些, 因此字体设置 Tahoma 最好放到前面, 当找不到 Tahoma 时再使用 Arial; 而在 Mac 中, 还拥有一款更加漂亮的 Helvetica 字体, 所以为了照顾 Mac 用户有更好的体验, 应该更优先设置 Helvetica 字体; Android 系统下默认的无衬线字体就可以接受, 因此无需单独设置最后, 英文数字字体的最佳写法如下:
中文部分: 在 Win 下, 微软雅黑为大部分人最常使用的中文字体, 由于很多人安装 Office 的缘故, Mac 电脑中也会出现微软雅黑字体, 因此把显示效果不错的微软雅黑加入到字体列表是个不错的选择; 同样, 为了保证 Mac 中更为优雅字体苹方 (PingFang SC) 黑体 - 简 (Heiti SC) 冬青黑体 ( Hiragino Sans GB ) 的优先显示, 需要把这些字体放到中文字体列表的最前面; 同时为了照顾到 Linux 操作系统的体验, 还需要添加文泉驿微米黑字体最后, 中文字体部分最佳写法如下:
中英文整合写法:
4 注意向下兼容
如果还需要考虑旧版本操作系统用户的话, 不得不加上一些旧版操作系统存在的字体: Mac 中的华文黑体冬青黑体, Win 中的黑体等同样按照显示效果排列在列表后面, 写法如下:
加入了 STXihei(华文细黑)和 SimHei(黑体)
5 补充字体族名称
字体族大体上分为两类: sans-serif(无衬线体)和 serif(衬线体), 当所有的字体都找不到时, 我们可以使用字体族名称作为操作系统最后选择字体的方向一般非衬线字体在显示器中的显示效果会比较好, 因此我们需要在最后添加 sans-serif, 写法如下:
三我们看一下大公司的常见写法
1 小米
小米公司优先使用 Helvetica Neue 这款字体以保证最新版本 Mac 用户的最佳体验, 选择了 Arial 作为 Win 下默认英文字体及 Mac 的替代英文字体; 中文字体方面首选了微软雅黑, 然后选择了冬青黑体及黑体 - 简作为 Mac 上的替代方案; 最后使用文泉驿微米黑兼顾了 Linux 系统
2 淘宝
淘宝网的导航及内容有着大量的衬线字体, 鉴于淘宝网站大部分字号比较小, 显示效果也还可以接受代码中可以看出淘宝使用了 TahomaArial 作为首选英文字体, 中文字体首选了冬青黑体, 由于 Win 下没有预装该款字体, 所以显示出了后面的宋体(5b8b4f53 为汉字宋体用 unicode 表示的写法, 不用 SimSun 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法)
3 简书
自认为简书的阅读体验很棒, 我们看看简书所用的字体, 简书优先选择了 lucida 家族的系列字体作为英文字体, 该系列字体在 Mac 和 Win 上都是预装的, 并且有着不俗的表现; 中文字体方面将冬青黑体作为最优先使用的字体, 同样考虑了 Linux 系统
各大公司的字体设置大同小异, 这里不再一一举例查看, 有兴趣的可以自己多多查看
四其他的一些注意点
1 字体何时需要添加引号
当字体具体某个取值中若有一种样式名称包含空格, 则需要用双引号或单引号表示, 如:
如果书写中文字体名称为了保证兼容性也会添加引号, 如:
2 引用外部字体
大多数的中文字体由于版权原因不能随意使用, 这里推荐一个免版权而且漂亮的中文字体思源黑体, 该字体为 Adobe 与 Google 推出的一款开源字体, 有七种字体粗细(ExtraLightLightNormalRegularMediumBold 和 Heavy), 完全支持日文韩文繁体中文和简体中文, 字形优美, 依稀记得小米公司好像有使用过
鉴于中文字体的体积比较大(一般字库全一点的中文字体动辄几 Mb), 所以较少人会使用外部字体, 如果真的需要引入, 也可以考虑通过工具根据页面文字的使用多少单独生成中文字体, 以减小文件大小
五最后, 推荐写法
由于每个人的审美不一样, 钟爱的字体也会有所有不同, 这里给出我个人的常用写法:
如需查看更多, 可点击进入原文
来源: http://www.qdfuns.com/article/35821/de7b8bae74c4321e75cb591d4122faf8.html