如何阻止变形旋转扭曲字体？答案

【问题标题】：How to stop transform-rotation from distorting font?如何阻止变形旋转扭曲字体？
【发布时间】：2013-05-02 04:55:05
【问题描述】：

我正在使用 transform-rotation css 属性来旋转一个 div，这样我就可以将它用作我页面上的固定 facebook 和 twitter 链接，尽管如此，当我使用它时，它会“扭曲”我当前的文本字体。当我关闭旋转时，文本恢复正常。有没有办法解决这个问题！？

Here is my website.

我的 div 是社交的 [[facebook],[twitter]]。

这是内部 div 的 css：

#facebook,#twitter{
    display:inline-block;
    font-family:"lucida grande",tahoma,verdana;
    font-weight:bold;
    width:125px;
    margin:0px;
}

这是用于社交的 CSS：

#social{
position:absolute;
right:-120px;
bottom:50%;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
}

我想要的只是让文本看起来像水晶一样清晰，而不是全部扭曲。有没有另一种方法可以做到这一点，不会改变/扭曲我的字体！？

【问题讨论】：

在 FF/Mac 中看起来不错。不过，我在旋转的文本上看不到背景颜色——也许这会有所帮助。查看之前的答案：stackoverflow.com/questions/4899442/…
您使用什么浏览器（和版本）进行测试？这种事情总是要基于浏览器的渲染引擎的能力，因此将是非常特定于浏览器的。
使用 chrome，我很确定最新版本。那么，chrome 使用引擎来渲染文本！？

标签： html css rotation transform

【解决方案1】：

当我们旋转一个元素时，一些网络字体会出现这种扭曲。您可以尝试应用backface-visibility:hidden 来解决这种失真。希望能帮到你！

这是一个例子：

.fix-language{
    font-family:"Arial", sans-serif;
	position: absolute;
	left: -90px;
    top:120px;
	transform: rotate(-90deg);
 }
 .fix-language ul{
    list-style:none;
	padding:0;
	margin:0;
 }
 .fix-language ul li{
    display:inline-block;
	margin-right:15px;
 }
 .fix-language ul li a{
    color:$black-color;
	-webkit-backface-visibility: hidden;    
	backface-visibility: hidden;
	display:inline-block;
 }

<div class="fix-language">
	<ul>
		<li><a href="#">English</a></li>
		<li><a href="#">Portugues</a></li>
		<li><a href="#">Spanish</a></li>
	</ul>
</div>

【讨论】：