Jak nadać 2 różne kolory czcionki do pionowego tekstu, aby litery nie były lekko zdeformowane?

Question

Mam pionowy tekst i chciałbym w tym całym tekście nadać 2 różne kolory czcionki (biały i żółty). Niestety, gdy do tekstu nr 2 nadam kolor żółty (będzie pogrubiona czcionka), to litery robią się jakieś koślawe i są brzydsze dla oka niż z tekstu nr 1a. Podejrzewam, że przyczyną jest znacznik <span>, który deformuje litery. Dla testu zrobiłem:
tekst nr 1a (jest OK, czcionka biała)
tekst nr 1b (jest lekko zdeformowany/koślawy, czcionka biała)
tekst nr 2 (jest lekko zdeformowany/koślawy, czcionka żółta pogrubiona)

O to kod:

<div class="vertical-text">tekst nr 1a<span style="color: white">tekst nr 1b</span><span style="color: yellow; font-weight: bold">tekst nr 2</span></div>

.vertical-text
{
	transform: rotate(-90deg);
	color: white;
	background-color: #0000ff;
	position: absolute;
	left: -190px;
	top: -215px;
	width: 400px;
}

Co należy poprawić w kodzie, aby cały tekst w obu kolorach miał normalną/wyraźną czcionkę?

Answer 1

Pewnie deformują się przez  transform: rotate(-90deg);

Comments

Podejrzewam, że tak, bo dla testu chciałem zobaczyć te wszystkie teksty jak będą wyświetlane poziomo.Okazało się, że poziomo jest OK.

Answer 2

Znalazłem sposób jak to zrobić, ale nie jest to chyba metoda zalecana:

<div class="vertical-text">tekst nr 1a<span style="color: white">tekst nr 1b</span><span style="color: yellow; font-weight: bold">tekst nr 2</span></div>
<div class="vertical-text2">tekst nr 3</div>

.vertical-text
{
	transform: rotate(-90deg);
	color: white;
	background-color: #0000ff;
	position: absolute;
	left: -190px;
	top: -215px;
	width: 400px;
}

.vertical-text2
{
	transform: rotate(-90deg);
	color: yellow;
	background-color: #0000ff;
	position: absolute;
	left: -40px;
	top: -350px;
	width: 100px;
}

Stworzyłem dla testu dodatkowo diva vertical-text2 i ustaliłem w nim żółty kolor czcionki. Napis "tekst nr 3" z żółtą czcionką jest dobrze wyświetlany. Mimo, że jest OK, ale ta metoda jest wg. mnie mało profesjonalna, bo stworzyłem dodatkowego diva.

Wiecie jak zapisać ten kod bardziej profesjonalnie (2 kolory czcionki w jednym divie)?