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

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

William2012-03-26 23:55设计26,262次阅读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;的部分字体是不会跟着变化的，会保存不变，你定义的是全局，那么整个网页的字体就不会改变了，对体验不好，所以还是哪里需要定义哪里，那样相对范围就小很多了，只会对定义的地方失去缩放功能。

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

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

中文版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 回复
  - 胡小易：
    
    哦，谢谢威哥了~~听说你要出新模板了，给你个建议，建议加入微博模块呵呵
    
    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文章作者：
  
  SyntaxHighlighter Evolved这插件
  
  2012-04-18 15:30 回复
20楼
xmwusx.cn：

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

2012-04-08 11:21 回复
- William文章作者：
  
  没用51.la
  
  2012-04-09 12:38 回复
19楼
王叨叨：

很好奇你的一块一块…

2012-04-07 17:14 回复
18楼
美客网赚圈：

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

2012-04-06 10:59 回复
- William文章作者：
  
  看你用是XP，XP下微软雅黑的效果是不怎么好的，如果你安装下cleartype应该会看着好很多。
  
  2012-04-06 15:39 回复
  - 大葱：
    
    话说我也是XP系统，感觉这字体看得特别费神。
    
    2012-04-10 00:52 回复
17楼
魏星博客：

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

2012-04-05 20:52 回复
- William文章作者：
  
  呵呵，win8是色块，我的颜色就单一了，没那么华丽。
  
  2012-04-06 07:28 回复
16楼
小狂人叔叔：

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

2012-04-03 18:39 回复
- William文章作者：
  
  那个地方用12px真的感觉大了
  
  2012-04-05 15:36 回复
15楼
灵尘子：

Metro界面？？？？？？？？

2012-04-02 23:29 回复
14楼
明月登楼：

把新主题截图发个上来看看嘛！呵呵！

2012-03-31 12:30 回复
13楼
竹海听涛：

支持~

2012-03-29 13:58 回复
12楼
Lvtu：

新主题长啥样？

2012-03-29 11:15 回复
- William文章作者：
  
  块状，一块一块的，哈哈
  
  2012-03-29 14:06 回复
  - pojtt：
    
    metro风格的嘛0.0
    个人也挺喜欢那个风格的~
    
    2012-03-29 14:18 回复
    - William文章作者：
      
      应该不算，没有那么多的色块，颜色比较单一
      
      2012-03-29 15:06 回复
      - pojtt：
        
        之前圆角风格看的太多了，最近觉得块状风格挺不错的~
        下次咱也试试设计个块状的UI好了~
        
        2012-03-29 15:36 回复
  - SeaRu：
    
    Metro界面？？？期待……
    
    2012-03-29 14:32 回复
  - Lvtu：
    
    难道是类似传说中的”吻爸”开始时那种样式。。。
    
    2012-03-30 11:48 回复
11楼
冯涛：

支持。。。。

2012-03-29 01:42 回复
10楼
最博客的时光：

博主又在设计新的主题呐，继续支持！

2012-03-28 20:01 回复
9楼
qiuyili：

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

2012-03-28 18:00 回复
8楼
SeaRu：

嗯。我的是假谷歌

2012-03-27 16:57 回复
7楼
龙城瓶子：

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

2012-03-27 13:54 回复
6楼
曾经左手烟：

我设置最小13，正常16

2012-03-27 13:43 回复
- William文章作者：
  
  16px感觉就太大了点了
  
  2012-03-27 18:24 回复
  - 曾经左手烟：
    
    微软雅黑字体，字号16
    个人搭配用的还是蛮爽的；
    之前大多用楷体。这两种是我比较喜欢的字体
    
    2012-03-27 18:26 回复
5楼
ChalW：

相当于锁定字体大小吧。

2012-03-27 12:01 回复
- William文章作者：
  
  可以这么理解
  
  2012-03-27 18:24 回复
4楼
snowinmay：

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

2012-03-27 11:52 回复
地板
JQ 博客：

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

2012-03-27 11:30 回复
- snowinmay：
  
  你可以找一个尺寸差不多的。然后调一下尺寸。我就是这么做的
  
  2012-03-27 11:53 回复
- William文章作者：
  
  600px以内的都是可以的。貌似谷歌的是480px
  
  2012-03-27 12:01 回复
