Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🎁第7期第4题：如何让Chrome浏览器支持小于12px的字体大小？ #47

Open
LinDaiDai opened this issue Jul 8, 2020 · 0 comments
Open

🎁第7期第4题：如何让Chrome浏览器支持小于12px的字体大小？ #47

LinDaiDai opened this issue Jul 8, 2020 · 0 comments
Labels
HTML

Comments

@LinDaiDai
Copy link
Owner

如何让Chrome浏览器支持小于12px的字体大小？

使用：-webkit-transform: scale(0.8);

注意⚠️：它修改的整个元素的大小，所以如果是内联元素的话则需要转换为块元素或者内联块元素：

<style>
  .font_size_12 {
    font-size: 12px;
  }
  .font_size_small {
    font-size: 12px;
    display: inline-block;
    font-size: 10px;
    -webkit-transform: scale(0.8);
  }
</style>
<body>
  <div class="font_size_12">
    霖呆呆
    <span class="font_size_small">
      小号霖呆呆
    </span>
  </div>
</body>

效果如下：

其它的方法，原来还有一个-webkit-text-size-adjust:none;属性，设置了整个之后就可以去掉Chrome的字体限制，但是在Chrome更新到27版本之后就被干掉了。呆呆在现在的Chrome中试了一下已经没有效果了。

另外，网上还有说把要缩小的字设置变为图片...靠图片来展示...

貌似都不太靠谱呀，有靠谱的小伙伴还希望可以留言哦。
@LinDaiDai LinDaiDai added the HTML label Jul 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
HTML
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@LinDaiDai