小小字体要闹哪样?



做网页时你的困惑:

1、你看到设计稿后,再到前端稿,发现文字跟设计稿的有差异了。仔细核对发现字体、大小都一样,为什么视觉差那么大。你可能会归结为PS与html代码的“不兼容性”。

2、你是否觉得有时候看设计稿,整体真的很好,不管排版,设计,颜色,但是就是觉得哪里怪怪的。

3、是否感觉某些网页某些地方的文字不好看,甚至觉得丑陋?想去改,又不知怎么改?

4、高富帅们,白富美们,当你们手拿mac本,浏览一些网站时,是否发现网站上的字体跟win系统不一样了?

篇幅原因,结论先行(字体研究对象为新闻类门户网站新闻标题):

A为了改变设计稿字体显示和前端稿差异性,请设计人员安装photoshop  CC,并选择字体消除锯齿方法:Windows LCD(CC以下版本无此功能)。


B、win系统下,宋体字号≤16px时,不宜加粗,视觉不美观。

C、一般列表性质的文章标题

①平铺显示不加粗情况下(一般为12px 14px),用宋体,字体css样式为

【 font-family: Helvetica,arial , STheiti , “simsun” , sans-serif 】

②文章标题加粗情况下(一般为14px、16px),不建议用宋体,win下用微软雅黑,mac下用华文黑体,字体css样式为

【 font-family: Helvetica,arial , STheiti , “microsoft yahei” , sans-serif 】

(注:“simsun”为宋体,STheiti为华文黑体,sans-serif为非衬线字体,字体样式的最后关卡,防止使用浏览器的默认字体)

 ----------------------------我是分割线-----------------------------------

此文分为3个大问题进行具体分析:

1、设计稿到前端稿,字体视觉效果的落差原因。

2、为什么很多网站的文字看着不舒服?

3、为什么在mac上网页会和win系统文字不一样?

大问题一:设计稿到前端稿,字体视觉效果的落差原因。

栗子①

(左侧为PS设计稿文字,右侧为网页文字)


解答:

①Windows 里面对文字的渲染方式:标准(无渲染);清晰(抗锯齿,Windows XP);Cleartype(抗锯齿,Windows Vista以上,了解Cleartype字体渲染技术);第三方的 MacType仿 Mac 强抗锯齿渲染

②Mac 里面对文字的渲染方式:平滑(全局强抗锯齿)、无(默认小于 4 字号)(可不需了解渲染技术的问题)

③Photoshop 对文字的渲染方式:无(无渲染);锐利(最接近 Cleartype);犀利;浑厚;平滑(与 Mac 的平滑不同,但最接近)

④这个目前我找到解决的方法只有一个,就是用高版本的PS CC,在字体的选项中,有一个 WINDOWS LCD, 如果是低版本只有"平滑,锐利等项",选择这个就可以和网页一样了。


-------------------------------分割线--------------------------------------

大问题二:2、为什么很多网站的文字看着不舒服?

(PS:不管宋体,还是微软雅黑,他们都没错,是微软公司错了)

一、先来看几个栗子。

注:此部分测试举例均为win网页下较短文字或者标题,不包括大片段的文章(如咨询文章)。

栗子①:


不知道多少人感觉左边的文字视觉感受更舒服,至少我是感觉左边的舒服很多。

其实差异仅仅是出现在了数字和英文上,中文均为14px宋体。

栗子②

我相信很多人对微软雅黑情有独钟,不喜欢宋体,看下图:(测试环境均为14px字号,win系统)


这张图,我发到了同学群里,问了5个人哪个看着舒服,3人选择第二段,2人选择第三段(从事互联网设计相关工作),一致认为第一段无法直视

二、分析:


概念简单解释:

font  family为css字体样式,控制着文字的字体。simsun为宋体,arial为英文非衬线字体,microsoft yahei为微软雅黑。

serif和sans-serif的意思

在西方国家的字母体系,分成两大字族:serif(衬线字体)sans  serif(非衬线字体)。 

衬线字体:serif的意思是,在字的笔画开始及结束的地方有额外的装饰,而且笔画的粗细会因直横的不同而有不同。 (如Times、Times New Roman等)

非衬线字体:sans serif就没有这些额外装饰,而且笔画粗细大致上是差不多。(如Arial、helvetica等)如下图:

宋体和雅黑的渲染区分

Win系统中,英文衬线字体笔画倾斜锯齿强烈,因为字体在12-17px的时候使用的是点阵表示,小于12px及大于17px之后将由字体轮廓栅格化,点阵效果如下图。


而非衬线字体(如微软雅黑),由于微软用clearType字体渲染技术,使边缘更为平滑,文字周围会有轻微油墨感,文字矮且宽,边缘清晰,小字号表现力仍很好。

栗子③

我又对文字进行更多的字体和字号的修改尝试,如下图:

看上图即可发现:在14px大小下,雅黑加粗的文字表现力胜于宋体加粗,虽然文字扁了(视觉上要小于14px宋体),但是文字显示更为清晰了,宋体14px加粗,某些复杂笔画重合到一起了。

