针对谷歌默认最小字体12px的正确解决方案 (css、html)
来源:互联网 发布:尘埃3 mac g29设置 编辑:程序博客网 时间:2024/06/07 10:00
今天晨会,产品要求把以前12px的字体改小一点,我心想这有什么难的,就随口答应了。哪知,改css的时候,谷歌浏览器中font-size小于12px时,字体就不会再缩小了。当时我的第一反应就是会不会是其他css把字体覆盖了。结果看了半天也没发现。于是,只百度一伙了,结果还真让人大吃一惊:原来谷歌以及谷歌内核的浏览器在中文语言下最小字体只能是12px。不知道这算是一个bug还是谷歌人性化的设计。不管那么多了,反正要解决这个问题呀~既然这是一个经典的兼容性问题,一定有很多解决方法吧。让人吃惊的是,再百度一伙,网上所有的解决方案都惊奇地相似:
html{
-webkit-text-size-adjust:none;
}
然后我满心欢喜地用上去之后,发现并没有什么鸟用。再后来,又查了下资料了解到在chrome 27之后,就取消了对这个属性的支持。尼玛,这不是坑爹吗?柳暗花明又一村,然后发现了另一种解决办法:
.small-font{
font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.90);
}
利用css3的缩放,其最终大小就是:12px * 0.9(缩放比例) = 10.8px;
居然行得通。但回头一想,这么写的话,IE7 IE8会不会不兼容,还是12px呢?不出所料,果然不兼容。此时,又回头一想,要不再加个样式font-size?试了一下,果然兼容谷歌,IE7,IE8,代码如下:
.small-font{
font-size:12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.90);
}
.smallsize-font {
font-size:10.8px;
}
<p style="color: #FF0000;" class="small-font smallsize-font">温馨提示:</p>
额,想了下,别人应该也会遇到这个问题,不能再被网上并不能解决问题的方法浪费时间了,所以就写了这个随笔~
哈哈~终于写完了,第一次写,好紧张~
- 针对谷歌默认最小字体12px的正确解决方案 (css、html)
- 针对谷歌默认最小字体12px的正确解决方案
- 针对谷歌浏览器以及谷歌内核的浏览器默认最小字体12px的正确解决方案
- 针对谷歌对于小于12px的字体默认为12px的解决方法小结
- 谷歌下面不支持小于12px字体的解决方案
- 对于默认字体最小为12px解决方法
- Chrome 最小字体12px
- Chrome 最小字体12px
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- Chrome谷歌浏览器下不支持css字体小于12px的解决办法
- rem-针对屏幕旋转和默认字体大小不是16px的解决方案
- chrome浏览器支持的最小字体为12px
- 中文版chrome不支持小于12px字体定义的解决方案
- 中文版Chrome浏览器不支持12px以下字体的解决方案
- 中文版Chrome浏览器不支持12px以下字体的解决方案
- 中文版Chrome浏览器不支持12px以下字体的解决方案
- 字体属性设置(一):谷歌浏览器12px以下字体的显示;方法和原理
- Java后台开发<二>:Spirng+SpringMVC+Maven+Mybatis+MySQL项目搭建
- 前端资源教程汇聚
- 微信小程序开发之画布canvas 饼状图
- 前后端分离的探索(四)
- python paramiko ssh-解决强制修改密码登录问题
- 针对谷歌默认最小字体12px的正确解决方案 (css、html)
- 如何手工删除exe文件夹病毒
- C++知识
- javascript和java数组中去掉重复元素的方法
- cell中视频播放 视频录制
- arm汇编
- 收集的一些discuz插件常用插件。
- first
- C#XmlDocument无法读取utf-16文件