Chrome取消-webkit-text-size-adjust后的那些事

在学校机房上公选课,IE6忍无可忍,于是下载了Chrome27。上自己博客的时候,发现底部的copyright不是我所设置的大小。搜索后得知:Chrome27正式取消了-webkit-text-size-adjust属性,所有字号最小为12px。

chrome.png

大概是因为我这样全局使用-webkit-text-size-adjust的人过于丧心病狂,所以此属性被和谐了。经过反思我深刻认识到了错误,因为此属性会使得webkit内核的浏览器失去调节能力,对于有视觉障碍的浏览者非常不友好(尤其是移动终端),所以回到宿舍后,我在全局中去掉了此属性。

如果希望设置为以前的9px效果,可以重新使用一个div包裹文字,并对此div使用:

1
2
3
4
.webkit {
    font-size: 9px;
    -webkit-transform: scale(0.75);
}

12×0.75=9,对于其它浏览器来说,9px默认识别,仅需要对于webkit浏览器进行缩放。

后续测试

我天真的以为这样就可以了,没想到在多浏览器测试下又有问题。

Chrome下显示效果:

chrome.png

Firefox下显示效果:

firefox.png

Opera下显示效果:

opera.png

得出结论:Chrome下由于启用了缩放,所以字符间距出现问题,影响了美观(不过可以自己再设置字符间距);Firefox下完美;Opera能够识别-webkit-前缀(而且在检查元素时还抹掉了前缀),但又能够显示12px以下的字号,结果变成了9×0.75,看着像撸多了。

operacss.png

对于opera我只能无语,又得画蛇添足:

1
2
3
4
5
.webkit {
    font-size: 9px;
    -webkit-transform: scale(0.75);
    -o-transform: scale(1);
}

介于以上种种原因,我老老实实的删除了新增的包裹div,将字号设置为12px,累觉不爱。

关于Opera内核

我测试用的Opera是12.15版本,内核暂未更换为webkit,但是已经能够识别-webkit-前缀了。

解决方案

时隔多年,一直留着这一篇错误百出的文章。其实解决这个问题很简单,而且兼容性也不错。

第一步:设置css部分为12px
第二步:使用scale滤镜进行缩放
第三步:使用letter-spacing调整字符间距

一切OK~DEMO

评论

  1. 关于chrome不能设置小于12px字体的问题 - 行动吧行动吧

    [...]参考:http://banri.me/web/webkit-text-size-adjust.html[...]

    回复
  2. yijile
    yijile

    用缩放,,这算不算一种强迫症

    回复
  3. cxytomo
    cxytomo

    我也遇到过,可以用em设置字体大小。手机端默认16px,然后以16为基础 font-size:0.56em; chrome下就会会缩小不收12px限制了

    回复
    1. 请叫我阿空
      请叫我阿空

      PC端谷歌无效啊,我设置rem的

      回复
      1. 袁源_Vivian
        袁源_Vivian

        em 好像也无效啊!

        回复
        1. banri
          banri

          rem有效 亲测

          回复
          1. 袁源_Vivian
            袁源_Vivian

            求看 demo……

            回复
            1. banri
              banri

              这个网站就是demo呀~
              需要在html标签里给font-size: 100%
              然后就可以使用rem尽情的调试了~~1rem=16px

              回复
              1. banri
                banri

                想到了解决办法~第一步:设置css部分为12px
                第二步:使用scale滤镜进行缩放
                第三步:使用letter-spacing调整字符间距

              2. banri
                banri

                第一步:设置css部分为12px
                第二步:使用scale滤镜进行缩放
                第三步:使用letter-spacing调整字符间距

              3. 请叫我阿空
                请叫我阿空

                最后就是,无解啦

              4. 袁源_Vivian
                袁源_Vivian

                Safari 是 webkit ,现在的 chrome 是 blink 内核。突然明白过来。

              5. banri
                banri

                可能还真是版本问题……我用的是Safari……

              6. 袁源_Vivian
                袁源_Vivian

                我试着用开发者工具改了一下这个网页的正文。。。0.2rem ,依然是 12px。难道是 chrome 版本问题。

  4. 李亮
    李亮

    试一试

    回复
  5. 三人
    三人

    没用啊,360极速下还是解决不了啊

    回复
  6. 杜自一人
    杜自一人

    那Safari怎么办呢?

    回复
  7. WordPress精美主题
    WordPress精美主题

    老老实实的使用12px!

    回复
  8. 悟道前端
    悟道前端

    分析得不错,赞一个

    回复
  9. cindy
    cindy

    所以还是没办法解决是吗。。。。

    回复
  10. Jin
    Jin

    回复
  11. yorky
    yorky

    但是,在chrome下面有间距问题呢

    回复
    1. yorky
      yorky

      lz 提到这个问题了,刚发现,是我没注意到,哈哈

      回复
  12. 蓄势而为
    蓄势而为

    很不错 可以解决

    回复
  13. Dalston Xu
    Dalston Xu

    谢谢博主~ 这两天一直纳闷打印机打印不出页面字号小于12px的文字..

    回复
  14. 黑妹
    黑妹

    赞一个

    回复
  15. GhostCode
    GhostCode

    回复
  16. {\
    {\"name\":\"xl\",\"job\":\"js\"}

    感觉Chrome在为难前端,为什么不 在取消-webkit-text-size-adjust属性的同时,允许设置小于12px的字体呢?

    回复
    1. banri
      banri

      对于这个问题我也很纳闷……至少Chrome桌面版应该取消限制

      回复
      1. westup
        westup

        为什么我的chrome (Version 27.0.1456.116 m)可以设置小于12px的字体啊,话说这个最小文字在chrome的设置里面有,你设置最小为12px,当然就没用了

        回复
        1. banri
          banri

          这是chrome设置的吧,这里讨论的是通过css设置。写css应该以浏览器默认值为基础,这样可以保证兼容性

          回复
  17. EQuinoxBao
    EQuinoxBao

    LZ V5 ..赶脚老了..这个都不知道..

    回复
    1. banri
      banri

      这个也是偶然遇到的啦

      回复
  18. PENN
    PENN

    技术文。。我就不会深究这种问题 ,没有钻研精神~~
    P.S.你是学这个的么?

    回复
    1. banri
      banri

      代码毁三观,前端毁一生,不碰最好啦……
      我是学的物流管理,但是已经跳坑了,累觉不爱

      回复
      1. differui
        differui

        我也是一个物流管理,天天逃课学前端的!

        回复
      2. good
        good

        完美转型啊

        回复
  19. 前端收藏夹 | apul的博客

    [...]Chrome取消-webkit-text-size-adjust后的那些事[...]

    回复
  20. 解决 Chrome 最小字体为12px | 草野时代

    [...]相信不少做网站的用户会有这样一个问题,Chrome 默认最小字体是12px(英文版无此问题),这个是 Chrome 为了更好显示中文设计的,但是这样一来就会出现某些上标、下标字体过大,影响用户体验。今天清枫在修改模板的时候也遇到了,在旧版 Chrome 中只需要在CSS文件中添加-webkit-text-size-adjust:none;即可忽略自身字体调节,但是由于这一属性被滥用,PC版 Chr[...]

    回复
    1. 啊的飞洒
      啊的飞洒

      怎么解决这个问题?

      回复
      1. banri
        banri

        第一步:设置css部分为12px
        第二步:使用scale滤镜进行缩放
        第三步:使用letter-spacing调整字符间距

        回复