谷歌浏览器不支持CSS设置小于12px的文字怎么办?

今天给大家带来的教程是谷歌浏览器不支持设置CSS较小字体问题的解决方法。

先来看下 ie、火狐、谷歌浏览器下各个字体显示情况

ie下:

谷歌浏览器不支持CSS设置小于12px的文字怎么办?

火狐下:

谷歌浏览器不支持CSS设置小于12px的文字怎么办?

谷歌下:

谷歌浏览器不支持CSS设置小于12px的文字怎么办?

【问题总结:】

     ①从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px;

那么网上一直有一个方法就是给当前样式添加谷歌私有属性:-webkit-text-size-adjust:none;

可是我进行验证后发现,在谷歌现在的新版本里已经无效。那么我们应该如何设置谷歌下的字体呢?

我们可以使用到 css3里的一个属性:transform:scale() 

    ②中文版的chrome有个12px字体限制的问题,就是当字体小于12px时候都以12px来显示,这个问题在中文网站中并不突出,因为中文字体为了显示清晰一般都定义为大于或等于12px,但如果是一些英文网站那就不好说了,这时12px的限制就会破坏页面的美感,甚至因为文字变大而导致页面变形。

【老式解决方案:(新版本已不兼容)】

       可以使用Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决,比如下面的代码就可以成功的解决,通过它即可实现字体大小不随终端设备或浏览器影响。样式定义如下:

.abc{ -webkit-text-size-adjust:none; font-size:10px; }
 只要 加了 -webkit-text-size-adjust:none; 字体大小 就不受限制了。

注:如果使用了这个属性,浏览器的字体将不能使用放大缩小功能!(就是按住CTRL键上下滚动鼠标中键的那功能)

【尝试换单位-无用】

还有朋友说用em(字符)作为单位定义字体大小有用。本人亲自测试过,用em字义的字体在谷歌浏览器中最小也不会小于12px。所以是没用的。

高版本chrome谷歌浏览器不再支持小于12px的字体:

-webkit-text-size-adjust:none;的方案在chrome更新到27版本之后就不可以用了。

所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式,所以要使用时候慎用。为了兼容各大浏览器最好最小文字字体大小设置12px及12px以上。

那此时应该怎么办呢?想一想,还是有办法解决的。

chrome是支持css3的。那么我们是否可以写,-webkit-transform : scale()  方法来解决呢?

最新解决方案

这个属性前给-webkit-谷歌前缀,那么就可以控制字体的大小,代码如下:

<style>
p{font-size:10px;-webkit-transform:scale(0.8);}
/*这里的数字0.8,是缩放比例,可以根据情况变化。*/
</style>
<p>中梦测试10px</p>

  (1)测试后有效 

【注意】但是要注意一点,如果这个<p>元素有背景的话,给这个属性会使背景也随着变化,所以,我们可以给<p>标签里再套个<span>

<style>
p span{font-size:10px;-webkit-transform:scale(0.8);}
</style>
<p><span>中梦测试10px</span></p>

    (2)这时测试发现无效

这是因为transform:scale()这个属性只为可以缩放可以定义宽高的元素,而span是行内元素;

我们可以给span元素定义一个display:block,这样就可以了。

<style>
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
</style>
<p><span>中梦测试10px</span></p>

   这样在谷歌浏览器下走一遍,字体就能更改了。

DIVCSS5建议:

1、用图片:如果是内容固定不变情况下,使用将小于12px文字内容切出做图片,这样不影响兼容也不影响美观。
2、使用12px及12px以上字体大小:为了兼容各大主流浏览器,建议设计美工图时候设置大于或等于12px的字体大小,如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。
3、继续使用小于12px字体大小样式设置:如果不考虑chrome可以不用考虑兼容,同时在设置小于12px对象设置-webkit-text-size-adjust:none,做到最大兼容考虑。
4、使用12px以上字体:为了兼容、为了代码更简单 从新考虑权重下兼容性。

相信看了这些案例你已经掌握了方法

相关阅读:

驼峰命名与JS的问题解答

JS里的布尔值、关系运算符、逻辑运算符的详解及实例

前端的js框架总结以及用途讲解

以上就是谷歌浏览器不支持CSS设置小于12px的文字怎么办?的详细内容

相关推荐