Рендеринг текста при css трансформации

545

26 ноября 2016, 18:52

Есть некоторый текст, который развернут на 90deg.

span { 
  -webkit-font-smoothing: subpixel-antialiased; 
  text-rendering: optimizeSpeed; 
    backface-visibility: hidden;   
   
    -webkit-transform: rotate(90deg); 
        -ms-transform: rotate(90deg); 
         -o-transform: rotate(90deg); 
            transform: rotate(90deg); 
 
    -webkit-transition: all 1s ease-in-out;          
       -moz-transition: all 1s ease-in-out; 
         -o-transition: all 1s ease-in-out; 
            transition: all 1s ease-in-out; 
} 
 
 
/* Customizer */ 
.container { 
  height: 2000px; 
  background: #eee; 
} 
 
span { 
  position: fixed; 
  right: 1rem; 
  top: 20%; 
  font-size: 2rem; 
}

<div class="container"> 
   
  <span>some text</span> 
   
</div>

Проблема: Текст смазан, не корректно отображается.

Вопрос: Как можно исправить отображение текста (и можно ли вообще исправить), чтобы он был четким, а не "размазаным" (расплывчатым)?

P.S: В данном примере он постоянно такой, в моем проекте он в таком виде, только при скролле (когда перестаешь скроллить страницу - нормально отображается).

Answer 1

Проблема связана со связкой размер шрифта + "семья" шрифта.
Исправить смазанность именно такого размера текста - возможности не будет, свойства (их размеры) не позволяют, они начинают растягиваться, расплываться. Для решения нужно брать либо больший размер, либо начинать играть с другими шрифтами, если это не так принципиально.

P.S. Для тестов на основе вашего кода размер шрифта (font-size) был протестирован на 27px и 28px, на размере большем - смазанность пропадает. Так что данный момент - мертвая точка перехода шрифта к большим буквам с четким отображением.

Тест 1 (смазанность присутствует):

span { 
  -webkit-font-smoothing: subpixel-antialiased; 
  text-rendering: optimizeSpeed; 
backface-visibility: hidden;   
   
-webkit-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
        transform: rotate(90deg); 
 
-webkit-transition: all 1s ease-in-out;          
   -moz-transition: all 1s ease-in-out; 
     -o-transition: all 1s ease-in-out; 
        transition: all 1s ease-in-out; 
} 
 
 
/* Customizer */ 
.container { 
  height: 2000px; 
  background: #eee; 
} 
 
span { 
  position: fixed; 
  right: 1rem; 
  top: 20%; 
  font-size: 27px; 
}

<div class="container"> 
   
  <span>some text</span> 
   
</div>

Тест 2 (смазанность отсутствует):

span { 
  -webkit-font-smoothing: subpixel-antialiased; 
  text-rendering: optimizeSpeed; 
backface-visibility: hidden;   
   
-webkit-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
        transform: rotate(90deg); 
 
-webkit-transition: all 1s ease-in-out;          
   -moz-transition: all 1s ease-in-out; 
     -o-transition: all 1s ease-in-out; 
        transition: all 1s ease-in-out; 
} 
 
 
/* Customizer */ 
.container { 
  height: 2000px; 
  background: #eee; 
} 
 
span { 
  position: fixed; 
  right: 1rem; 
  top: 20%; 
  font-size: 28px; 
}

<div class="container"> 
   
  <span>some text</span> 
   
</div>

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как подогнать все блоки под высоту самого высокого Bootstrap

Я делаю блог на WordPressЕсть вывод постов, но за счет картинки, названия, превью все блоки в линии разной высоты и это бросается в глаза

442

CSS

Вертикальный bootstrap navbar

Как я могу сделать еще один navbar, чтобы он был вертикальным и прижат четко на одном месте слева?

980

CSS

Скользащее меню и позиция по умолчанию

В меню есть 2 скрипта

266

CSS

Есть ли способ перевернуть текст на css?

мне кажется что для этого использовать js лишнее

412