Chrome 最小字体12px

问题状况

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

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

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

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
</HEAD><BODY>
<div style="font-size:16px">Font Size 16px</div>
<div style="font-size:15px">Font Size 15px</div>
<div style="font-size:14px">Font Size 14px</div>
<div style="font-size:13px">Font Size 13px</div>
<div style="font-size:12px">Font Size 12px</div>
<div style="font-size:11px">Font Size 11px</div>
<div style="font-size:10px">Font Size 10px</div>
<div style="font-size:9px">Font Size 9px</div>
</BODY>
</HTML>

从以上例子来看，等于小于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;


<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<style>
html { -webkit-text-size-adjust:none } </style>
</HEAD><BODY>
<div style="font-size:16px">Font Size 16px</div>
<div style="font-size:15px">Font Size 15px</div>
<div style="font-size:14px">Font Size 14px</div>
<div style="font-size:13px">Font Size 13px</div>
<div style="font-size:12px">Font Size 12px</div>
<div style="font-size:11px">Font Size 11px</div>
<div style="font-size:10px">Font Size 10px</div>
<div style="font-size:9px">Font Size 9px</div>
<div style="font-size:8px">Font Size 8px</div>
<div style="font-size:7px">Font Size 7px</div>
<div style="font-size:6px">Font Size 6px</div>
</BODY>
</HTML>

但是，这种方式有一个问题就是：

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