如何在jQuery中使用css font-weight属性为文本设置动画?正常到粗体 [英] How to animate text with css font-weight property in jQuery ? normal to bold

问题描述

我正在尝试使动画效果像不透明效果一样，这会使文本变粗.尝试了通常的animate()方法，但是没有用.搜索它，但找不到任何示例. 可以这样做吗?

I am trying to animation like opacity effect, which turns text bolder slowly. Tried usual animate() method but didn't work. Searched for it but coundn't find any example. Is it possible to do this?

jsFiddle.

jQuery:

var Text = $('h1');
Text.click(function() {
    Text.animate({'font-weight':'bold'},600)
        .delay(200).animate({'font-weight':'normal'},600);
});

推荐答案

可悲的是，我认为这是不可能的.

字体中的每个字符都有特定的形状.此外，不同权重的相似字符也很不同-粗体字符不仅仅具有与常规对应字符的数学定义的偏移量.

Sadly I think this is impossible.

Each character in a font has a specific shape. In addition, similar characters in different weights weights are also distinct—a bold character does not simply have a mathematically-defined offset from its regular counterpart.

使用jQuery.css()从常规跳到粗体或斜体非常容易，但是jQuery.animate()目前不可能浏览器中字体粗细的过渡.同样，在动画中也很难做到，因为不同的权重之间没有框架"，因为它们都是分别绘制的.

It would be very easy to jump from regular to bold or italic with jQuery.css(), but there it is currently impossible to jQuery.animate() the transition of font-weight in the browser. It is hard to do in animation as well because there are no "frames" between the different weights, as they are all drawn separately.

如果您选择的字体具有不同的粗细字母间距，例如 Exo ，并从稀薄到黑色执行步进动画，您可能会接近所需的结果.

If you choose a font that has a consistant spacing of letters for the different weights—such as Exo—and do a stepped animation from thin to black you might come close to the desired result.

从您的jsFiddle开始，这就是我可以想到的:

Starting from your jsFiddle that is what I could come up with:

正在使用jsFiddle.

以及背后隐藏的Javascript:

And the rather dumb Javascript behind it:

Text.click(function() {

  Text.css({'font-weight':200});
  setTimeout(function(){ Text.css({'font-weight':300})}, 30)
  setTimeout(function(){ Text.css({'font-weight':400})}, 60)
  setTimeout(function(){ Text.css({'font-weight':500})}, 90)
  setTimeout(function(){ Text.css({'font-weight':600})},120)
  setTimeout(function(){ Text.css({'font-weight':700})},150)
  setTimeout(function(){ Text.css({'font-weight':800})},180)
  setTimeout(function(){ Text.css({'font-weight':900})},210)

});

这篇关于如何在jQuery中使用css font-weight属性为文本设置动画?正常到粗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！