2

Есть некоторый текст, который развернут на 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: В данном примере он постоянно такой, в моем проекте он в таком виде, только при скролле (когда перестаешь скроллить страницу - нормально отображается).

3
  • 1
    Лена , если к примеру добавить font-family то на мой взгляд проблема пропадает codepen.io/Geyan/pen/YGvBky?editors=110
    – user33274
    13 окт 2016 в 14:19
  • хм, интересно, и не подумала шрифт заменить. Спасибо!!!
    – SVE
    13 окт 2016 в 14:21
  • 1
    рад что помог вам!
    – user33274
    13 окт 2016 в 14:22

1 ответ 1

4

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

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>

1
  • Спасибо, помогло!
    – SVE
    13 окт 2016 в 14:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.