在 IE 中旋转文本，不会变得丑陋

Posted 2023-03-06

【中文标题】在 IE 中旋转文本，不会变得丑陋

【英文标题】：Rotate text in IE, without it getting ugly

【发布时间】：2011-06-21 10:19:22

【问题描述】：

我想将文本逆时针旋转 90 度。 Firefox 和 Chrome 没问题，使用：

-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);

对于 Internet Explorer，据我所知应该是这一行：

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

（另一种方法，writing-mode，只能将文字顺时针旋转90度）。

但是，在 IE 中，旋转后的文本看起来像是一个缩放不良的图像（下面的比较）。

Firefox / Chrome -- vs -- Internet Explorer：

Internet Explorer 有什么方法可以以更优雅的方式旋转文本（可能是 javascript/jQuery）？我一直在谷歌搜索，但我只能找到更多关于这种方法的参考......

【问题讨论】：

确保最终旋转的元素是像素对齐的。

【参考方案1】：

是IE中的Def文本渲染引擎；但是，这是可行的。

过滤器： 要求元素具有布局（即缩放）。您可以通过为元素提供背景颜色来解决渲染问题（大多数情况下）。在您的示例中尝试以下操作：

zoom:1;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
background-color:white;

【讨论】：

+1 确实有点帮助。不幸的是，它还不如 Firefox 或 Chrome 干净。

:-) 我们在这里讨论的是 IE。该解决方案有效，但它有自己的一套优点/缺点。优点都围绕着可访问性和尽可能少的代码行。缺点都围绕着演示。

+1 添加背景颜色对我来说效果很好。它现在是可读的，在它一团糟之前。不想用 Cufon 等增加另一层复杂性。

添加背景颜色也为我们解决了这个问题！感谢您提供这个很棒的提示！

如果要使用父级的背景色，可以使用：background-color:inherit;当父级更改其背景颜色时（例如悬停时），这将起作用并且也会更改。

【参考方案2】：

IE 的渲染引擎很糟糕...我会尝试使用背景图像。也许像Cufon 这样的字体替换会做得更好。 Cufon 生成文本的图像。据我所知，在 IE 中运行良好。

【讨论】：

文本呈现为图像对于使用辅助工具（例如屏幕阅读器）的用户来说很困难。

+1 谢谢。我想我会采用这种类型的解决方案。使用 imagettftext 函数，您已经可以定义应该渲染图像的角度。它确实需要一个单独的文件，就像使用实际图像（title.php）一样。至于辅助功能，这个文本是页面的标题，与它对应的菜单项相同，所以我认为在这种情况下没什么大不了的。

@jeffamaphone 在这种情况下这是不正确的，因为 Cufon 将文本保持原样。 Cufon 通过 JS 添加了一些包含图像的额外元素。 Cufon 唯一的缺点是你不能选择文本。

另一个缺点是你不能使用 CSS 改变颜色

【参考方案3】：

我建议使用 Google Fonts API 或 Cufon（如 @swishmiller 所说），或在 IE 中禁用抗锯齿 (ClearType)，这样字体看起来总是不平滑（这是一个词）吗？

Google 字体 API：http://code.google.com/webfonts

Cufon：http://cufon.shoqolate.com/generate/

禁用 ClearType：

    /* This will force IE into thinking there is a filter actually doing something, so it'll disable ClearType */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

[edit]我应该提一下，我还没有尝试过 Google Font API 修复...

【讨论】：

禁用 ClearType 听起来很有希望，但我们没有看到任何区别......

哇，这正式是有史以来最长的等待评论！ - 2.5 年

【参考方案4】：

试试 -ms-writing-mode 属性： http://msdn.microsoft.com/en-in/library/ie/ms531187%28v=vs.85%29.aspx