今天给大家带来的教程是谷歌浏览器不支持设置CSS较小字体问题的解决方法。
先来看下 ie、火狐、谷歌浏览器下各个字体显示情况
ie下:
火狐下:
谷歌下:
【问题总结:】
①从上面的图可以很明显看出谷歌下 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以上字体:为了兼容、为了代码更简单 从新考虑权重下兼容性。
相信看了这些案例你已经掌握了方法
相关阅读:
以上就是谷歌浏览器不支持CSS设置小于12px的文字怎么办?的详细内容
相关推荐
css小笔记,关于如在使用css在 边框上写入文字?
JetBrains IDE Support 是一款谷歌浏览器上进行开发调试用的插件。支持HTML/CSS/JavaScript编辑和 JavaScript 调试。
CSS设置选中网页文字时的背景和颜色,内容包含默认样式、设置样式,具体可见文档内CSS样式设置。
众所周知,IE浏览器的性能是很差的,特别在使用诸如 WebQQ 2.0 这样的丰富的网页应用时,你就能明显感觉到 IE的内核 和 谷歌浏览器的webkit内核 之间的性能差异了,那么有没办法提高 IE 的性能呢? Chrome Frame 是...
谷歌浏览器是不支持12px以下小字体的,可能是考虑到用户体验吧。 网上也有一些文章介绍,说可以使用: 复制代码代码如下: -webkit-text-size-adjust:none; 但是,自chrome 27之后,就取消了对这个属性的支持。 ...
CSS代码实现背景透明而文字不透明,兼容支持火狐、360、谷歌、IE6-IE11等浏览器
CSS 针对谷歌浏览器(Chrome) safari的webkit核心浏览器CSS hack.txt )
在PC端用1px的边框线,看起来还好,但在手机端看起来就很难看了,而0.5px的分割线会有种精致的感觉。用普通写法border:solid 0.5px red;iPhone可以正常显示,android下几乎所有的浏览器都会把0.5识别为0,即无边框...
谷歌浏览器断网时恐龙快跑小游戏文件,下载后直接点开运行就可以玩了,文件中README文件为使用说明,请认真查看
介绍了10个很实但IE却不支持的CSS属性,列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的,就更有针对性的去编写CSS和Hack了
使用postcss-px2rem插件把px转变为rem,并配合给html根元素设置fontsize,来实现页面的自适应效果
CSS3实现的立体文字特效,附件提供了8种特殊效果,需要的童鞋可下载使用 请在支持CSS3属性的浏览器下浏览,推荐FF
CSS给文字链接加个漂亮的背景
HTML5 CSS3实现3D感极强的彩色立体文字源码,这个效果超赞啊,这种三维风格我很喜欢,而且...在CSS和JS中可修改三维效果选项,鼠标滑过文字时,文字响应鼠标,会晃动。本效果支持移动端和PC端的HTML5浏览器。源码完整。
前端开源库-postcss-px-to-viewportpostss px to viewport,一种将px转换为viewport单位(vw、vh、vmin、vmax)的CSS后置处理器。
在进行CSS页页布局时,页面的外观很重要,但也需要考虑字体与文字大小的问题,在jb51.net中也有过相关的介绍。如果发现设计人员十分关注字体及字体大小,我并不感到惊奇。使用CSS来编辑字体有各种各样的方法,每位...
css圆角,阴影,支持ie/firefox/chrome等全部浏览器
banner尺寸:宽1920px,高420px banner两边有箭头可切换,左下有5个切换按钮 效果不错,前来分享