«Тако» шире, чем «Тако». Как я могу это исправить?

Я пытаюсь загрузить div с диакритикой поверх div без. Интервал не работает, как я. (См. Фрагмент ниже.) Как я могу это исправить?«Тако» шире, чем «Тако». Как я могу это исправить?

div.text { 
 
\t  width: 75%; 
 
\t  position: relative; 
 
\t } 
 
\t div.diacritics { 
 
\t  width: 100%; 
 
\t  height: 100%; 
 
\t  position: absolute; 
 
\t  top: 0; 
 
\t  left: 0; 
 
     z-index: -1; 
 
     color: red; 
 
\t }

<div class="text">String String String String String String String String String String 
 
\t <div class="diacritics"> 
 
    Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div> 
 
    </div> 
 

 
<div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco 
 
\t <div class="diacritics"> 
 
    Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div> 
 
    </div>

источник

2016-05-26 webmagnets

Я не могу воспроизвести проблему на Mac OS X: http://i.stack.imgur.com/BH9Sw.png – duskwuff

Как контрапункт, я также на OS X пока видим проблему - Я предполагаю, что это разница в установленных шрифтах. Это говорит о том, что ответ на этот вопрос: «Не пытайтесь это сделать, потому что результаты нелегко предсказуемы». –

Если имеет значение, что '' Táco'' не всегда имеет ту же ширину, что и '' Taco '', тогда ваш макет должен быть более надежным. – Sparky

div.text { 
 
    \t  width: 75%; 
 
    \t  position: relative; 
 
      font-family: monospace; 
 
    \t } 
 
div.diacritics { 
 
    \t  width: 100%; 
 
    \t  height: 100%; 
 
    \t  position: absolute; 
 
    \t  top: 0; 
 
    \t  left: 0; 
 
      font-family: monospace; 
 
      z-index: -1; 
 
      color: red; 
 
    \t }  \t

<div class="text">String String String String String String String String String String 
 
    \t <div class="diacritics"> 
 
     Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng Stríng</div> 
 
     </div> 
 

 
    <div class="text">Taco Taco Taco Taco Taco Taco Taco Taco Taco Taco 
 
    \t <div class="diacritics"> 
 
     Táco Táco Táco Táco Táco Táco Táco Táco Táco Táco</div> 
 
     </div>

Если вы в состоянии сделать компромисс, вы всегда можете попробовать использовать семейство моноширинный шрифт.

источник

2016-05-26 02:47:11 StardustGogeta

Я думаю, это отвечает на вопрос лучше, хотя я бы предпочел не использовать этот шрифт. Благодарю. – webmagnets

Вы хотите посмотреть на font-kerning.

Свойство font-kerning CSS контролирует использование информации кернинга ; то есть он контролирует расстояние между буквами. Информация о кернинге хранится в шрифте, и если шрифт хорошо сканируется, то эта функция позволяет сделать так, чтобы между символами было очень похоже, независимо от характера.

Отметьте эту ручку http://codepen.io/anon/pen/JKPMGM, я не установил кернинг никому, и они выстроились.

div.text { 
     width: 75%; 
     position: relative; 
     font-kerning:none; 
    } 
    div.diacritics { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     font-kerning:none; 
     top: 0; 
     left: 0; 
     z-index: -1; 
     color: red; 
    }

Немного больше информации.

Кернинг регулирует пространство между отдельными буквенными формами, в то время как трекингом (письмо-интервал) регулирует интервал равномерно по диапазону символов. В хорошо выраженном шрифте двумерные пробелы между каждой парой символов имеют визуально подобную область.

источник

2016-05-26 03:13:58

Спасибо, но он по-прежнему не работает на моем mac os x. Интересно, почему некоторые могут воспроизвести проблему, а некоторые не могут. – webmagnets

Не похоже, что вы назначаете шрифт. Какой шрифт вы хотите использовать? –

«Тако» шире, чем «Тако». Как я могу это исправить?

ответ

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