最近某人吐槽某门户网站在mac下chrome字体超丑,然后发现虽然现在mac用户越来越多,但是大家依然无视mac下的字体差异,于是研究了下mac下网页中的中文字体,和大家分享。

看了一遍国内各大门户和SNS网站,虽然可能大家的font-family设置都不太一样,但是貌似现在只有QQ空间对mac下字体做了优化

ok,言归正传。

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

优化的方法有两个:

方案一:使用Hiragino Sans GB字体

关于Hiragino Sans GB

Hiragino Sans GB 是衍生自 Hiragino Kaku Gothic(ヒラギノ角ゴ)的简体中文字体 [1],近乎完美地继承了原型的风格,有很微妙的喇叭口,弧线柔美、内敛,字面宽大程度合理。这是一款清新的专业印刷字体,小字号时足够清晰,大字号时又不会「细节欠奉」(via http://www.zhihu.com/question/19732722)

目前它是mac系统下自带的比较好看的黑体字体之一,比较适合网页渲染,也广受欢迎。

比如QQ空间的字体设置为:

.os_mac { font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Hiragino Sans GB","Hiragino Sans GB W3"; }

前面三个字体为英文字体。

使用前后对比:

方案二:使用-webkit-font-smoothing:antialiased

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

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

总结

那么,到底那种方案好一些呢?

我做了个测试页面,分别用默认字体设置加上-webkit-font-smoothing的各个属性和Hiragino Sans GB使用同样属性设置,最终发现:

  • webkit默认使用-webkit-font-smoothing:subpixel-antialiased属性,而不是none
  • Hiragino Sans GB字体和系统默认的细黑体表现差异不是特别大,只是细节更圆润舒服;

围观测试页面:http://labs.qianduan.net/macfont.html,或直接看页面截图

所以,如果你想偷懒,就只需要添加-webkit-font-smoothing:antialiased就可以了,最求最佳效果,就两个都用上:P

如果你又更好的方案,欢迎提供。

mac下网页中文字体优化的更多相关文章

  1. 解决Ubuntu下Chrome浏览器网页中文字体混乱

    在Ubuntu下使用Chrome浏览器时碰到了网页中文字体混乱的现象: 黑体和楷体混杂,看起来非常不美观. 这是由于许多网页并没有指定字体,然后浏览器将调用系统默认字体配置. 首先,安装文泉驿字体: ...

  2. Linux 下安装中文字体

    本文以安装黑体为例,简单演示如何在Linux下安装中文字体. 环境信息介绍 [root@thatsit ~]# cat /etc/redhat-release CentOS Linux release ...

  3. html lang="zh-cn"解决Mac版Firefox中文字体显示问题

    这两天在Mac下被Firefox的中文字体显示问题所困扰.在Firefox中将Sans-serif字体设置为SimSun-ExtB(新宋体)或英文字体(这时会用Mac默认中文字体),如下图: 浏览园子 ...

  4. Font-Spider 一个神奇的网页中文字体工具,就是这么任性

    文章摘要:    1>>  font-spider 字体神奇 由于活动项目推广的需要,页面需要用到一些漂亮好看的字体,example : 邯郸-韩鹏毛遂体.ttf. 方正喵呜.ttf 我看 ...

  5. Win7下Eclipse中文字体太小

    http://www.cnblogs.com/newdon318/archive/2012/03/23/2413340.html 最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认 ...

  6. [转]Win7下Eclipse中文字体太小

    最近新装了Win7,打开eclipse3.7中文字体很小,简直难以辨认.在网上搜索发现这是由于Eclipse 3.7 用的字体是 Consolas,显示中文的时候默认太小了.   解决方式有两种:一. ...

  7. matplot在Mac下显示中文的方案

    使用matplotlib经常会出现中文显示异常的问题. 网上很多都讲需要下载中文字体包...偶然看到别人发的一种简单的解决放啊.Mac上本身就有支持中文的字体包啊.引入就好了 贴上代码 plt.rcP ...

  8. Linux下安装中文字体

    目录 一.Centos系列 二.Ubuntu系列 一.Centos系列 1.安装字体库 yum -y install fontconfig 2.添加中文字体,建立存储中文字体的文件夹 mkdir /u ...

  9. 解决win8 下 eclipse 中文字体太小的问题

    一.把字体设置为Courier New  操作步骤:打开Elcipse,点击菜单栏上的“Windows”——点击“Preferences”——点击“Genneral”——点击“Appearance”— ...

随机推荐

  1. Mini projects #5 ---- Memory

    课程全名:An Introduction to Interactive Programming in Python,来自 Rice University 授课教授:Joe Warren, Scott ...

  2. java-多线程新特性

    Java定时器相关Timer和TimerTask类 每个Timer对象相对应的是单个后台线程,用于顺序地执行所有计时器任务TimerTask对象. Timer有两种执行任务的模式,最常用的是sched ...

  3. 在自定义TableViewCell类里面添加按钮事件触发不了的一些实践

    我的自定义cell上面有5个控件,分别是一个背景的UIImageView,一个专辑的UIImageView(上面加了一个播放的button),一个专辑名字的UIImageView(上面加了显示标题的U ...

  4. C++ 非阻塞套接字的使用 (3)

    异步非阻塞套接字避免了死循环的接收问题,但是软件用起来体验还是很差.究其原因,软件在指令的发送.接收上, 采取了一种不合理的方式:在指令的发送后,立刻调用接收函数,等待回令. 若是采用同步阻塞套接字, ...

  5. 影响Java EE性能的十大问题(转)

    本文作者是一名有10多年经验的高级系统架构师,他的主要专业领域是Java EE.中间件和JVM技术.他在性能优化和提升方面也有很深刻的见解,下面他将和大家分享一下常见的10个影响Java EE性能问题 ...

  6. SQL入门经典(七) 之脚本和批处理

    什么是脚本.我们前面学的CREATE TABLE <table name> ,USE <database name>这些都是脚本,为什么用脚本.脚本存储到文件中并且可以重复利用 ...

  7. mono for android学习过程系列教程(6)

    接着上一讲,今天讲的是Button,CheckBox这二个安卓元素, 我们来看第一个Button这个控件,类似winform和webform里面一样,它也是 存在有触发事件的,我们新建初始化项目直接就 ...

  8. openwrt-智能路由器hack技术(2)---"网路信息监控和窃取"

    openwrt-智能路由器hack技术(2)---"网路信息监控和窃取" 1   导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所 ...

  9. Android和Linux应用综合对比分析

    原文地址:http://www.cnblogs.com/beer/p/3325242.html 免责声明: 当时写完这篇调查报告,给同事看了后,他觉得蛮喜欢,然后想把这篇文章修改一下,然后往期刊上发表 ...

  10. Portal.MVC —— nopcommerce的简化版

    Portal.MVC 简介 项目是基于MVC4+EF,带有角色,权限,用户中心及账户相关(登录,注册,修改密码,找回密码等)等基本功能.参考的开源项目 nopcommerce,这是一个电商架构的MVC ...