Skip to content

Chrome不支持css字体小于12px的解决办法 #17

@chunhuigao

Description

@chunhuigao

方法1:

网上查到的一个方法:-webkit-text-size-adjust: none;
但是我在Google Chrome(版本号:83.0.4103.61)不生效。

方法2

使用CSS3中transform属性scale(x,y)将元素2D缩放;可以实现字体小于12px效果;
注意:transform:scale()这个属性只为可以缩放可以定义宽高的元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .textStyle {
    font-size: 12px;
    transform: scale(0.5);
    background: red;
    color: #fff;
  }
</style>

<body>
  <div class="box">
    <p class="textStyle">设置字体小于12px</p>
  </div>
</body>

</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions