Как правильно заставить повернутый текст сглаживать в Chrome в Windows? - PullRequest
Новая
       50

Как правильно заставить повернутый текст сглаживать в Chrome в Windows?

0 голосов
/ 07 июня 2019

Когда я пытаюсь повернуть текст для метки, я могу получить не сглаженный или размытый текст, но не сглаженный текст.

Этот текст выглядит плохо на «стандартном» мониторе 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;
}

Image showing the problem

Приведенное выше изображение демонстрирует мои попытки.Кто-нибудь знает, как правильно заставить это сделать?

1 Ответ

0 голосов
/ 09 июня 2019

После дальнейшего изучения выясняется, что рендеринг шрифта выглядит нормально на всех углах поворота, кроме 90 и 270 градусов.Изменение этого значения на 0,1 градуса кажется достаточным для исправления отрисовки текста.

, т. Е. 

transform: rotate(270.1deg)
...