当前位置: 首页 > 设计 > 正文
avatar

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

最近在设计一套新的主题,遇到一个兼容问题,一般情况下只有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;的部分字体是不会跟着变化的,会保存不变,你定义的是全局,那么整个网页的字体就不会改变了,对体验不好,所以还是哪里需要定义哪里,那样相对范围就小很多了,只会对定义的地方失去缩放功能。

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

本文固定链接: http://www.weisay.com/blog/chrome-fonts-smaller-12px.html | 威言威语

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

  1. avatar
    27楼
    joss Google Chrome Windows

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

    2013-07-07 13:01 [回复]
  2. avatar
    26楼
    西门 Google Chrome Windows

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

    2012-07-15 23:05 [回复]
    • avatar
      William Mozilla Firefox Windows

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

      2012-07-16 13:30 [回复]
  3. avatar
    25楼
    waiting Google Chrome Windows

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

    2012-05-14 10:02 [回复]
  4. avatar
    24楼
    天行键 Google Chrome Windows

    文字太小会看不到

    2012-05-07 18:16 [回复]
  5. avatar
    23楼
    胡小易 Google Chrome Windows

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

    2012-04-18 15:18 [回复]
  6. avatar
    22楼
    黑白 Google Chrome Windows

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

    2012-04-17 22:31 [回复]
  7. avatar
    21楼
    Yong Opera Windows

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

    2012-04-09 14:09 [回复]
    • avatar
      William Google Chrome Windows

      SyntaxHighlighter Evolved这插件

      2012-04-18 15:30 [回复]
  8. avatar
    20楼
    xmwusx.cn Internet Explorer Windows

    你用51.la吗……
    最近好像挂了!……

    2012-04-08 11:21 [回复]
  9. avatar
    19楼
    王叨叨 Google Chrome Windows

    很好奇你的一块一块…

    2012-04-07 17:14 [回复]
  10. avatar
    18楼
    美客网赚圈 Google Chrome Windows

    Weisay Simple 在中文版CHROME浏览器中,导航栏字体因为是加粗的吧,汉字会稍微显示模糊,特别是笔画较多的汉字,粗体相当于笔画轻微重叠了一样,应该是字体较小形成了,其他浏览器没有发现这个问题。目前不影响使用,仅供参考

    2012-04-06 10:59 [回复]
    • avatar
      William Google Chrome Windows

      看你用是XP,XP下微软雅黑的效果是不怎么好的,如果你安装下cleartype应该会看着好很多。

      2012-04-06 15:39 [回复]
      • avatar
        大葱 Google Chrome Windows

        :shock: 话说我也是XP系统,感觉这字体看得特别费神。

        2012-04-10 00:52 [回复]
  11. avatar
    17楼
    魏星博客 Google Chrome Windows

    看到上面有人留言说你要出新模板了,真的??块状的??不会是顺应win8的热潮吧!

    2012-04-05 20:52 [回复]
    • avatar
      William Safari iPhone

      呵呵,win8是色块,我的颜色就单一了,没那么华丽。

      2012-04-06 07:28 [回复]
  12. avatar
    16楼
    小狂人叔叔 Google Chrome Windows

    10PX的确有点过小了,考虑用12吧

    2012-04-03 18:39 [回复]
    • avatar
      William Google Chrome Windows

      那个地方用12px真的感觉大了

      2012-04-05 15:36 [回复]
  13. avatar
    15楼
    灵尘子 Google Chrome Windows

    Metro界面????????

    2012-04-02 23:29 [回复]
  14. avatar
    14楼
    明月登楼 Google Chrome Windows

    把新主题截图发个上来看看嘛!呵呵! :cool:

    2012-03-31 12:30 [回复]
  15. avatar
    13楼
    竹海听涛 Internet Explorer Windows

    支持~

    2012-03-29 13:58 [回复]
  16. avatar
    12楼
    Lvtu Google Chrome Windows

    新主题长啥样?

    2012-03-29 11:15 [回复]
    • avatar
      William Google Chrome Windows

      块状,一块一块的,哈哈

      2012-03-29 14:06 [回复]
      • avatar
        pojtt Google Chrome Windows

        metro风格的嘛0.0
        个人也挺喜欢那个风格的~

        2012-03-29 14:18 [回复]
        • avatar
          William Google Chrome Windows

          应该不算,没有那么多的色块,颜色比较单一

          2012-03-29 15:06 [回复]
          • avatar
            pojtt Google Chrome Windows

            之前圆角风格看的太多了,最近觉得块状风格挺不错的~
            下次咱也试试设计个块状的UI好了~

            2012-03-29 15:36 [回复]
      • avatar
        SeaRu 360安全浏览器 Windows

        Metro界面???期待……

        2012-03-29 14:32 [回复]
      • avatar
        Lvtu Google Chrome Windows

        难道是类似传说中的”吻爸”开始时那种样式。。。

        2012-03-30 11:48 [回复]
  17. avatar
    11楼
    冯涛 Google Chrome Windows

    支持。。。。 :eek:

    2012-03-29 01:42 [回复]
  18. 博主又在设计新的主题呐,继续支持!

    2012-03-28 20:01 [回复]
  19. avatar
    9楼
    qiuyili 360安全浏览器 Windows

    来迟了~~迟了好多个月~~以前我就被这个问题难住了~~

    2012-03-28 18:00 [回复]
  20. avatar
    8楼
    SeaRu 360安全浏览器 Windows

    嗯。我的是假谷歌

    2012-03-27 16:57 [回复]
  21. avatar
    7楼
    龙城瓶子 Internet Explorer Windows

    咱不做主题,不去研究这东西,呵呵

    2012-03-27 13:54 [回复]
  22. avatar
    6楼
    曾经左手烟 Google Chrome Windows

    我设置最小13,正常16

    2012-03-27 13:43 [回复]
    • avatar
      William Google Chrome Windows

      16px感觉就太大了点了

      2012-03-27 18:24 [回复]
      • 微软雅黑字体,字号16
        个人搭配用的还是蛮爽的;
        之前大多用楷体。这两种是我比较喜欢的字体

        2012-03-27 18:26 [回复]
  23. avatar
    5楼
    ChalW Google Chrome Windows

    相当于锁定字体大小吧。

    2012-03-27 12:01 [回复]
  24. avatar
    4楼
    snowinmay QQ浏览器 Windows

    我表示不懂css~~哈哈。。

    2012-03-27 11:52 [回复]
  25. avatar
    地板
    JQ 博客 Google Chrome Windows

    对了,威哥,文章底部的广告,放的尺寸是多大的额啊?我没找到600*80的广告的?

    2012-03-27 11:30 [回复]
    • 你可以找一个尺寸差不多的。然后调一下尺寸。我就是这么做的

      2012-03-27 11:53 [回复]
    • avatar
      William Google Chrome Windows

      600px以内的都是可以的。貌似谷歌的是480px

      2012-03-27 12:01 [回复]
    • 你的问题解决了吗

      2012-04-01 16:57 [回复]
  26. avatar
    板凳
    JQ 博客 Google Chrome Windows

    我也发现了这个问题啊

    2012-03-27 11:14 [回复]
  27. avatar
    沙发
    TaoQingWei Internet Explorer Windows

    就是现在就计算机分辨率越来越大,字体小的话,有时看起真的很吃力,不过我一直喜欢用IE,用Chrome的人很多吗?

    2012-03-27 08:09 [回复]
    • avatar
      William Google Chrome Windows

      当然,从我博客的浏览器统计来看,Chrome占到40%

      2012-03-27 10:36 [回复]

发表评论

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

快捷键:Ctrl+Enter