Google不支持小于12px字体 终极办法

 

每个浏览器厂商都会自己有设计的主观性，而这些出发点看似很好的却往往深深地伤害程序员。

 

1.需求

呈现指定为Google浏览器，字号为6-8px（为了打印细小的尺寸）。

 

2.探索

2.1 CSS HACK

搜索了N多的网页，都指向一个结果：

html

{
      -webkit-text-size-adjust:none;
}

将以上代码放在文档的开始。。。

 

可，就是，不生效。。。结果就有不良——说话语气粗拙、脸红、眼瞪等一系列的反应。

 

2.2 CSS 3 的春天

刚好带了一本书，是讲CSS3的特性的，快速浏览了整本书之后，发现了一个特性:

div {
    transform:scaleY(0.8);
}

— —对指定的标签进行缩放，比如，上述代码的意思就是，对div及其子元素（包括文本，也就包括字号）的高度（Y）放小到80%。

        类似的，宽度放缩：scaleX(pre),整体放缩scale(pre)。

 

尝试之下，确实能够放缩。

可是，如果HTML是这样的话：

<div id="d1">your text</div>
<div id="d2">your text2</div>

那么在d1和d2之间将会出现很大的留白，怎么却掉这个留白呢？

两条铁律：

{
     margin-top:-12px;          
     padding-bottom:-12px;
}

使用marin的负值，可以向指定方向移动外边距，即元素整体；

使用padding的负值，可以向指定的方向移动内边距，即撑大元素体；

 

之后，缩小的文本没哟发生变化，那么就达到了效果——在Google浏览器缩小字体，且像正常一样的执行。

3.总结

transform实际是计算机图形学的一个实现，有2D变换，3D变换等。

基础很重要，每一次努力都不会白费的~。