深圳移动网站建设公司价格,去了外包公司就毁了吗,网站建设的大功效,招标网站有哪些coder.png在这一年的工作中#xff0c;我发现很多问题你利用自己的「聪明才智」绕过去了#xff0c;总有一天它会和你不期而遇#xff0c;今天我们就来直面一个字体兼容性的小问题#xff1a;Chrome谷歌浏览器下不支持css字体小于12px。我们先来看个效果图(chrome下)#…coder.png在这一年的工作中我发现很多问题你利用自己的「聪明才智」绕过去了总有一天它会和你不期而遇今天我们就来直面一个字体兼容性的小问题Chrome谷歌浏览器下不支持css字体小于12px。我们先来看个效果图(chrome下)给你看个栗子.png从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时显示的都是一样大小都是默认12px那么网上有一个方法就是给当前样式添加Chrome私有属性-webkit-text-size-adjust:none;可是我进行验证后发现并无效果。后来查资料了解到在Chrome 27之后就取消了对这个属性的支持那么我们应该如何设置Chrome下的字体呢.small-font{font-size: 12px;-webkit-transform: scale(0.5);}这样在元素上加上这个属性就OK了但是只这样写可不会兼容IE、FF哦所以再给一个兼容性写法.small-font{font-size: 12px;-webkit-transform: scale(0.5);}.smallsize-font{font-size: 6px;}温馨提示这时候有同学说你这不对啊我加了这样式就没效果别急哈仔细看下你的元素是不是行内元素啊注意:transform:scale()这个属性只可以缩放可以定义宽高的元素而行内元素是没有宽高的我们可以加上一个display:inline-block;属性就好啦。PS:有小伙伴让用rem解决我在这里解释一下哈em、rem是一种相对单位根据根元素的大小计算出来目的是浏览器的字体大小变化时页面布局及字体大小能跟着自适应。也就是说反应到浏览器要渲染是还是xx px那Chrome浏览器本身是渲染不了12px以下的字体的所以这个方法是不可行的rem虽好但不对这个症。给我点赞的都是小可爱 ^_^
