Блог

Я использую семейство шрифтов Roboto. В общем, он идеально подходит для всех моих потребностей, кроме одной. Разница в длине между ndash и mdash слишком мала. Это очень важный аспект, потому что в рамках наших услуг мы помогаем редакторам, корректорам, писателям и наборщикам.

Чтобы устранить проблему, мы скорректировали шрифт и разместили его на нашем сервере. К сожалению, это оказывает значительное влияние на загрузку страницы и скорость рендеринга (выполняется даже предварительная загрузка шрифта).

Я хотел бы переключиться на CDNJS-версию шрифта Roboto, и мне интересно, есть ли способ CSS или CSS JS исправить проблему. Идея состоит в том, чтобы выбрать все тире на сайте и сократить их все с помощью JS или CSS, чтобы они были точно посередине длины между тире и тире. В исходном шрифте Roboto тире в два раза длиннее тире, но чуть длиннее, чем тире.

Альтернативой является замена всех тире на тире из другого шрифта. Есть еще идеи?

Вы упомянули замену тире и тире другим шрифтом.

Рассматривали ли вы возможность использования свойства CSS font-face unicode-range?

Если у вас есть шрифт с тире нужного размера, вы можете заменить их тире в Roboto.

Я не смог сразу найти шрифт, который имел бы тире, достаточно отличающиеся от стандартных, для демонстрации, но вот код из MDN, который заменяет амперсанд в Helvetica на чуть более яркий из Times New Roman . Этот метод избавляет от необходимости что-либо делать с вашим фактическим текстом.

 @font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U 26;/* 2013-2014 ndash and mdash */
}

div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;
}  

 <div>Me amp; You = Us</div>