一般浏览器会存在支持的最小字体的概念，也就是说，当我们给标签设置字体样式比浏览器所支持的最小字体小，则会会显示最小字体的大小，而不会显示我们设置的字体样式的大小。
如何才能检测浏览器所支持的最小字体大小呢？

<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)来进行缩放

如何检测浏览器所支持的最小字体大小

相关文章

热门标签

最新文章