CSS: Как я могу отключить кернинг для своего шрифта?

Question

Как я могу отключить кернинг для своего шрифта?

Answer 1

См. концепцию кернинга в Википедии .

Кернинг не контролируется межбуквенным интервалом, и font-kerning для CSS1 или CSS2 не существует. Новая спецификация, CSS3, не была утверждена в качестве стандарта (Рекомендация W3C), но есть свойство, предложенное для font-kerning, см. Черновик 2012 года,

http://www.w3.org/TR/css3-fonts/#font-kerning-prop

Только определенные шрифты, такие как OpenFonts, имеют это свойство .

Даже при нет управления кернингом использование ненулевого межбуквенного интервала может изменить « восприятие человеческого кернинга », создав эффект «деактивировать кернинг». Пример: улучшить кернинг с помощью letter-spacing:-0.1em и проиграть с letter-spacing:0.5em.

С помощью свойства CSS1 letter-spacing вы можете потерять или улучшить кернинг восприятия , а в "текстовый интервал" вы можете имитировать кернинг

<div style="font-size:20pt;background-color:#bcd">

  VAST   <small>(normal)</small> 
  <br/>

  <span style="letter-spacing:-0.1em">VAST</span>  
  <small>(enhance perception)</small>
  <br/>

  <span style="letter-spacing:0.5em">VAST</span> 
  <small>(lost perception)</small>
  <br/>

  <!-- SIMULATE KERNING AT SPACED TEXT -->
  <div style="letter-spacing:6pt">
     SIMULATE: <span style="letter-spacing:4pt">VA</span>ST TEXT
  </div>

</div>

См. приведенный выше пример здесь .

Answer 2

Использовать межбуквенный интервал свойство

<style>
.kern
{
    letter-spacing: 10px;
}
.nokern
{
    letter-spacing: 0px;
}
</style>
<div id="div1" class="kern">
    test test test test
</div>
<div id="div2" class="nokern">
    test test test test
</div>

Answer 3

Попробуйте text-rendering: optimizeSpeed, это отключает кернинг по крайней мере в моем браузере.

То есть "VA".width == "V".width + "A".width.

letter-spacing не отключает кернинг, "VA" по-прежнему короче, чем "V" + "A".

Итак, попробуйте text-rendering. Хотя рендеринг текста хуже, он отключает кернинг.

Answer 4

CSS управляет кернингом с помощью атрибута межбуквенного интервала. Попробуйте установить его в 0, чтобы вернуть шрифт в нормальный кернинг.

p { letter-spacing: 0; }

Answer 5

Не знаю, возможно ли это на самом деле, но вы можете попытаться просмотреть свойство межбуквенного интервала.