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.

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

[css] 第20天 要让Chrome支持小于12px的文字怎么做? #67

Open
haizhilin2013 opened this issue May 5, 2019 · 8 comments
Open
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第20天 要让Chrome支持小于12px的文字怎么做?

@haizhilin2013 haizhilin2013 added the css css label May 5, 2019
@tiezhu92
Copy link

tiezhu92 commented May 6, 2019

1, 改用图片
2, 使用 -webkit-text-size-adjust:none; 但是不支持chrome 27.0以上版本
3, 使用 transform: scale( )缩小
暂时不知道更多方法了

@tzjoke
Copy link

tzjoke commented May 29, 2019

* {
    -webkit-text-size-adjust: none;
}

@Konata9
Copy link

Konata9 commented Aug 4, 2019

Chrome 中有最小字号的限制,一般为 12px。原因是 Chrome 认为小于这个字号会影响阅读。

当需要小于 12px 字体的时候,有以下几个方法可以使用。

  • -webkit-text-size-adjust:none; 这个属性在高版本的 Chrome 中已经被废除。
  • 使用 transform: scale(0.5, 0.5),但使用 transform 需要注意下面几点:
    • transform 对行内元素无效,因此要么使用 display: block; 要么使用 display: inline-block;
    • transform 即使进行了缩放,原来元素还是会占据对应的位置。因此需要做调整,最好是在外面再包一层元素,以免影响其他元素。
  • 作为图片。

最好的办法还是进行切图,或者就不要使用小于 12px 的字体。

@blueRoach
Copy link

  • transform: scale()
  • 图片

@MrZ2019
Copy link

MrZ2019 commented Sep 18, 2020

transform: scale()
图片

@amikly
Copy link

amikly commented Nov 7, 2021

1.用图片

2.-webkit-text-size-adjust:none;

这个属性在高版本(27后)的 Chrome 中已经被废除

#chrome10px{ 
    -webkit-text-size-adjust:none; 
    font-size:10px; 
}

3. transform: scale(0.5, 0.5)

需要注意以下几点:

  • transform 对行内元素无效,因此要么使用 display: block; 要么使用 display: inline-block;
  • transform 即使进行了缩放,原来元素还是会占据对应的位置。因此需要做调整,最好是在外面再包一层元素,以免影响其他元素
.px12 {
   font-size: 12px;
}
.px9 {
    font-size: 9px;
    display: inline-block;
    -webkit-transform: scale(0.75);        /* 12*0.75=9 */
}
.px6 {
    font-size: 6px;
    display: block;
    -webkit-transform: scale(0.5);        /* 12*0.5=6 */
    float: left;
}

@Iambecauseyouare
Copy link

1.使用zoom
2.-webkit-transform:scale();
3.-webkit-text-size-adjust:none;(自从chrome 27之后,就取消了对这个属性的支持。同时,该属性只对英文、数字生效,对中文不生效)

@lili-0923
Copy link

常见的解决方案有:
zoom
-webkit-transform:scale()
-webkit-text-size-adjust:none

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

9 participants