問題描述
我正在使用 -webkit-transform: rotate() 旋轉一個元素，在 Chrome 14.0.835.2 dev-m 中，它對元素內(nèi)的文本做了一些非常奇怪的事情.它讓我想起了在 Photoshop 中使用平滑"抗鋸齒而不是清晰"旋轉文本時獲得的類似效果.
I'm rotating an element using -webkit-transform: rotate() and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth" anti-aliasing instead of "crisp".
有人知道這里發(fā)生了什么嗎?它是特定于這個 webkit 或 Chrome 版本的還是我可以做些什么來修復它?(它也不是對列表元素之間的邊界進行抗鋸齒處理)
Anyone know what's going on here? Is it specific to this webkit or Chrome version or is there something I can do to fix it? (It's also not anti-aliasing the borders between list elements)
這是 CSS:
div.right-column.post-it
{
position: relative;
width: 240px;
background-color: #fe9;
padding: 20px;
-webkit-transform: rotate(.7deg);
background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
box-shadow: 1px 1px 0 #ddccaa,
2px 2px 0 #dbcaa8,
3px 3px 0 #d9c8a6,
4px 4px 0 #d7c6a4,
5px 5px 0 #d5c4a2,
6px 6px 1px #d3c2a0,
4px 4px 2px rgba(90,70,50,.5),
8px 8px 3px rgba(90,70,50,.3),
12px 12px 5px rgba(90,70,50,.1);
}
推薦答案
嘗試用 webkit 觸發(fā) CSS 3d Transform 模式.這改變了 chrome 的渲染方式
Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
<小時>
編輯
還有一個 Webkit only 樣式聲明 -webkit-font-smoothing 接受值
無亞像素抗鋸齒抗鋸齒
其中 subpixel-antialiased 是默認值.
唉，亞像素抗鋸齒不是旋轉文本的好解決方案.渲染機無法處理.3d 變換僅切換為 antialiased.但是我們可以嘗試直接設置.
Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.
見這里 http://maxvoltar.com/archive/-webkit-font-smoothing
這篇關于在 Chrome 中使用 webkit-transform 旋轉時出現(xiàn)不穩(wěn)定的文本抗鋸齒的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！