Chrome中的字体权重转换

Question

尝试font-weight使用CSS优雅地从'400'过渡到'600',但它似乎不适用于Chrome.这是一个已知的错误还是我做错了什么？

在这里查看小提琴以获取示例

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字体包括将字体钳位到像素网格的各种魔术,这使得期望字体系列包含每个可能的权重值是不现实的.

因为字体不是简单的矢量图像集合,所以它们也永远不会线性调整大小 - 将像素网格考虑在内.

此Google白皮书解释了为什么线性调整大小不适用于当前屏幕上的文字 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

通过同时进行快速颜色过渡（浅灰色到深蓝色），我似乎意外获得了“字体粗细”过渡效果。