Html CSS3 可以转换字体大小吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9311116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can CSS3 transition font size?
提问by Squirrl
How can one make the font size grow bigger on mouse over? Color transitions work fine over time, but the font size switches immediately for some reason.
如何在鼠标悬停时使字体变大？随着时间的推移，颜色过渡效果很好，但由于某种原因字体大小会立即切换。
Sample code:
示例代码：
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;
}
回答by thirtydot
The color transitions fine over time, but the font switches immediately for some dagnabbit reason.
随着时间的推移，颜色过渡很好，但由于某些 dagnabbit 原因，字体会立即切换。
Your font-sizetransition is being overwritten by your colortransition.
您的font-size过渡正在被您的color过渡覆盖。
transition: font-size 12s; /* transition is set to 'font-size 12s' */
transition: color 12s; /* transition is set to 'color 12s' !! */
Instead, you must combine them all into one declaration:
相反，您必须将它们全部合并为一个声明：
transition: color 12s, font-size 12s;
See:http://jsfiddle.net/thirtydot/6HCRs/
见：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;
(Or, just use the allkeyword: transition: all 12s;- http://jsfiddle.net/thirtydot/6HCRs/1/).
（或者，只需使用all关键字：transition: all 12s;- http://jsfiddle.net/thirtydot/6HCRs/1/）。
回答by Artur Keyan
Try set transition for all properties:
尝试为所有属性设置过渡：
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
it is works as well.
它也有效。
ORjust font: transition: font 0.3s ease.
或者只是字体：transition: font 0.3s ease。
回答by Charlie
Transitions for font-sizeseem to step by pixel and thus aren't smooth.
过渡font-size似乎是逐个像素的，因此并不平滑。
If it's just one line, you might be able to use transform: scale(.8). Scale down and not up so you don't lose quality. You will likely also need to use transform-origin: 0 0or a different value depending on your text alignment.
如果它只是一行，您也许可以使用transform: scale(.8). 缩小而不是放大，这样你就不会失去质量。transform-origin: 0 0根据您的文本对齐方式，您可能还需要使用或 不同的值。
回答by ROFLwTIME
JS Fiddle Demo
JS小提琴演示
An alternative would be that you can also use a framework such as jQuery Transitto do this easily for you:
另一种选择是您还可以使用诸如jQuery Transit 之类的框架为您轻松完成此操作：
Javascript:
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:
CSS：
p
{
font-size: 12px;
color: #0F9;
}
