如何在 Windows 上的 Chrome 中强制旋转文本正确消除锯齿？

Question

如何在 Windows 上的 Chrome 中强制旋转文本正确消除锯齿？

And*_*ill 4 windows google-chrome transform blurry

当我尝试旋转标签的文本时，我可以获得非抗锯齿文本或模糊文本，但不能得到很好的抗锯齿文本。

该文本在“标准”1920*1080 显示器上看起来很糟糕，您可能不会注意到更高分辨率的屏幕上的像素化。

<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
</head>
<div>
<p id="a">
a. (Some Text Label - not pixelated)
</p>
</div>
<div>
<p id="b">
b. (Some Text Label - blurry)
</p>
</div>
<div>
<p id="c">
c. (Some Text Label - pixelated)
</p>
</div>
<div>
<p id="c2">
c2. (Some Text Label - pixelated)
</p>
</div>
<div>
<p id="d">
d. (Some Text Label - pixelated)
</p>
</div>

* {
  font-family:"Source Sans Pro", sans-serif;
  font-size:11pt;
  font-weight:400;

}
#a {
  position:absolute;
  top:0;
  left:10px;
}
#b {
  position:absolute;
  top:130px;
  left:-70px;
  transform: rotate(270deg) translate3d(0,0,0);
}
#c {
  position:absolute;
  top:140px;
  left:-50px;
  transform: rotate(270deg)
}
#c2 {
  position:absolute;
  -moz-osx-font-smoothing: grayscale; /* Firefox */
  -webkit-font-smoothing: antialiased; /* WebKit */
  top:142px;
  left:-30px;
  transform: rotate(270deg)
}
#d {
  position:absolute;
  top:70px;
  left:70px;
  transform: rotate(180deg);
  writing-mode: tb-rl;
}

Run Code Online (Sandbox Code Playgroud)

上图展示了我的尝试。有谁知道如何正确强制此渲染？

Answer 1

And*_*ill 5

经过进一步调查，除 90 度和 270 度外，所有旋转角度的字体渲染看起来都不错。将其改变 0.1 度似乎足以修复文本的渲染。

IE。

transform: rotate(270.1deg)

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，4 月前
查看次数：	735 次
最近记录：	6 年，4 月前