小小字体要闹哪样？
做网页时你的困惑：
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加粗清晰。
4、mac系统上因为字体渲染技术为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的加粗形式更夸张，作为网页文字不适合，因此一般也不用。
下面arial、verdana、tahoma为两个平台共有的英文非衬线字体，看效果。
从上图的测试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的调用和控制，只是被浏览器的默认设置优先控制了样式。
前端推荐阅读：
-------------------这里讨论XP上微软雅黑的安装率问题--------------------
我们得注意一点，XP系统是不自带微软雅黑字体的（微软雅黑是从vista系统开始才有的字体）。此时浏览器就会根据浏览器（IE，firefox，chrome浏览器的默认中文均为宋体）的设置使用宋体。
来看下面数据，数据是某一网站真实用户的浏览器所占比（一个月内平均IP数的比值）：
我从网上搜来的数据：
2013年Q3季度我国电脑操作系统装机率分布
一、虽然没有具体的调查，但是可以想象出XP系统的使用大多集中于网吧，偏远地区，学校政府机关，老年人。
二、XP系统不自带微软雅黑字体，任何一次更新也没有自动安装，除非用户自行安装或者安装了office2007以上的版本，会让系统带上微软雅黑字体。虽然XP占大多数，但是安装office07和自行安装雅黑的用户占了相当大的一部分。没有安装office07的基本集中在学校，政府机关，企事业单位，偏远地区。
因此，微软雅黑保守估计在XP系统上的安装能达到60%——70%。剩下的那部分没有安装雅黑字体的电脑，平时用来浏览IT网站的几率也较少，且电脑用户会不断更换，因此可以不去考虑（此段分析为个人的猜想，仅供参考）
三、从2014年4月8日开始，微软已经不提供XP系统的维护更新了，虽然可以继续使用，但是还是可以想象有一定比例的用户会因为系统的安全性去更换成win7甚至更高系统。（现在国内已经有很多安全软件在高呼：微软不管你们，我们不会抛弃你们！不抛弃！不放弃！）
参考资料移步：