Css旋转的文本是锯齿状的答案

【问题标题】：Css rotated text is jaggyCss旋转的文本是锯齿状的
【发布时间】：2015-09-09 05:18:18
【问题描述】：

任何想法如何让 css 旋转文本在 Chrome 中正确呈现？在 Firefox 中它看起来可以接受。

移除阴影并不能解决问题，我也尝试过调整过渡原点，但没有运气。

在高分辨率屏幕上看起来也不错。

 .discount-trap {
   border-bottom: 33px solid #74c331;
   border-left: 33px solid transparent;
   border-right: 33px solid transparent;
   height: 0px;
   width: 150px;
   -webkit-transform: rotate(-315deg);
   -moz-transform: rotate(-315deg);
   -ms-transform: rotate(-315deg);
   -o-transform: rotate(-315deg);
   transform: rotate(-315deg);
   text-align: center;
   position: absolute;
   top: 25px;
   color: white;
   text-shadow: 0px 1px 2px black;
 }
 .discount-trap__header {
   font-size: 14px;
   margin-top: 2px;
 }
 .discount-trap__text {
   font-size: 10px;
 }

<div style="position: relative;">
  <div class="discount-trap" style="display: block;">
    <div class="discount-trap__header">Save 15%</div>
    <div class="discount-trap__text">Stay in Jul/Aug</div>
  </div>
</div>

Fiddle

更新：

看起来多个选项都有效，但没有一个能像 Firefox 一样流畅，但这确实是 Chrome 的问题。选项1：添加到 .discount-trap -webkit-backface-visibility: 隐藏；

选项 2：添加到-webkit-transform: rotate(-315deg);所以它变成了 -webkit-transform: rotate(-315deg) translate3d(0, 0, 0);

【问题讨论】：

body { -webkit-font-smoothing: none; }
@Banana 似乎也没有做任何事情，机器人在正文中或直接在任何 div 标签上。 Jsfiddle 已开启
是的，我刚刚用谷歌搜索，似乎 chrome 开发人员已经删除了这个。显然他们强迫我们使用字体抗锯齿...
也许是这个？ stackoverflow.com/questions/6846953/…
@msr 主要区别在于 translate3d 将激活 GPU 加速。

标签： html css

【解决方案1】：

您缺少转换原点-webkit-transform-origin: 50% 50%;

将其添加到.discount-trap

那就把.discount-trap的宽度弄乱了

由于某种原因，在 Webkit 浏览器的宽度效果的变换渲染中，要对其进行去模糊并对齐您的字母，您需要对其进行处理，直到它以您想要的方式呈现。

还可以设置行高以阻止字母和数字乱跳。

例如line-height:1;

【讨论】：

【解决方案2】：

Chrome 默认不启用抗锯齿功能。但是您可以将此 CSS 属性添加到您的元素中以启用它：

-webkit-backface-visibility: hidden;

Fiddle

【讨论】：

【解决方案3】：

您添加 translate3d 属性，它将呈现文本而不会模糊...

.discount-trap {
border-bottom: 33px solid #74c331;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  height: 0px;
  width: 150px;
  -webkit-transform: rotate(-315deg) translate3d( 0, 0, 0);
  -moz-transform: rotate(-315deg) translate3d( 0, 0, 0);
  -ms-transform: rotate(-315deg) translate3d( 0, 0, 0);
  -o-transform: rotate(-315deg) translate3d( 0, 0, 0);
  transform: rotate(-315deg) translate3d( 0, 0, 0);
  text-align: center;
  position: absolute;
  top: 25px;
  color: white;
  text-shadow: 0px 1px 2px black;
}

【讨论】：