威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

中文版Chrome下字体显示不能小于12px的探索

在中文版Chrome浏览器中,字体小于12px不设置都无效,而是强制显示为12px,解决方法就是添加一个webkit的私有属性。如何被定义了那个属性的地方,浏览器的字体将不能使用放大缩小功能!
中文版Chrome下字体显示不能小于12px的探索

最近在设计一套新的主题,遇到一个兼容问题,一般情况下只有IE才会有兼容问题来着的,这次是中文版的Chrome。

随着现在浏览器分辨率越来越大,小字体相对就不是很给力了,在设计主题的时候我一般都将字体设置成13px。新版主题中我用到一个10px的字体,当然是英文字体,中文字体一般在10px下基本都走样了。

我发现设置成10px无法实现,被强制变为了12px了,这让我很纠结了,我就想那个地方的字体是10px,大了就不好看了。

然后我将Google Chrome浏览器的语言设置成英文就没这个问题,我想难道是开发设计中文版时认为小于12px字体看不清楚,不利于用户体验所以就主动干预控制最小字体为12px呢?

后续更新

Chrome 27之后,正式取消了-webkit-text-size-adjust属性,所有字号最小为12px。

目前似乎只有通过类似 transform:scale(0.875); 的方式来解决,但效果貌似并不是很理想。

当然,添加一个webkit的私有属性,就能解决问题。

.class{-webkit-text-size-adjust:none;}

我不建议使用全局的

html{-webkit-text-size-adjust: none;}

而是有针对性的对我们需要定义字体小于12px的地方去使用这个webkit的私有属性。

左侧为正常情况,右侧为网页放大情况

为什么这么说呢,就是当你放大或缩小网页的时候,被定义了-webkit-text-size-adjust:none;的部分字体是不会跟着变化的,会保存不变,你定义的是全局,那么整个网页的字体就不会改变了,对体验不好,所以还是哪里需要定义哪里,那样相对范围就小很多了,只会对定义的地方失去缩放功能。

由上图我们可以看到当网页被放大之后,页面上的元素除了被定义那个属性的,其他都正常的变大了。所以对于这个属性,我们还得多想想,不到必须,尽量不用。

您可能还会对这些文章感兴趣!

中文版Chrome下字体显示不能小于12px的探索:目前有 50 条评论

  1. joss
    27楼
    joss:Google Chrome 27.0.1453.116 Windows 7

    自从谷歌浏览器升级后,不知道什么原因,我网站留言里的验证码显示不了了。到现在还是不能解决,我现在只能暂时把验证去掉。

    2013-07-07 13:01 回复
  2. 西门
    26楼
    西门:Google Chrome 17.0.963.66 Windows 7

    Chrome是为了用户体验,因为防止站长作弊,把文字弄很小,搞SEO什么的

    2012-07-15 23:05 回复
    • William
      WilliamFirefox 13.0.1 Windows 7

      @西门这倒是,不过就中文版的这样,英文版的倒是OK,地域性 :wink:

      2012-07-16 13:30 回复
  3. waiting
    25楼
    waiting:Google Chrome 10.0.648.151 Windows XP

    这个问题我也发现了,字号最小12PX,再小就没效果了。

    2012-05-14 10:02 回复
  4. 天行键
    24楼
    天行键:Google Chrome 19.0.1084.36 Windows 7

    文字太小会看不到

    2012-05-07 18:16 回复
  5. 胡小易
    23楼
    胡小易:Google Chrome 18.0.1025.162 Windows XP

    想问下威哥你用的博客图片显示的这个效果是什么插件?
    还有代码高亮这是什么插件,我找的和你的效果不一样额。

    2012-04-18 15:18 回复
  6. 黑白
    22楼
    黑白:Google Chrome 17.0.963.79 Windows XP

    chrome真的是很好用,一定会越来越受欢迎。

    2012-04-17 22:31 回复
  7. Yong
    21楼
    Yong:Opera IBIS 11.62 Windows XP

    威大、想问下你文章中怎么显示代码格式的,用的插件么?

    2012-04-09 14:09 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry