一般浏览器会存在支持的最小字体的概念,也就是说,当我们给标签设置字体样式比浏览器所支持的最小字体小,则会会显示最小字体的大小,而不会显示我们设置的字体样式的大小。
如何才能检测浏览器所支持的最小字体大小呢?
<script>
let pStyle = document.getElementById("p")
pStyle.style.fontSize = '10px'
function getstyle(obj, key) {
if (obj.currentStyle) {
console.log('currentStyle')
return obj.currentStyle[key];
} else {
console.log('getComputedStyle')
return getComputedStyle(obj, false)[key];
}
}
console.log(getstyle(pStyle, 'fontSize'))
</script>
如上图所示,我们可以首先设置字体的样式,然后可以通过getStyle
函数来获取该对象的字体样式,如果不是和我们设置的不一致的话,则此时浏览器就不支持该字体大小。
如果我们想要设置更小的字体该怎么做?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>小字体方法</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
font-size: 12px;
}
.small-font {
-webkit-transform-origin-x: 0;
transform: scale(0.5);
}
</style>
</head>
<body>
<p class="small-font">温馨提示</p>
<p>温馨提示</p>
</body>
</html>
可以使用transform: scale(0.5)
来进行缩放