关于font-family

先来看几个大的电商网站字体设置：

淘宝网

　　font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;

京东

　　font: 12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;

新浪微博

　　font: 12px/1.3 'Arial','Microsoft YaHei';

知乎

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

小米官网

　　font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

注： Hiragino Sans GB一种简繁结合的字体样式

这里没有列出查看的所有平台，通过总结，有以下几个共同点：

1.大部分font-family设置都以"sans-serif"、"serif"结束；

淘宝京东等网站都以"sans-serif"结束字体设置，根据w3c中描述

有两种类型的字体系列名称：

• 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
• 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。

 sans-serif(无衬线字体)和serif(衬线字体)

2.常用英文字体有：arial,tohama，常用中文字体有：宋体、微软雅黑、Hiragino Sans GB

注：淘宝网和京东使用unicode编码"\\5b8b\4f53"（宋体）是在一些情况下直接写中文字体名称会编译不出来，所以直接使用unicode编写格式。

arial&tohama&verdana字体比较

字体大小为12px时：

Arial   字体的样式 ZITIdeyangshi      123456789

Tahoma 字体的样式 ZITIdeyangshi      123456789

Verdana 字体的样式 ZITIdeyangshi  123456789

字体大小为18px时：

Arial   字体的样式 ZITIdeyangshi       123456789

Tahoma  字体的样式 ZITIdeyangshi      123456789

Verdana 字体的样式 ZITIdeyangshi  123456789

通过以上对比，看出两个特点：

● Arial和Tahoma的大写i,Tahoma更容易识别

● Verdana的字间距比其他两个稍微大一些

3.关于字体的一些总结

①font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。

②Mac OS X系统有一款比Tahoma更典雅的系统默认字体：Helvetica，非Mac系统的Helvetica字体都是Rip版。

③Arial是早期Windows英文系统的默认字体，XP和Vista上都是Tahoma。

④最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel，字体完全由用户自定义，针对这部分用户，sans-serif可能能派上用场。

⑤最后，无论在XP还是Vista下，不指定网页的中文字体时，默认就是宋体。

注：css字体样式级别 > 浏览器字体样式级别

注:如果不设置默认中文字体，那么用户手动修改流量器的默认字体设置时就会改变页面的字体样式，有利有弊，视具体情况自行选择。

 ====================================================================

关于手机系统字体

最近在做一个手机端项目，设计图使用的默认字体是“微软雅黑”，在设计图中有几个文字使用的是“宋体”，完成代码编写之后发现，ios上面的“宋体”文字显示还可以，可以看出是衬线字体，但是android手机里设置“宋体”样式的文字明显使用的是无衬线字体，于是乎就疯狂百度，查询出android\ios\winphone系统使用的默认字体：

系统	默认英文字体	默认中文字体	默认数字字体
android	Droid Sans	Droid Sans Fallback	Droid Sans
ios	Helvetica	Heiti SC	HelveticaNeue
winphone	Segoe	Dengxian(方正等线体)	Segoe

 

 

 

通过测试发现：使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别

总结：

• 各个手机系统有自己的默认字体，且都不支持微软雅黑
• 如无特殊需求，手机端可不设置中文字体，使用系统默认
• 英文字体和数字字体可使用 Helvetica ，三种系统都支持

 

写在文章末尾的话：

　　文章中一部分内容来自网络，如有侵权，请告知，必改之。

　　文章内容主要用于自身学习记录，复习查阅；如果有不正确的地方，欢迎指正。