如何使用 CSS3 转换字体样式？

Posted 2023-03-06

【中文标题】如何使用 CSS3 转换字体样式？

【英文标题】：How to transform font-style with CSS3?

【发布时间】：2015-06-10 04:05:23

【问题描述】：

我有一个单字标题，它被分成两半，用@keyframe 进行动画处理，并在页面中间相遇。 问题：我需要两半之一在它到达页面中间的适当位置后从常规转换为斜体。 由于我不打算使标题可点击，因此使用悬停毫无意义。 有没有办法在不使用 javascript 的情况下做到这一点...？

【参考方案1】：

由于字体样式为not an animatable property，您可以使用倾斜转换。

h1 span 
  position: relative;

#title_part1 
  animation: part1_move 2s;

#title_part2 
  
  animation: part2_move 2s,part2_skew 4s;
  
  display: inline-block;
  -ms-transform: skewX(-20deg);
  transform: skewX(-20deg);


@keyframes part1_move 
  from 
    left: -100px;
  
  to 
    left: 0;
  



@keyframes part2_move 
  from 
    left: 100px;
    
  to
    left:0
  


@keyframes part2_skew
  from 
    transform:skewX(0);
    -ms-transform:skewX(0)
  
  50%
    transform:skewX(0);
    -ms-transform:skewX(0)
  
  to
    transform:skewX(-20deg);
    -ms-transform:skewX(-20deg)
  

<h1>
  <span id="title_part1">The start and </span>
  <span id="title_part2">the end of my title </span>
</h1>

相关问题：

Fade from normal text to italics text smoothly?

Gradual italics?

【讨论】：

我想你错过了after it has reached its proper position in the middle of the page 但这应该不难，只需制作两个不同的动画，其中倾斜动画的运行延迟等于移动动画的持续时间。很好的答案。

已更正，谢谢。制作两个动画并延迟第二个动画确实会更好。

@gael - 感谢您的帮助。出于某种原因，我认为“倾斜”与多边形或形状有关。

其中的文字也会出现倾斜！请注意，容器必须是块元素。在那种情况下inline-block 就足够了。

字体样式不可动画化的真正原因是，在常规和斜体之间制作动画不仅仅是将文本向某个方向倾斜的问题。在这种情况下，它会产生所谓的假斜体，其中排字机只是将类型倾斜而不是在实际的斜体中打印，因为字体不提供斜体，或者因为它不受支持。