Question

我有四个绝对定位的div，它们使用css3 @-webkit-keyframe动画淡入并移动。我注意到的是我使用的@font-face的一些衬线和下降部分在div的自动计算边缘被裁剪。（我正在使用text-align: left，所以我只在div的左边和底边注意到这一点。

我可以通过为div定义固定大小并更改为text-align: center来解决此问题，但我很好奇是否有更好的解决方法，所以我不必更改如果文本更改或我需要更改font-size。

，则div的大小

编辑：这里有一些代码可以让你了解我正在做什么

div#text_2
{ 
    position: absolute;
    top: 288px;
    left: 100px;
    font-size: 65px;
    color: #C0DB81;
    font-family: 'TFArrow-Medium'; /* This is defined in another css file */
    -webkit-animation-delay: 0s;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.35, 1.0);
    -webkit-transform: translateZ(0);
    -webkit-animation-duration: 4s;
    -webkit-animation-name: text_fade_in2;
}

@-webkit-keyframes text_fade_in2
{
    0%      { opacity: 0; }
    25%     { opacity: 0; }
    50%     { opacity: 1; }
    100%    { opacity: 1; }
}

这解决了裁剪问题：

div#text_2
{ 
    position: absolute;
    top: 288px;
    left: 100px;
    font-size: 65px;
    color: #C0DB81;
    font-family: 'TFArrow-Medium'; /* This is defined in another css file */
    -webkit-animation-delay: 0s;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.35, 1.0);
    -webkit-transform: translateZ(0);
    -webkit-animation-duration: 4s;
    -webkit-animation-name: text_fade_in2;
    height: 65; /* 60px is the auto-calculated height in Safari */
}

Answer 1

我与一些WebKit开发人员交谈过，我发现了一个新的WebKit错误。他们用网络渲染术语（我完全无能为力）说话，但我相信这是他们打开的问题：https://bugs.webkit.org/show_bug.cgi?id=117540

同时解决方法是将此CSS添加到您的网页（警告：这将大幅增加大量文本的渲染时间）：

* { text-rendering: optimizelegibility; }

使用CSS3关键帧动画时@ font-face字体裁剪

1 个答案: