Chrome中字体大小的CSS转换

尝试使用CSS将字体从“400”优雅地过渡到“600”，但在Chrome中似乎不起作用。这是一个已知的bug还是我做错了什么

---

问题在于，当以数字表示时，字体权重必须是100的倍数。若要在400和600之间设置动画，字体将从400更改为500到600（如果愿意，可以更改为3帧），并且看起来不是很平滑。动画不会每次将权重增加1（400401402…），而是将权重增加100（400500600）。如果动画持续2秒，1秒后权重将突然变为500，2秒后权重将突然变为600；没有中间的变化

您在这里尝试的另一个问题是，您使用的字体（或者至少是JSFiddle的默认字体）与

字体重量：500没有任何不同，这意味着它默认为400:

<p style="font-weight:400;">a - 400, normal</p>
<p style="font-weight:500;">a - 500 (no support, defaults to 400)</p>
<p style="font-weight:600;">a - 600 (bold)</p>
<p style="font-weight:650;">a - 650 (not valid, defaults to 400)</p>

a-400，正常

a-500（不支持，默认为400）

a-600（粗体）

a-650（无效，默认为400）

数字字体权重用于提供不仅仅是普通字体和粗体字体的字体。如果给定的准确重量不可用，则600-900使用最接近的可用较暗重量（如果没有，则使用最接近的可用较轻重量），100-500使用最接近的可用较轻重量（如果没有，则使用最接近的可用较暗重量）。这意味着对于仅提供普通和粗体的字体，100-500为普通，600-900为粗体

---

这基本上意味着您无法平滑地设置

字体权重的动画。即使您支持100到900之间的所有权重，更改也不会令人愉快，在500到600之间会有一个巨大的变化（其中较轻的权重满足较暗的权重）。
基于大量测试，Chrome和IE-10目前不支持字体权重动画。这在将来可能会发生变化。
我似乎意外地获得了“字体重量”转换效果，通过同时进行快速颜色转换（浅灰色到深蓝色）。
字体不是简单的矢量图像集合（这就是为什么svg字体从未流行的原因）。Opentype字体包含各种将字体夹紧到像素网格的魔法，这使得期望字体系列包含所有可能的权重值变得不切实际

因为字体不是简单的矢量图像集合，所以它们也永远不会线性地调整大小——考虑到像素网格，会出现凹凸

这篇谷歌白皮书解释了为什么线性调整大小不适用于当前屏幕上的文本

这就是为什么没有浏览器会尝试它，而且它们都依赖于预先计算的字体权重

这可能会在十年内发生变化，当时视网膜显示是最低的公分母，但当前的字体技术针对的是当前的屏幕

此Microsoft白皮书记录了一些标准字体权重值

（但仅仅因为它们都有文档记录，并不意味着实际上包含所有这些内容的字体数量不算少）

您可能可以使用svg字体和一些javascript实现所需的效果。svg字体对于文本使用来说是垃圾。
虽然没有直接的方法可以让字体的重量平滑过渡，但我已经找到了一种间接实现这一点的方法（尽管有一些限制）

本质上，您可以简单地使用其中一个伪元素来创建要将字体转换为粗体的元素的镜像副本，其中伪元素上的字体权重为粗体，不透明度为0。在悬停状态下，只需转换伪元素的不透明度，就可以实现非常平滑的转换

您可以在此处看到演示：


HTML:

第二个限制来自该技术的性质，即由于您只是将伪元素覆盖在原始元素上，因此该元素需要有坚实的背景，否则将无法工作，因为原始元素将在背景中保持可见

你需要注意的一点是，伪元素和原始元素具有相同的维度，为此，在演示中，我删除了伪元素上的填充，因此你可能需要做类似的事情

正如你所看到的，这种获得字体重量转换的方法并非没有问题，而且离理想还很远，但这是我目前所能想到的最好的方法，在一些有限的情况下，比如按钮和其他不合适的东西，这是非常有用的，如果做得正确，即使在传统浏览器中也会看起来不错。
我来这里是为了自己找到如何转换字体重量的答案，当我读到上面批准的答案时，我很失望，说这是不可能的（或者至少不是很好）

由于字体权重动画不可用，我决定尝试另一种效果，它实际上给你一个字体权重效果。。。我甚至认为这对这种类型的过渡不起作用

以下是如何使体重增加：

.weightGrow:hover {
    text-shadow:
    -1px -1px 0 #2DD785,
    1px -1px 0 #2DD785,
    -1px 1px 0 #2DD785,
    1px 1px 0 #2DD785;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

非常流畅，这正是我第一次登上这一页时想要的。希望它能帮助别人。
我已经调整了@Idra的小提琴，使普通到粗体的过渡更加平滑。这是小提琴：

变化。。。由于使用粗体时文本宽度会变宽，因此我通过增加字母间距添加了一个初始“拉伸”过渡：

.element:hover {
   letter-spacing: 0.9px;
   transition: all .3s linear;
}

然后延迟bold:：before元素的淡入：

.element:hover::before {
   opacity: 1;
   transition-delay: .2s
}

这里还有一些额外的调整：

.element::before {
   transition: all .3s linear;  /* replace */
   letter-spacing: 0;           /* additional */
}

过渡时间就是我觉得合适的时间。@Idra发布的最初想法对我来说意义重大。我接受这样一个事实，即宽度应该在普通字体和粗体字体之间有所不同，因为这是不同字体权重的目的。所以真正的挑战，伊姆霍，
.element:hover::before {
   opacity: 1;
   transition-delay: .2s
}

.element::before {
   transition: all .3s linear;  /* replace */
   letter-spacing: 0;           /* additional */
}