Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

tiezhu92

tiezhu92 commented on May 6, 2019

@tiezhu92

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

tzjoke

tzjoke commented on May 29, 2019

@tzjoke
* {
    -webkit-text-size-adjust: none;
}
Konata9

Konata9 commented on Aug 4, 2019

@Konata9

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

blueRoach commented on Jun 9, 2020

@blueRoach
  • transform: scale()
  • 图片
smile-2008

smile-2008 commented on Sep 18, 2020

@smile-2008

transform: scale()
图片

amikly

amikly commented on Nov 7, 2021

@amikly

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

Iambecauseyouare commented on Mar 5, 2023

@Iambecauseyouare

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

lili-0923

lili-0923 commented on Feb 29, 2024

@lili-0923

常见的解决方案有:
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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@blueRoach@tzjoke

        Issue actions

          [css] 第20天 要让Chrome支持小于12px的文字怎么做? · Issue #67 · haizlin/fe-interview