三、初步结论:(不是最终结论,后面有总结论)

为了更好的文字显示效果,建议:

1标题文字在非加粗状态(一般为12px、14px),用宋体,英文数字用arial,

font  family: arial, “simsun”,sans-serif

(为什么要加上sans-serif后面分析)。

不用雅黑的原因是:文字有模糊边缘,文字有少许油墨感。14px是个尴尬的临界点,14px加粗雅黑视觉要好于14px不加粗雅黑。

(之前说过我两个做互联网设计相关的同学喜欢微软雅黑,据个人分析:

A、PS设计稿文字效果与实际web端有差异性。

B、做IT,经常看IT网站,而IT网站较多更多的使用微软雅黑,更倾心雅黑。但是用户不是做设计,不一定关心IT资讯,只关注阅读是否舒服,宋体是他们看文章最多的字体。)

2标题文字加粗时,(一般为14px、16px),用雅黑效果更好。

【 font family: arial,”Microsoft  yahei”,sans-serif】。

3、宋体在12——16px不适合加粗,不好看。

(有人要问了,现在那么多XP系统,原生XP系统没有微软雅黑怎么办,这个问题的解释不是重点,放到文章最后分析。)

---------------------------------分割线----------------------------------

问题三:为什么在mac上我们的网页会和win系统文字不一样?

1、看几个栗子

栗子①

             

左图为win系统,右图为mac系统,css样式为

。 

很明显,此时mac系统对宋体的细节表现更强,这就是上文提到的win和mac对字体渲染的技术不一样。(图片显示效果差了点)

栗子②



上面为win系统,可以看出是14px宋体加粗;下面为mac系统,为14px华文黑体加粗,视觉上mac的更好。



大标题样式


翻译:加粗、16px字号、行高25px、雅黑。

上图为win系统显示效果,下图为mac系统显示效果(实际为华文黑体的加粗)。差异性相当明显。虽然目前mac本的用户不是大众,但是不同的网站内容受众是不同的,必须考虑mac用户的阅读体验。

分析:

中文在win和mac系统上的常用字体。


(微软雅黑在接近60%的XP机器上到底占多少比例,文章最后会分析)


上图为两个系统下,12  14 16  18  24不同字号下的显示效果。

从上图中可以看出:

1黑体的锯齿最为严重,基本可以弃用。

2在12、14不加粗的效果下,宋体显示较为清晰, 12px最清晰。如果宋体要加粗,那么只有在≥18px时才会笔画清晰。

3雅黑在12px时边缘较为模糊,因此这个尺寸一般不用,14px会好很多,加粗情况比宋体14px加粗清晰。

4mac系统上因为字体渲染技术为macType,在小字体时,华文宋体的笔画边缘比win系统清晰很多,但是加粗情况下也不是很理想,同样在≥18px的加粗才会清晰。

5华文黑体正常情况比加粗显示的更为清晰。(截图显示效果不好)

用Mac访问Windows的网页——Mac将使用自己的字体替代

在页面还原中,可以手动设置网页在Mac下使用某种Mac平台下的字体,若不设置的话,将使用浏览器偏好设置中的默认字体。
Mac下的Safari默认使用华文宋体,Chrome默认使用华文黑体。如下图所示:

在 Web 上的字体,如果设置了英文字体,将会影响到对应的中文默认字体。

