2023年12月14日发(作者：)

Mac

和

Windows

系统中网页字体显示方案对比

Mac

在诞生的时候就把对字体处理尽可能接近原貌成为

它很大的一个卖点，而在这些年亲身使用后，个人感觉

Mac

下的字体确实看起来比

Win

下舒服些，特别是在浏览网页时， 字体比较“珠圆玉润” ，可惜的是

Mac

目前并不是主流，大 多数还是

Win用户。所以即使你所使用是

Mac,在设计仍然 要记得平衡

Win

下的效果。

Mac

和

Win

的显示区别

截了段文字做了个对比

,很容易看得出来， 字体显示起来是有 很大的差别的。

Mac

下文字是渲染过，比较饱满，

Win

下更像素化些，看起

来很清晰。具体什么因素造成了这个差别，已经有不少的讨

论了。

Joel Spolsky「Font smoothing, anti-aliasing, and sub-pixel rendering

」总结了各自的区别。

苹果认为，字体渲染算法的目标应尽可能还原字体的设计，

即使代价是造成些许模糊。

微软认为，字符的形状应和像素契合，以防止模糊，提高可

读性，即便扭曲了字体的构造。 Typekkit

「Type rendering: operating systems

」也总结了一段

Mac OS X users see Core Text, Windows 7

and Windows Vista users see either DirectWrite or

GDI, and Windows XP users see GDI. For now,

还有更多，我就不摘过来了，大家可自行搜索。

默认字体

&CSS

字体设置 字体的差异不仅是渲染的效果，其实

Mac

和

Win

的默认字 体也是不一样的，

Mac

是“华文黑体

(Heiti SC Light

和

Heiti SC Medium)

”，

Win

是“宋体

(Simsun)

”，所以在页面没设置 默认字体的情况下，同个页面在

2

个系统同时展示的中文字 体也是不一样。 (字体效果可以见刚才的

2

个系统字体对比 图)。有种特殊的情况，即使命名了默认中文字体

Mac

也会 使用系统默认字体，不知这算不算是一个

Bug

，情况如下：

font-family:"

宋体

" Mac

下无法认出宋体，

Win

可以认出

font-family:"simsun" Mac

和

Win

都可以认出宋体 在使用中文命名时， 还可能会遇上

CSS

编码导致发生乱码的 问题：

综合发生的情况，建议在设置字体时都使用英文描述，这些

是从网上找了相关中英文字体的命名：

宋体

: SimSun

黑体

: SimHei

华文细黑

: STHeiti Light [STXihei]

华文黑体

: STHeiti

微软雅黑

:

Microsoft YaHei

微软正黑体

: Microsoft JhengHei

新宋体

: NSimSun

新细明体

: PMingLiU

仿宋

: FangSong

楷体: KaiTi

更多中文字体的英文名称的文档 暂定的解决方案 在设计时候如何能够平衡

Mac

和

Win

的设计差别

?

Win

下面 可以在

PS

中使用“宋体无渲染”完全还原默认系统的文字 效果，但

Mac

下可能系统的文字渲染和

PS

中的文字渲染算 法不一样，总是有点差别，没办法完全的还原。

所以在考虑到网站的用户是以

Win

为主，

PS

中又能够完全

的还原

Win

下文字的显示效果，同时之前的一段中发现在

Win

下面有不错效果在

Mac

下也会有不错的表现之后， 有了 一个暂定的方案：

统一使用“宋体无渲染”为默认文字，先保证在

Win

系统下

的显示效果

在

CSS

中不订下默认字体，根据系统格式调整 在网页上线后在

Mac

下再进行一次复查，保证

Mac

下的显 示效果 目前这个是能考虑到的暂定的方案，看到这篇文章的设计师 们有没有更好的解决方案？

【延伸阅读】

针对

Mac

单独优化字体

mac

下网页中文字体优化

Mac

下字体研究 关于

MacOS

下字体的一些研究