一些浏览器（包括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>
网友评论