Наклонные шрифты обрезаются с выравниванием текста: справа

Если у вас эти большие «наклонные» шрифты (не уверены в терминологии), ваша непрозрачность меньше 1, и вы используете выравнивание текста: справа, конец текста будет отключен. Я также обнаружил, что в OSX-версии Safari конец не отображается, даже когда непрозрачность равна 1. В любом другом месте, похоже, только в случае непрозрачности < 1. Это происходит только при выравнивании текста до право.Наклонные шрифты обрезаются с выравниванием текста: справа

Я воссоздал проблему в jsfiddle:

http://jsfiddle.net/qcr62eoa/

Код:

<head> 
    <title>Test</title> 
    <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'> 
    <style> 
     .box { 
      background-color: lightblue; 
      width: 500px; 
      font-family: 'Playball', cursive; 
      text-align: right; 
      padding-right:30px; 
     } 
     .box h1 { 
      opacity: 0.5; 
      font-size:48px; 
      font-weight:400; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <h1>Hello world</h1> 
    </div> 
</body>

источник

2014-11-27 Matis Lepik

Шрифта проблематично –

У меня были такая же проблема с несколькими шрифтами данного типа, но я Попробуем еще пару и посмотрим, правда ли это –

Код и скрипка не демонстрируют проблемы, так как они, по-видимому, имеют лекарство, правильное дополнение. –

Я не знаю, если вы ищете обходного или объяснения, это действительно странно и не имеют на это ответа, но обходной путь доступен :). вы можете добавить некоторые дополнения в поле «h1».

Я проверил его и он работал

<head> 
    <title>Test</title> 
    <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'> 
    <style> 
     .box { 
      background-color: lightblue; 
      width: 500px; 
      font-family: 'Playball', cursive; 
      text-align: right; 
      padding-right:30px; 
     } 
     .box h1 { 
      opacity: 0.5; 
      padding-right:10px; 
      font-size:48px; 
      font-weight:400; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <h1>Hello world</h1> 
    </div> 
</body>

Надеется, что это помогло

веселит

источник

2014-11-27 21:18:37

Спасибо, что сделал. Есть определенные обходные пути (вместо этого я искал изменение альфы цвета). Все еще интересно, почему это происходит. –

Единственное объяснение, которое я могу получить, состоит в том, что если opacity установлено в 1, браузер игнорирует его и запускается без него. Если вы не используете непрозрачность, он также отображает полный текст. Попробуйте выбрать курсивный текст, затем вы заметите, что выбор отсечки последней части последнего символа также. Поэтому я предполагаю, что «непрозрачность» показывает только текст, который можно выбрать. –

Если вы снова добавите непрозрачность и попытаетесь выбрать текст, вы заметите, что он выбирает текст точно там, где он отключен. Надеюсь, это объяснило это частично :) –

Наклонные шрифты обрезаются с выравниванием текста: справа

ответ

Смежные вопросы