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

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; }