语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>前端技术 >>CSS >>浏览器最小显示12px字体的解决方法

浏览器最小显示12px字体的解决方法

2019/1/11 9:23:40 0人评论 375次 作者:admin

谷歌浏览器上显示字体最小为12px,css设置font-size:10px,显示的时候还是12px大小,有一个div,想写10个字,但它太窄了,写到第8个字之后,就换行了。这时想加上transform:scale(0.5,1),来实现不换行。最终的效果是:最后2个字仍然在下面一行,整个div变窄了。…

    谷歌浏览器上显示字体最小为12px,css设置font-size:10px,显示的时候还是12px大小

    可以利用css中的transform属性来缩小:

    transform:scale(0.5,1)

    第一个参数是X轴比例,第二个参数是Y轴比例,第二个参数可省略,若缺省则等于第一个参数。

    缩小方向:

    默认是往中间缩小,可以添加 transform-origin:left ,往左侧缩

    注意:

    ①transform只有块级元素有这属性,一开始我把这个属性设置在span上,怎么都不出效果,换div就有效果了

    ②如果你是因为字体太大,放div中会自动换行,想用这方法来压缩字体,去除换行,那就省省吧,我刚踩过这个坑。这种方式并不是在压缩字体,而是在压缩整个div。

    举个例子:

    有一个div,想写10个字,但它太窄了,写到第8个字之后,就换行了。这时想加上transform:scale(0.5,1),来实现不换行。最终的效果是:最后2个字仍然在下面一行,整个div变窄了。

    最后的方法是,把div宽度加长,右margin设为负数,再进行压缩。

    谷歌浏览器默认最小字体为12px,小于12px的字体它都以12px显示,具体效果见下图。有些特殊情况下我们需要字体小点,特别是在制作英文网站的时候,怎么办?既然有问题,我们就有解决问题的方法。

    <p>xjun0812测试16像素</p>

    <p>xjun0812测试14像素</p>

    <p>xjun0812测试12像素</p>

    <p>xjun0812测试10像素</p>

    <p>xjun0812测试10像素</p>

    IE等浏览器效果如下:

    

1.jpg

    Chrome浏览器下的效果:

    

2.jpg

    在网上有一个方法就是在html或者body里添加一句谷歌浏览器专有的属性。

    html,body{ -webkit-text-size-adjust:none; }

    可是我用了之后发现并没有什么用,原来在新版本的谷歌浏览器里已经无效。那么我们现在应该怎么办呢?

    我们可以使用CSS3的一个缩放属性:transform:scale(),我这里给最后一行设置的代码如下(倒数第二行不做任何其他设置,以做参考):

    -webkit-transform:scale(0.833);

    /*这个数字0.833,是缩放比例,可以根据你自己的情况不同而不同。*/

3.jpg

    从上图可以看到最后一行是变小了,但是左边却出现了留白。是因为做缩放处理的时候把宽度也缩放了。还有要注意一点,如果这个<p>元素有背景的话,也会使背景也随着变化,所以,我们通常的做法是给<p>标签里再套个一个标签,我这里用<span>标签。

    <p>xjun0812测试16像素</p>

    <p>xjun0812测试14像素</p>

    <p>xjun0812测试12像素</p>

    <p>xjun0812测试10像素</p>

    <p><span>xjun0812测试10像素</span></p>

    你会发现现在反而没有效果了,如图:

4.jpg

    这是因为transform:scale()这个属性只为可以缩放可以定义宽高的元素,而span是行内元素;我们给span元素定义一个display:block,这样就可以了。

    我们会发现一个问题,不管span元素是否左浮动,还是会发现左边出现了留白,我们可以通过设置宽度等其他办法来解决,结果如下:

5.jpg

    最后,因时间仓促,资质有限,文中表述仅代表个人观点,如果有更好的方法,欢迎留言。


相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【广东省 广州市】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