0

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

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

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

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 */
}
4

1 回答 1

0

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

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

* { text-rendering: optimizelegibility; }
于 2013-06-24T19:57:06.303 回答