如何检测浏览器所支持的最小字体大小
一般浏览器会存在支持的最小字体的概念，也就是说，当我们给标签设置字体样式比浏览器所支持的最小字体小，则会会显示最小字体的大小，而不会显示我们设置的字体样式的大小。如何才能检测浏览器所支持的最小字体大小呢？
<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)来进行缩放
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/123456291
内容来源于网络，如有侵权，请联系作者删除！
