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

最新推荐文章于 2023-08-17 15:55:19 发布

m0_67402026

最新推荐文章于 2023-08-17 15:55:19 发布

阅读量576

点赞数 1

分类专栏： java 后端文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/m0_67402026/article/details/123576669

版权

java 同时被 2 个专栏收录

268 篇文章 14 订阅

订阅专栏

后端

12 篇文章 0 订阅

订阅专栏

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

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

m0_67402026

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何检测浏览器所支持的最小字体大小

一般浏览器会存在支持的最小字体的概念，也就是说，当我们给标签设置字体样式比浏览器所支持的最小字体小，则会会显示最小字体的大小，而不会显示我们设置的字体样式的大小。如何才能检测浏览器所支持的最小字体大小呢？ <script> let pStyle = document.getElementById("p") pStyle.style.fontSize = '10px' function getstyle(obj, key) { if (obj.current
复制链接

扫一扫

专栏目录