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

William2012-03-26 23:55设计29,276次浏览50条评论

扫一扫手机看

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

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

赏

【上一篇】给WordPress导航菜单前面加上个性小图标
【下一篇】北京之行

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

27楼
joss：

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

2013-07-07 13:01 回复
26楼
西门：

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

2012-07-15 23:05 回复
- William博主：
  
  @西门这倒是，不过就中文版的这样，英文版的倒是OK，地域性
  
  2012-07-16 13:30 回复
25楼
waiting：

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

2012-05-14 10:02 回复
24楼
天行键：

文字太小会看不到

2012-05-07 18:16 回复
23楼
胡小易：

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

2012-04-18 15:18 回复
- William博主：
  
  @胡小易 https://www.weisay.com/blog/auto-highslide.html
  还有SyntaxHighlighter Evolved这个插件
  
  2012-04-18 15:31 回复
  - 胡小易：
    
    @William哦，谢谢威哥了~~听说你要出新模板了，给你个建议，建议加入微博模块呵呵
    
    2012-04-19 15:31 回复
    - William博主：
      
      @胡小易微博可以直接用微博推出的挂件嘛，我到不喜欢直接显示微博的内容。
      
      2012-04-20 10:18 回复
22楼
黑白：

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

2012-04-17 22:31 回复
21楼
Yong：

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

2012-04-09 14:09 回复
- William博主：
  
  @YongSyntaxHighlighter Evolved这插件
  
  2012-04-18 15:30 回复