问题描述
我在我的网站上有文本旋转45度的区域，不幸的是，该文本的渲染有时被混乱。例如，它看起来在Linux上使用FF和chrome相对确定，但是，它在Windows上的同一浏览器看起来很可怕。然而，IE 9-10渲染完全旋转的文本。有没有办法克服这个混乱的文本？
I have areas on my site where text is rotated 45degrees and unfortunately rendering of that text is messed up sometimes. For example, it looks relatively ok on linux using FF and chrome, however, it looks awful on the same browsers on windows. However, IE 9-10 renders that rotated text perfectly. Is there any way to overcome this messed up text?
这里有一个例子：
.wrap {height:200px; width:200px; position: absolute; top:100px;left:100px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.test1 {background: green; width:150px; height:30px; color:white;text-align: center;line-height:30px;font-family:arial; font-size:12px;font-weight:bold;}
感谢
推荐答案
请参阅。
这个答案建议使用触发3-D处理的额外转换来修改转换： / p>
The answer there recommends amending your transformation with an additional transform that triggers the 3-D processing:
-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);
除了在那里提供的修复，还有一些其他的技巧用于清理webfont渲染请参阅）。尝试添加一个几乎不可感知的 text-shadow （可能会或可能不工作）：
In addition to the fix offered there, there are a few other tricks used for cleaning up webfont rendering (see How To: Clean Up Chrome and Safari's Webfont Rendering). Try adding a barely perceptible text-shadow (may or may not work):
text-shadow: rgba(255,255,255,0.01) 0 0 1px;
这篇关于旋转时文本混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！