一些浏览器(包括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>