当我尝试为标签旋转文本时，我要么得到非反锯齿文本，要么得到模糊的文本，但不能得到漂亮的反锯齿文本。
这段文字在“标准”的1920*1080显示器上看起来很糟糕，在更高分辨率的屏幕上可能不会注意到像素化。
这段文字在“标准”的1920*1080显示器上看起来很糟糕，在更高分辨率的屏幕上可能不会注意到像素化。
https://jsfiddle.net/ft2s0d71/
<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;
}
