chrome字体小于12px

在项目中需要兼容Firefox、chrome、Safari浏览器，主要在于字体大小＜12px时的兼容，之前已经在css中加入了-webkit-transform=scale(0.75)；-webkit-transform-origin=0 0；样式实现chrome中字体大小为9px。但是今天发现Safari本身是可以实现字体大小＜12px，却同样受到css样式的影响，于是9px的字体在safari上显示出来的只有9*0.75=6.75px大小了，最终决定采用浏览器判断+jQuery中的.css( )方法来控制字体大小，

1 if (/chrome/i.test(navigator.userAgent.toLowerCase( ))) {
2 　　$(‘.stepps‘).css({‘-webkit-transform‘:‘scale(0.75)‘,‘-webkit-transform-origin‘:‘0 0‘});
3 }

chrome字体小于12px,布布扣,bubuko.com

时间： 2024-08-07 03:21:31

chrome字体小于12px的相关文章

让谷歌浏览器 chrome 支持小于12px的字体

webkit的私有属性:{-webkit-text-size-adjust:none;} 但是,在最新版的谷歌里.已经不在支持这个属性啦. 用css3的transform:scale()缩放大小,但是缩放的宽度是不会改变的.所以额外加了个span标签, 又用了另外的 专门给chrome的样式 @media screen and (-webkit-min-device-pixel-ratio:0) { } 另外:火狐 @-moz-document url-prefix() { } #nav { w

谷歌浏览器字体小于12px不能正常显示bug

google浏览器支持的最小字体是12px,当字体小于12px时还是只能显示12px: p{ font-size: 8px; -webkit-transform:scale(0.67); -webkit-transform-origin: 0 0 0; } 原文地址:https://www.cnblogs.com/jddk/p/8269120.html

【css】怎么让Chrome支持小于12px 的文字

谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响.CSS样式定义如下:-webkit-text-size-adjust:none; 但是在最新版的谷歌里.已经不在支持这个属性啦,需要通过css3的transform来解决,方法如下: css部分 html布局 body,p{ margin:0; padding:0;}p{font-size:10px;}span{-webkit

google chrome字体最小12px的问题

解决Google浏览器不支持12px以下的字体大小的问题,有时设定了12PX,可在浏览器看时确不起作用 网络出现内核的浏览器有微软的Internet Explorer, Mozilla的Firefox, Apple的Safari, Opera, Google Chrome,今天看兼容发现Opera 跟Google Chrome的浏览器不能根据定义的字号变小. 目前Opear的问题还是没能解决,Chrome浏览器可算是解决了那BUG了.这个不知道算不算Chrome的BUG,有人说他是人家臣Chro

怎么让Chrome支持小于12px 的文字

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

移动端开发时，让字体小于12px垂直居中的方法

* { margin: 0 } .small-font { display: inline-block; height: 30px; line-height: 30px; border: 1px solid red; font-size: 20px } .container { display: table } .content { background-color: gray; font-size: 10px; display: table-cell; vertical-align: midd

Chrome不支持css字体小于12px的解决办法

我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chrome私有属性:-webkit-text-size-adjust:none; 可是我进行验证后发现并无效果.后来查资料了解到在Chrome 27之后就取消了对这个属性的支持,那么我们应该如何设置Chrome下的字体呢? 可以利用css3的缩放属性:transform:scale() .small-f

chrome浏览器小于12px字体的解决方案

第一种解决方案: 1.设置-webkit-text-size-adjust:none;  #chrome10px{      -webkit-text-size-adjust:none; font-size:10px; }: 第二种解决方案: #chrome10px{ font-size : 12px; -webkit-transform : scale(0.84,0.84) ; *font-size:10px; display:block; } 第三种解决方案: .small-font{ fo

Chrome谷歌浏览器下不支持css字体小于12px的解决办法

先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一直有一个方法就是给当前样式添加谷歌私有属性:-webkit-text-size-adjust:none; 可是我进行验证后发现,在谷歌现在的新版本里已经无效.那么我们应该如何设置谷歌下的字体呢? 我们可以使用到 css3里的一个属性:transform:scale() 属性介绍可以戳这里:http: