CSS3可以转换字体大小吗？

Posted 2023-03-06

【中文标题】CSS3可以转换字体大小吗？

【英文标题】：Can CSS3 transition font size?

【发布时间】：2012-03-07 20:11:39

【问题描述】：

如何让鼠标悬停时字体变大？随着时间的推移，颜色过渡效果很好，但由于某种原因，字体大小会立即切换。

示例代码：

body p 
     font-size: 12px;
     color: #0F9;
     transition:font-size 12s;
     -moz-transition:font-size 12s; /* Firefox 4 */
     -webkit-transition:font-size 12s; /* Safari and Chrome */
     -o-transition:font-size 12s;
     transition:color 12s;
     -moz-transition:color 12s; /* Firefox 4 */
     -webkit-transition:color 12s; /* Safari and Chrome */
     -o-transition:color 12s;


 p:hover 
      font-size: 40px;
      color:#FC0;
 

【参考方案1】：

font-size 的过渡似乎是逐个像素的，因此并不平滑。

如果只有一行，您也许可以使用transform: scale(.8)。缩小而不是放大，这样你就不会失去质量。您可能还需要使用 transform-origin: 0 0 或其他值，具体取决于您的文本对齐方式。

#size ,#transform
  height: 80px;
  position:absolute;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-direction: alternate;


#size 
  animation-name: size;


@keyframes size 
  from 
    font-size:10px;
    left:155px;
    top:40px;
  

  to 
    font-size:80px;
    top:0;
    left:30px;
  


#transform 
  animation-name: transform;
  transform-origin: center middle;
  font-size:80px;
  top:80px;


@keyframes transform 
  from 
    transform:scale(.1);
  
  to 
    transform:scale(1);
  

<div id=size>Font-size</div>
<div id=transform>Transform</div>

【讨论】：

这是一个非常好的提示！在移动设备上面临字体大小的生涩动画，尤其是 android，而在桌面上一切都很好。依靠transform: scale() 代替font-size 修复了它。现在在所有平台上都很流畅。

【参考方案2】：

尝试为所有属性设置过渡：

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;

它也有效。

或 只是字体：transition: font 0.3s ease.

【讨论】：

错误答案，它有效，但 font-size 不是字体的“子属性”。 font 属性不存在，它是一个简写属性

【参考方案3】：

JS Fiddle Demo

另一种方法是您也可以使用诸如jQuery Transit 之类的框架为您轻松完成此操作：

Javascript：

$("p").hover( function () 
    //On hover in
    $("p").transition( 'color': '#FC0', 'font-size': '40px' , 1000);    
, function () 
    //On hover out
    $("p").transition( 'color': '#0F9', 'font-size': '12px' , 1000);
);

CSS：

p 


font-size: 12px;
color: #0F9;

【讨论】：

这个问题甚至没有引用 javascript。

【参考方案4】：

随着时间的推移颜色过渡很好，但字体会切换 立即出于某种dagnabbit原因。

您的font-size 转换正在被您的color 转换覆盖。

transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s;     /* transition is set to 'color 12s' !! */

相反，您必须将它们全部合并到一个声明中：

transition: color 12s, font-size 12s;

见：http://jsfiddle.net/thirtydot/6HCRs/

-webkit-transition: color 12s, font-size 12s;
   -moz-transition: color 12s, font-size 12s;
     -o-transition: color 12s, font-size 12s;
        transition: color 12s, font-size 12s;

（或者，只需使用 all 关键字：transition: all 12s; - http://jsfiddle.net/thirtydot/6HCRs/1/）。

【讨论】：

+one 使用“dagnabbit”这个词来回答 op 的“what in tarnation”问题：P #LanguageStyleMatching

那是 OPs 分阶段，有人出于任何原因将其从他的问题中编辑出来。

出于性能原因，我认为不要使用 all 关键字进行转换。它可以使您的页面非常缓慢。选择更详细的语法：transition: color 12s, font-size 12s;

有没有办法做到同样的效果，但使用 background-color 和 background-clip 属性？我正在尝试这样做:) 如果已经有解决方案，我将不胜感激。

@LeonardoMaffei：如果找不到答案，我建议您提出一个新问题。请务必包含您的代码、演示以及对您正在尝试执行的操作的详细说明。