怎么让Chrome支持小于12px 的文字？

王小婷

发布于 2023-11-30 08:56:44

2650

发布于 2023-11-30 08:56:44

一些浏览器（包括Chrome）对小于12px的文字大小应用了最小字体限制，以提高可读性和避免模糊。但是，你可以使用CSS中的一些技术来覆盖这个限制，以使Chrome支持小于12px的文字。以下是一种常用的方法：

使用transform缩放：

.selector {
  transform: scale(0.8);
  transform-origin: 0 0;
}

通过使用transform属性的scale函数，可以缩小文字的大小。在这个例子中，scale(0.8)将文字缩小为原始大小的80%。transform-origin属性设置了缩放的基准点，这里设置为左上角（0 0）。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/css/bootstrap.min.css">
        <style>
            div {
                font-size: 12px;
                transform: scale(0.5);
                 transform-origin: 0 0;
            }
        </style>
    </head>
    <body>
        <div>怎么让Chrome支持小于12px 的文字？</div>
    </body>
    <script>

    </script>
</html>