@ font-face使用CSS3關鍵幀動畫時裁剪的字體

我有四個絕對定位的div，淡入和移動使用css3 @-webkit-keyframe動畫。我注意到的是，我使用的@font-face的一些襯線和下行會在div的自動計算邊緣處被裁剪掉。（我使用text-align: left，所以我只注意到這在div的左邊和底部邊緣@ font-face使用CSS3關鍵幀動畫時裁剪的字體

我可以通過爲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 */ 
}

來源

2013-02-21 paulrehkugler

您可以在小提琴中複製此問題嗎？ – Mooseman 2013-02-21 15:27:21

@Mooseman沒有。似乎無法在其他地方重現它... – paulrehkugler 2013-02-21 15:50:06

那麼你能提供一個鏈接嗎？必須有其他CSS干擾。 – Mooseman 2013-02-21 15:50:34

我跟一些WebKit開發者交談過，發現了一個新的WebKit錯誤。他們用網絡渲染術語說話（其中我完全無能爲力），但我相信這是他們打開的問題：https://bugs.webkit.org/show_bug.cgi?id=117540

與此同時，解決方法是將此CSS添加到您的網頁（警告：這將大幅增加大量文本的渲染時間）：

* { text-rendering: optimizelegibility; }

來源

2013-06-24 19:57:06 paulrehkugler

@ font-face使用CSS3關鍵幀動畫時裁剪的字體

回答

相關問題