(笔者注:此方法在win系统上不适用,并且不同浏览器设置不一样,情况较为复杂。请参考文章点这里
如果默认字体是非衬线字体例如 Arial, Verdana, Trebuchet, Impact,中文字体自动是选用非衬线字体华文黑体(mac系统)。

如果默认字体是衬线字体例如 Georgia, Times New Roman,那么中文字体就会自动选成衬线字体华文宋体(mac系统)。


具体显示逻辑如下:


对于不同的浏览器,在Mac中实际展示效果如下,


实测后我们可以发现,在Chrome下华文宋体并不能正常加粗。

mac系统上华文宋体的笔画太清晰,个人不是很喜欢(看大家意见),华文黑体的渲染在小字号(12px)依然给力,远胜于win系统的12px雅黑。建议在win系统上显示为宋体的文字,在mac上强制设置为华文黑体。

----------------此部分建议前端同学看,其他同学选读--------------------

mac和windows自带的字体非常不一样,所以,针对windows的font-family设置一般不适用于mac系统,而在mac下,会调用系统默认的细黑体(STXihei),而这个字体渲染的其实并不是很好看。

使用-webkit - font-smoothing : antialiased

webkit内核私有属性,用于字体抗锯齿,使用后字体看起来会清晰舒服很多:


当然这个只是webkit私有属性,firefox和opera等浏览器不能使用——其实mac版firefox 的字体渲染比webkit要好看一点儿。

---------------------------------分割线-----------------------------------

英文在两个系统上的表现:


看下面英文数字对比图:


衬线字体:georgia, times new roman。

Georgia字体在数字排布时,底端是不对齐的,因此在英文数字排布时,不建议使用。

因此,如果要选用衬线字体,那么win系统和mac系统建议使用times  new roman。

arial  black比arial的加粗形式更夸张,作为网页文字不适合,因此一般也不用。

下面arialverdanatahoma为两个平台共有的英文非衬线字体,看效果。


从上图的测试3个通用字体arial,verdana,tahoma字体,

在正常不加粗情况下字母所占的空间顺序为tahoma<arial < verdana,

Tahoma所占空间最小,在较小的空间中会显得非常挤。

在加粗情况下字母所占的空间顺序为arial<Tahoma < verdana。

从视觉上arial的加粗情况最舒服。

考虑到一般新闻类门户网站的文字多为标题,且多用数字英文,每一个div容器给的空间都不大,避免文字(加粗或不加粗)被挤出div容器,建议使用arial作为英文和数字的指定字体。

PS:因为helvetica是mac系统的默认字体,避免测试环境的原因,没有做对比,但是在win系统的浏览器上,将helvetica作为英文数字的指定字体,和arial一致。helvetica是mac的默认字体,建议方法字体家族的首位。

------------------------------------分割线----------------------------------

最终结论:

一般列表性质的文章标题

①平铺显示不加粗情况下(一般为12px 14px),用宋体,字体css样式为

【 font-family: Helvetica,arial , STheiti , “simsun” , sans-serif 】

②文章标题加粗情况下(一般为14px、16px),不建议用宋体,win下用微软雅黑,mac下用华文黑体,字体css样式为

【 font-family: Helvetica,arial , STheiti , “microsoft yahei” , sans-serif 】

(注:“simsun”为宋体,STheiti为华文黑体,sans-serif为非衬线字体,字体样式的最后关卡,防止使用浏览器的默认字体)

③咨询文章的字体我经过多番尝试,再考虑用户的阅读习惯,还是使用14px号宋体较为合适,不做修改。

-----------------------以下为前端同学搜罗到的好东西---------------------

为什么要在字体家族最后带上serif或者sans-serif

当你看完上面的文章后,对于这个问题肯定感兴趣。当极少数的用户没有上面提到的各种字体时,那么保证字体显示的安全性,用serif或者sans-serif作为最后一道屏障。用户没有设置的字体时,会依据浏览器设置好的字体情况进行显示。

看截图:(左图为win上chrome默认设置,右图为mac上chrome默认设置。显示的衬线和非衬线都不一样,这个除非是高级用户,一般都用浏览器默认设置)其他浏览器不一一列举,自行查询。

纠正一下:宋体属于衬线字体,华文黑体或者微软雅黑,属于非衬线字体,受serif的调用和控制,只是被浏览器的默认设置优先控制了样式。


前端推荐阅读:

1浏览器如何渲染文本

2默认Web字体样式

3最佳Web 中文默认字体

-------------------这里讨论XP上微软雅黑的安装率问题--------------------

我们得注意一点,XP系统是不自带微软雅黑字体的(微软雅黑是从vista系统开始才有的字体)。此时浏览器就会根据浏览器(IE,firefox,chrome浏览器的默认中文均为宋体)的设置使用宋体。

来看下面数据,数据是某一网站真实用户的浏览器所占比(一个月内平均IP数的比值):


我从网上搜来的数据:

2013年Q3季度我国电脑操作系统装机率分布


一、虽然没有具体的调查,但是可以想象出XP系统的使用大多集中于网吧,偏远地区,学校政府机关,老年人。

二、XP系统不自带微软雅黑字体,任何一次更新也没有自动安装,除非用户自行安装或者安装了office2007以上的版本,会让系统带上微软雅黑字体。虽然XP占大多数,但是安装office07和自行安装雅黑的用户占了相当大的一部分。没有安装office07的基本集中在学校,政府机关,企事业单位,偏远地区。

因此,微软雅黑保守估计在XP系统上的安装能达到60%——70%。剩下的那部分没有安装雅黑字体的电脑,平时用来浏览IT网站的几率也较少,且电脑用户会不断更换,因此可以不去考虑(此段分析为个人的猜想,仅供参考)

三、从2014年4月8日开始,微软已经不提供XP系统的维护更新了,虽然可以继续使用,但是还是可以想象有一定比例的用户会因为系统的安全性去更换成win7甚至更高系统。(现在国内已经有很多安全软件在高呼:微软不管你们,我们不会抛弃你们!不抛弃!不放弃!)

参考资料移步:

1在 Photoshop 中输入的微软雅黑为什么和网页中的微软雅黑效果不一致?

2什么是衬线字体与非衬线字体

3跨平台字体效果浅析

4为什么很多网站使用微软雅黑?

5Mac上的字体渲染和 Windows 的有什么区别?

6mac下网页中文字体优化

评论
热度 ( 21 )
  1. 麦小鱼ZIKO 转载了此文字
  2. 翘楚ZIKO 转载了此文字
  3. 不乖地盘ZIKO 转载了此文字
  4. 柠檬说葡萄你好3ZIKO 转载了此文字
  5. 北海ZIKO 转载了此文字