Chrome 最小字体12px

问题状况

在Chrome 中使用CSS font-size 设置字体大小,

当字体设置大于 12px时, 一切正常

当字体设置小于12px时, 字体显示全部是12px.





 New Document 





Font Size 16px
Font Size 15px
Font Size 14px
Font Size 13px
Font Size 12px
Font Size 11px
Font Size 10px
Font Size 9px
从以上例子来看, 等于小于12px的页面显示的字体大小都是一样的。

在IE, Firefox 中显示是正常的。


原因分析


不知道是Chrome 本身的bug, 还是Chrome本身故意设计的。
直接看解决方法了。。

解决方法


解决方法可以从两个方向来考虑,
一是 直接设置浏览器的相关配置达到效果(使用于终端用户)
二是通过添加CSS样式。(使用于开发人员)

方式一:
设置浏览器最小字体限制:
1. 修改方法一
设置--》高级设置--》网络内容--》自定义字体...
设置成最小字体就可以了。(无须重启)
2. 修改方法二。
找到客户端机器以下文件
C:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences

   "webkit": {
      "webprefs": {
         "minimum_font_size": 12,
         "minimum_logical_font_size": 12
      }
   }

把以上值进行修改就可以了(重启Chrome)

处理以上两个方法之外, 网络上还流传着一种解法:

设置 – 选项 – 高级选项 – 更改字体和语言设置 – 语言 – 谷歌浏览器语言:英文(美国)




方式二: 修改CSS

方式一对于开发人员可能没什么用, 因为不知道也不可能把所有的终端用户修改浏览器配置。

因为Chrome 使用的是Webkit内核,通过增加以下CSS就可以达成目标了:

-webkit-text-size-adjust:none;





 New Document 





Font Size 16px
Font Size 15px
Font Size 14px
Font Size 13px
Font Size 12px
Font Size 11px
Font Size 10px
Font Size 9px
Font Size 8px
Font Size 7px
Font Size 6px
但是,这种方式有一个问题就是:

在对整个页面进行放大和缩小时,字体的大小不会变化。(按住Ctrl 键,同时滑动鼠标滚轮)


你可能感兴趣的:(130-Web语言)