[css] 第20天 要让Chrome支持小于12px的文字怎么做？

[haizhilin2013]

第20天 要让Chrome支持小于12px的文字怎么做？

[tiezhu92]

1, 改用图片
2, 使用 -webkit-text-size-adjust:none; 但是不支持chrome 27.0以上版本
3, 使用 transform: scale( )缩小
暂时不知道更多方法了

[tzjoke]

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

[Konata9]

Chrome 中有最小字号的限制，一般为 12px。原因是 Chrome 认为小于这个字号会影响阅读。

当需要小于 12px 字体的时候，有以下几个方法可以使用。

• -webkit-text-size-adjust:none; 这个属性在高版本的 Chrome 中已经被废除。
• 使用 transform: scale(0.5, 0.5)，但使用 transform 需要注意下面几点：
  • transform 对行内元素无效，因此要么使用 display: block; 要么使用 display: inline-block;
  • transform 即使进行了缩放，原来元素还是会占据对应的位置。因此需要做调整，最好是在外面再包一层元素，以免影响其他元素。
• 作为图片。

最好的办法还是进行切图，或者就不要使用小于 12px 的字体。

[blueRoach]

• transform: scale()
• 图片

[smile-2008]

transform: scale()
图片

[amikly]

1.用图片

2.-webkit-text-size-adjust:none;

这个属性在高版本（27后）的 Chrome 中已经被废除

#chrome10px{ 
    -webkit-text-size-adjust:none; 
    font-size:10px; 
}

3. transform: scale(0.5, 0.5)

需要注意以下几点：

• transform 对行内元素无效，因此要么使用 display: block; 要么使用 display: inline-block;
• transform 即使进行了缩放，原来元素还是会占据对应的位置。因此需要做调整，最好是在外面再包一层元素，以免影响其他元素

.px12 {
   font-size: 12px;
}
.px9 {
    font-size: 9px;
    display: inline-block;
    -webkit-transform: scale(0.75);        /* 12*0.75=9 */
}
.px6 {
    font-size: 6px;
    display: block;
    -webkit-transform: scale(0.5);        /* 12*0.5=6 */
    float: left;
}

[Iambecauseyouare]

1.使用zoom
2.-webkit-transform：scale();
3.-webkit-text-size-adjust:none;(自从chrome 27之后，就取消了对这个属性的支持。同时，该属性只对英文、数字生效，对中文不生效)

[lili-0923]

常见的解决方案有：
zoom
-webkit-transform:scale()
-webkit-text-size-adjust:none