带有动画的 Chrome 中的字体大小无法正常工作答案

【问题标题】：font-size in Chrome with animations doesn't work correctly带有动画的 Chrome 中的字体大小无法正常工作
【发布时间】：2019-04-24 22:55:43
【问题描述】：

似乎带有动画的字体大小无法正常工作。任何低于 font-size: 6px 的东西都不会改变元素的大小。这似乎是一个新事物，并且在 Firefox 中可以正常工作。请参见下面的示例。

编辑：

Chrome 版本：73.0.3683.86（官方版本）（64 位）
最小字体大小设置为 Tiny

铬

火狐

https://jsfiddle.net/72tdqxme/7/

.loader {
    margin-left: 2em;
    display: inline-block;
    vertical-align: bottom;
    font-size: 2px;
    position: relative;
    border-top: 1.1em solid rgba(255, 255, 255, 0.5);
    border-right: 1.1em solid rgba(255, 255, 255, 0.5);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.5);
    border-left: 1.1em solid #ffffff;
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

.loader, .loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform: scale(.3);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

【问题讨论】：

在链接到 jsfiddle 时必须包含代码 sn-p 的消息是有原因的......通过输入这个假代码块来解决它听起来像是一种侮辱。
Ps：不需要你的小提琴中的所有代码，只需尝试将文本的字体大小设置为 2px 并检查其计算值（将是6px）。 jsfiddle.net/5xvbfkgj
@Kaiido 再次出现问题是当有动画时，文本上的字体大小可以正常工作。
已知错误，您需要等待。 bugs.chromium.org/p/chromium/issues/detail?id=949471 我的小提琴中肯定返回了 6px 并且即使没有设置动画也肯定会看到错误：jsfiddle.net/Lhf2u34w

标签： javascript css google-chrome firefox

【解决方案1】：

-webkit-text-size-adjust 在Chrome 27 之后不再工作。

尝试使用transform

font-size:12px;
transform: scale(0.833);

【讨论】：

关键帧下可以使用scale
您可以在同一个声明中指定多个转换，以空格分隔的列表（当在同一个块中使用多个声明时，最后一个将覆盖以前的）。 transform: rotate(0deg) scale(0.833);

【解决方案2】：

在 Chrome v73 中对我来说看起来不错。也许您的 Chrome 用户配置文件设置了最小字体大小（在 Chrome 的设置中搜索“字体”）？

【讨论】：

检查设置并将其设置为 Tiny

【解决方案3】：

尝试在字体大小中使用 em 而不是 px，因为 em 与其直接或最近父级的字体大小相关

【讨论】：

使用em，会发生同样的事情，但在 Firefox 中有效。