MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 谷歌浏览器不支持CSS设置小于12px的文字怎么处理

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

www.MyException.Cn  网友分享于:2013-03-09  浏览:0次
谷歌浏览器不支持CSS设置小于12px的文字怎么办?

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

 

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

ie下:

huohu

火狐下:

huohu

谷歌下:

guge

 

【问题总结:】

     ①从上面的图可以很明显看出谷歌下 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()  方法来解决呢?

关于css3的transform缩放属性,我在后面文章http://570109268.iteye.com/admin/blogs/2406787里做过了总结

 

最新解决方案

这个属性前给-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的文字怎么办?的详细内容

文章评论

聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
 程序员的样子
程序员的样子
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
程序员必看的十大电影
程序员必看的十大电影
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
每天工作4小时的程序员
每天工作4小时的程序员
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
Java程序员必看电影
Java程序员必看电影
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
我的丈夫是个程序员
我的丈夫是个程序员
我是如何打败拖延症的
我是如何打败拖延症的
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员和编码员之间的区别
程序员和编码员之间的区别
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
老程序员的下场
老程序员的下场
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员应该关注的一些事儿
程序员应该关注的一些事儿
旅行,写作,编程
旅行,写作,编程
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
代码女神横空出世
代码女神横空出世
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
漫画:程序员的工作
漫画:程序员的工作
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
如何成为一名黑客
如何成为一名黑客
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
鲜为人知的编程真相
鲜为人知的编程真相
程序员的鄙视链
程序员的鄙视链
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
总结2014中国互联网十大段子
总结2014中国互联网十大段子
编程语言是女人
编程语言是女人
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有