使用getPropertyValue获取到的字体字号最小只能获取到10px,这是为什么?

<style>
    div{
        font-size: 5.21px;
    }
</style>
<body>
    <div>
        111
    </div>
    <script>
        let div = document.querySelector('div');
        let style = window.getComputedStyle(div);
        console.log(style.getPropertyValue('font-size')) //10px
    </script>
</body>
阅读 2.2k
3 个回答

浏览器有最小字号限制。

以 Edge for Windows 浏览器为例,其设置在“外观 / 自定义字体”下:

image.png

通常来说用户也不会去改这个玩意儿,默认是多少就是多少,所以一般网页设计中需要 10px/12px 以下的字号,需要通过 transform 等方式间接实现。

大部分浏览器有最小字号,为了阅读方便,如果你想要更小的字体,可以用 SVG 或者 Canvas 来绘制文字。

在OP你的浏览器端中有效的 font-size 值最小应该就是 10px 了。在我这边获取到的是 12px。这个得看每客户端的浏览器配置项了
所以当样式中设置 font-size: 5.21px 时我们获取到的并不是 5.21px。但是如果设置为 0px 应该会返回 0

比如说我设置 Chrome最小字号9(可以在 chrome://settings/fonts 中修改),那么输出的 font-size 也会是 9

浏览器设置

字号输出

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题