如何在Windows上的Chrome中强制旋转文本正确地反别名？
当我尝试旋转标签的文本时，我可以得到非抗锯齿文本或模糊文本，但不能很好地得到抗锯齿文本 此文本在“标准”1920*1080显示器上看起来不好，您可能不会注意到更高分辨率屏幕上的像素化如何在Windows上的Chrome中强制旋转文本正确地反别名？,windows,google-chrome,transform,blurry,Windows,Google Chrome,Transform,Blurry,当我尝试旋转标签的文本时，我可以得到非抗锯齿文本或模糊文本，但不能很好地得到抗锯齿文本 此文本在“标准”1920*1080显示器上看起来不好，您可能不会注意到更高分辨率屏幕上的像素化 A.（某些文本标签-未像素化） B（某些文本标签-模糊） C（某些文本标签-像素化） c2。（某些文本标签-像素化） D（某些文本标签-像素化） * { 字体系列：“源Sans-Pro”，无衬线； 字号：11pt； 字体大小：400； } #a{ 位置：绝对位置； 排名：0； 左：10px；
A.（某些文本标签-未像素化）
B（某些文本标签-模糊）
C（某些文本标签-像素化）
c2。（某些文本标签-像素化）
D（某些文本标签-像素化）
* {
字体系列：“源Sans-Pro”，无衬线；
字号：11pt；
字体大小：400；
}
#a{
位置：绝对位置；
排名：0；
左：10px；
}
#b{
位置：绝对位置；
顶部：130像素；
左：-70px；
变换：旋转（270度）平移3D（0,0,0）；
}
#c{
位置：绝对位置；
顶部：140px；
左：-50px；
变换：旋转（270度）
}
#c2{
位置：绝对位置；
-moz osx字体平滑：灰度；/*Firefox*/
-webkit字体平滑：抗锯齿；/*webkit*/
顶部：142px；
左：-30px；
变换：旋转（270度）
}
#d{
位置：绝对位置；
顶部：70像素；
左：70像素；
变换：旋转（180度）；
写入方式：tb-rl；
}
上图展示了我的尝试。有人知道如何正确地强制此渲染吗？进一步调查后，字体渲染在除90度和270度之外的所有旋转角度上看起来都正常。将其更改0.1度似乎足以修复文本的呈现 即
<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;
}
transform: rotate(270.1deg)