chrome
chrome浏览器的默认字体大小是16px,它所能支持设置的最小字体大小是12px,也就是说,当你使用font-size
属性设置到12px以下的时候字体大小不再改变。现在提供解决方案。
关键字:transform:scale()
适用对象:display属性为block/inline-block
- 代码1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
p{
font-size: 12px;
line-height:1em;
}
</style>
</head>
<body>
<p>我是P</p>
</body>
</html>
代码1效果图:
盒模型:
当将p标签的font-size
设置成10px
的时候,会发现,p标签的高度依旧是12px
,这说明,我们通过单独设置font-size
并不能让字体大小小于12px
- 代码2:
以字体大小为16px
举例子,先上个16px
大小的字体图以方便对照
16px
字体图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
p{
font-size: 16px;
line-height:1em;
-webkit-transform: scale(0.8);
}
</style>
</head>
<body>
<p>我是P</p>
</body>
</html>
效果图:
盒模型图:
可以看到,字体明显变小了,且得到的字体大小:16px X 0.8 = 12.8px,但是这里有两点需要注意的。
第一点:字体变小了,但是p元素的盒模型(content)高度没有发生变 化;这很好理解,这是因为transform 的所有属性都不改变页面元素的布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
p{
width: 300px;
height: 300px;
-webkit-transform:scale(0.8);
border: 1px solid red;
}
.a{
width: 300px;
height: 300px;
border: 1px solid red;
margin-top: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="a">
<p>
我是p
</p>
</div>
</body>
</html>
效果图:
p标签的盒模型:
当对p加父容器和对p本身设置宽高以及边框;设置scale(0.8)
,p标签自动上下居中(自身原来的宽高-缩放后的宽高得到的宽高平均分配到上下左右);
用chrome自带的盒模型发现,p标签内容占据宽度依旧是300px X 300px;
第二点:字体在变小的同时,p标签也发生了移动。
由上面的代码发现,scale()
缩小其实是以盒模型的中点为原点缩放的,因为这个原因,所以p标签在缩小后发生“移动”,解决方法也很简单,就是更改模型形变的原点,使用-webkit-transform-origin: 0 0;
将原点设为P标签得到左上角,这样子就能形变后发生“移动”的问题。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
p{
width: 300px;
height: 300px;
-webkit-transform:scale(0.8);
/*设置形变原点*/
-webkit-transform-origin: 0 0;
border: 1px solid red;
}
.a{
width: 300px;
height: 300px;
border: 1px solid red;
margin-top: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="a">
<p>
我是p
</p>
<span>我是p后面的span</span>
</div>
</body>
</html>
效果图:
总结:
当元素发生放大或者缩小的时候,子元素也会随着父元素的发生相应的形变。利用这一个特点,解决了chrome浏览器设置小于12px
的字体