zoukankan      html  css  js  c++  java
  • mac下网页中文字体优化

    最近某人吐槽某门户网站在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

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

  • 相关阅读:
    2018.9.22 Bubble Cup 11-Finals(Online Mirror,Div.2)
    2018.9.21 Codeforces Round #511(Div.2)
    2018.9.20 Educational Codeforces Round 51
    解题:USACO12OPEN Bookshelf
    解题:CF983B pyramid
    1214. 许可证密钥格式
    1212. 最大连续1的个数
    1270. 勒索信
    1250. 第三大的数
    1218. 补数
  • 原文地址:https://www.cnblogs.com/gyjWEB/p/4672445.html
Copyright © 2011-2022 走看看