- snowinmay：
  
  你的问题解决了吗
  
  2012-04-01 16:57 回复
板凳
JQ 博客：

我也发现了这个问题啊

2012-03-27 11:14 回复
沙发
TaoQingWei：

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

2012-03-27 08:09 回复
- William文章作者：
  
  当然，从我博客的浏览器统计来看，Chrome占到40%
  
  2012-03-27 10:36 回复

发表评论

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 回复
- 胡小易：
  
  哦，谢谢威哥了~~听说你要出新模板了，给你个建议，建议加入微博模块呵呵
  
  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文章作者：

SyntaxHighlighter Evolved这插件

2012-04-18 15:30 回复

20楼

xmwusx.cn：

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

2012-04-08 11:21 回复

William文章作者：

没用51.la

2012-04-09 12:38 回复

19楼

王叨叨：

很好奇你的一块一块…

2012-04-07 17:14 回复

18楼

美客网赚圈：

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

2012-04-06 10:59 回复

William文章作者：

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

2012-04-06 15:39 回复
- 大葱：
  
  话说我也是XP系统，感觉这字体看得特别费神。
  
  2012-04-10 00:52 回复

17楼

魏星博客：

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

2012-04-05 20:52 回复

William文章作者：

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

2012-04-06 07:28 回复

16楼

小狂人叔叔：

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

2012-04-03 18:39 回复

William文章作者：

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

2012-04-05 15:36 回复

15楼

灵尘子：

Metro界面？？？？？？？？

2012-04-02 23:29 回复

14楼

明月登楼：

把新主题截图发个上来看看嘛！呵呵！

2012-03-31 12:30 回复

13楼

竹海听涛：

支持~

2012-03-29 13:58 回复

12楼

Lvtu：

新主题长啥样？

2012-03-29 11:15 回复

William文章作者：

块状，一块一块的，哈哈

2012-03-29 14:06 回复
- pojtt：
  
  metro风格的嘛0.0
  个人也挺喜欢那个风格的~
  
  2012-03-29 14:18 回复
  - William文章作者：
    
    应该不算，没有那么多的色块，颜色比较单一
    
    2012-03-29 15:06 回复
    - pojtt：
      
      之前圆角风格看的太多了，最近觉得块状风格挺不错的~
      下次咱也试试设计个块状的UI好了~
      
      2012-03-29 15:36 回复
- SeaRu：
  
  Metro界面？？？期待……
  
  2012-03-29 14:32 回复
- Lvtu：
  
  难道是类似传说中的”吻爸”开始时那种样式。。。
  
  2012-03-30 11:48 回复

11楼

冯涛：

支持。。。。

2012-03-29 01:42 回复

10楼

最博客的时光：

博主又在设计新的主题呐，继续支持！

2012-03-28 20:01 回复

9楼

qiuyili：

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

2012-03-28 18:00 回复

8楼

SeaRu：

嗯。我的是假谷歌

2012-03-27 16:57 回复

7楼

龙城瓶子：

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

2012-03-27 13:54 回复

6楼

曾经左手烟：

我设置最小13，正常16

2012-03-27 13:43 回复

William文章作者：

16px感觉就太大了点了

2012-03-27 18:24 回复
- 曾经左手烟：
  
  微软雅黑字体，字号16
  个人搭配用的还是蛮爽的；
  之前大多用楷体。这两种是我比较喜欢的字体
  
  2012-03-27 18:26 回复

5楼

ChalW：

相当于锁定字体大小吧。

2012-03-27 12:01 回复

William文章作者：

可以这么理解

2012-03-27 18:24 回复

4楼

snowinmay：

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

2012-03-27 11:52 回复

地板

JQ 博客：

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

2012-03-27 11:30 回复

snowinmay：

你可以找一个尺寸差不多的。然后调一下尺寸。我就是这么做的

2012-03-27 11:53 回复
William文章作者：

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

2012-03-27 12:01 回复
snowinmay：

你的问题解决了吗

2012-04-01 16:57 回复

板凳

我也发现了这个问题啊

2012-03-27 11:14 回复

沙发

TaoQingWei：

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

2012-03-27 08:09 回复

William文章作者：

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

2012-03-27 10:36 回复

威言威语