mac html字体设置,Mac Ｗin 网页字体显示方案

Mac在诞生的时候就把对字体处理尽可能接近原貌成为它很大的一个卖点，而在这些年亲身使用后，个人感觉Mac下的字体确实看起来比Win下舒服些，特别是在浏览网页时，字体比较“珠圆玉润”，可惜的是Mac目前并不是主流，大多数还是Win用户。所以即使你所使用是Mac，在设计仍然要记得平衡Win下的效果。

Mac和Win的显示区别

截了段文字做了个对比,很容易看得出来，字体显示起来是有很大的差别的。

Mac下文字是渲染过，比较饱满，Win下更像素化些，看起来很清晰。具体什么因素造成了这个差别，已经有不少的讨论了。

苹果认为，字体渲染算法的目标应尽可能还原字体的设计，即使代价是造成些许模糊。

微软认为，字符的形状应和像素契合，以防止模糊，提高可读性，即便扭曲了字体的构造。

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 html字体设置,Mac Ｗin 网页字体显示方案相关推荐

Mac日历如何设置不在通知中心显示共享日历信息？
Mac日历如何设置不在通知中心显示共享日历信息呢?方法不难,只需几个简单步骤就可以了!小编给大家带来了详细的图文教程,需要的朋友欢迎参考操作! 具体操作方法如下 1.打开电脑上的日历. 2.点击菜单上 ...
java linux 字体设置_linux下面java字体的设置
这两天碰到一个棘手的问题, 就是java的字体到了mac下面, 宋体不见了, 变成了simsun, 这个对应关系如何产生的呢? 先记下这个问题. 在Linux中,JAVA程序的中文默认可能不正常:或是 ...
php的字体怎么变大,网页字体怎么变大
网页字体变大的方法:1.打开浏览器,点击右上角的"三条横杆"按钮:2.在弹出的设置菜单中,点击"选项"按钮:3.在选项界面中,点击"界面设置" ...
html字体怎么变大,网页字体怎么变大（html怎么改字体类型）
网页字体怎么变大(html怎么改字体类型) 出现这个问题首先要查看一下是不是因为网页字体设置不当的原因,详细操作步骤是:打开"网页",使用快捷键"ctrl+(NUM+或- ...
c++ list box 字体设置_上海印刷字体展示馆迎来第一批团队参观
上海印刷字体展示馆迎来第一批团队参观 10月19日中央美术学院副教授刘钊博士带领上海美术学院本硕学生参观上海印刷字体展示馆. 上海印刷字体展示馆 · 2020 " 感受字体文化 &quo ...
android系统自带字体设置,安卓手机系统字体设置-系统字体设置(Big Font) 安卓版v2.37-PC6安卓网...
Big Font 改变系统字体大小:这个软件可以直接修改安卓系统字体的大小,相比原生系统的大中小肯那个还不能完全符合所有人.这个软件还不错. 官方介绍透过改变系统字体大小Big Font应用,你可以 ...
matlab怎么恢复默认字体,如何重置Windows字体设置并恢复默认字体 | MOS86
与之前版本的操作系统相比, Microsoft大大提高了Windows 8的启动时间. 这是伟大的,这并不意味着启动时间不会增加.如果您安装了自动启动程序,或者安装了太多的字体,那么您可能会注意到,无 ...
印象笔记字体设置 Mac
1.当看见一个比较好看的字体想使用的时候,先记住字体的名字: 2.然后左上角选择:格式-->显示字体-->选择所有字体-->搜索刚才的字体 3.然后选择字体(选择字体的时候鼠标最好不 ...
设计网页字体css,CSS教程 :网页字体及字体大小的设计
字体大小 CSS2规范根据长度--水平和垂直尺寸--来定义字体.这个长度为一个数值,前面可能带一个可选的加(+)或减(-)标记符.另外,该数值后可能有一个可选的单位标识符. 另外,CSS2规范定义了两 ...
python docx 字体设置_python docx 中文字体设置
前段时间用到了docx生成word文档,docx本身用起来很方便,自带的各种样式都很好看,美中不足的就是对中文的支持不够好.在未设置中文字体的时候,生成的文档虽然可以显示中文,但是笔画大小不一,很难看 ...

mac html字体设置,Mac Ｗin 网页字体显示方案

mac html字体设置,Mac Ｗin 网页字体显示方案相关推荐

最新文章

热门文章