试图让font-weight从“400”到“600”使用CSS优雅过渡，但它不会出现在Chrome浏览器中工作。 这是一个已知的bug或我做错了什么？
这里检查小提琴为例
Answer 1:
的问题是，字体权值，用数字表示时，必须是100的倍数，以400和600之间的动画，字体将改变从400至500至600（3“帧”，如果你喜欢）和不会看非常流畅。 动画不会被1每次（400，401，402 ...）递增的重量，将通过100（400，500，600）递增的重量。 如果你的动画历时2秒，1秒后体重会突然变成500，2秒后重量会突然变成600; 没有在其间变化。
与您正在试图在这里什么的另一个问题是，你正在使用的字体（或的jsfiddle的默认，至少）不会有什么不同的font-weight: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>
http://jsfiddle.net/r4gDh/6/
数字字体权重，提供的不仅仅是正常和更加大胆的字体。 如果给出的确切重量是不可用的，然后使用600-900最近的可用较深的权重（或者，如果没有，最近的可用重量更轻），和100-500使用最近的可用重量更轻（或者，如果没有，则中，最接近的可用较暗重量）。 这意味着，仅提供正常和加粗字体，100-500是正常的，和600-900是大胆的。
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
这基本上意味着你不能顺利动画font-weight 。 即使你有100和900之间的所有的权重支持的改变不会是愉快的，有将500和600（其中较轻的重量达到较深的重量 ）之间的戏剧性的变化。
Answer 2:
字体重动画，目前没有基于无数次试验在Chrome和IE-10的支持。 这可能在未来改变。
Answer 3:
字体不是简单的矢量图像集（这就是为什么SVG字体从未起飞）。 OpenType字体包括各种魔法夹紧字体像素网格，这使得它不现实的字体系列有史以来包括每一个可能的权重值。
因为字体不是简单的矢量图像的集合，他们也将永远呈线性调整 - 将有颠簸走像素网格考虑在内。
此谷歌白皮书解释了为什么线性调整大小不适合文本当前屏幕工作https://docs.google.com/document/d/1wpzgGMqXgit6FBVaO76epnnFC_rQPdVKswrDQWyqO1M/edit
这就是为什么没有浏览器将尝试它，他们都将依赖于预先计算的字体粗细。
当视网膜显示器的最小公分母，但当前字体技术目标的当前屏幕，可以在十年内改变。
此Microsoft白皮书记录了一些标准字体权重值http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-components-postattachments/00-02-24-90-36/WPF-Font-Selection-Model .PDF
（但只是因为他们都记录并不意味着字体，实际上包括所有的人的数量倒不小）
你也许可以实现与SVG字体和一些JavaScript你想要的效果。 SVG的字体将文本使用垃圾虽然。
Answer 4:
我来这里是为了寻找自己的答案对如何转型字体粗细，并感到失望时，我看上面说不能做（或至少不是很好）批准的答案。
随着字体重量动画不可用，我决定尝试另一种效果，这实际上给你一个字体重效果......我根本就没想到这种类型的转变会工作。
下面是如何使体重增长：
.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;
}
完美流畅而正是我一直在寻找，当我第一次来到这个页面上。 希望它可以帮助别人。
Answer 5:
我似乎已经意外地获得“字体权重”过渡效果，通过执行同时快速颜色转变（浅灰到深蓝色）。
Answer 6:
虽然没有直接的办法让字体重量平稳过渡，我已经找到一种方法来做到这一点间接的（尽管有一些限制）。
从本质上讲，你可以简单地使用伪元素之一，为了让你想过渡到大胆，在伪元素上的字体重量是大胆和不透明度为之字型元素的镜像副本是0和悬停只是过渡伪元素的不透明度，并且做的伎俩有一个非常平滑的过渡。
你可以在这里看到一个演示：
http://jsfiddle.net/r4gDh/45/
HTML：
<div class="element" data-text="text will turn to bold on hover">
text will turn to bold on hover
</div>
在HTML你已经可以看到的限制之一，因为我们使用，我们需要通过元素的内容作为一个属性以及伪元素，所以内容是重复的。
CSS：
.element,
.element::before {
background: red;
font-weight:normal;
font-size:40px;
text-align:center;
display: inline-block;
padding: 0px 30px 0px 30px;
position: relative;
top: 0;
left: 0;
}
.element::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
content: attr(data-text);
opacity: 0;
font-weight: bold;
transition: all 1s linear;
}
.element:hover::before {
opacity: 1;
}
第二个局限来自于技术的本质，也就是因为你只是覆盖伪元素在原，那么元素需要有一个坚实的背景或者这是行不通的，因为原来的元素将在后台仍然可见。
有一件事你应该留意的是，伪元素和原始的元素具有相同的尺寸，为此，在演示中，我已经去除了伪元素的填充，所以你可能需要做同样的事情。
正如你看到的，让字体重过渡的这种方式也不是没有它的问题，并且很不理想，但是这是我目前能想到的，并在有限的情况下，像按钮和什么是最好的不是这是非常有用的，如果做正确看起来体面，即使在传统的浏览器。
Answer 7:
我已经调整了@ IDRA的小提琴，使正常的大胆过渡更加顺畅。 这里的小提琴： http://jsfiddle.net/y7rLwx95/
变化......由于要大胆当文本的宽度将得到更广泛的，我已经通过增加字母间距增加了一个初始的“拉伸”过渡：
.element:hover {
letter-spacing: 0.9px;
transition: all .3s linear;
}
然后，在延迟元素之前大胆::的衰落：
.element:hover::before {
opacity: 1;
transition-delay: .2s
}
也有一些额外的改动这里：
.element::before {
transition: all .3s linear; /* replace */
letter-spacing: 0; /* additional */
}
转换定时只是什么感觉对我。 最初的想法@Idra贴是我显著。 我接受这一事实，宽度应该是正常的，大胆的不同，因为这是不同的字体粗细的意图。 所以，真正的挑战，恕我直言，是要弄清楚如何在一个平稳，无震动方式2层的外观之间去。 这似乎是到目前为止，我已经找到了最好的解决方案。
文章来源: Font-Weight CSS Transition in Chrome
