@ начертание шрифта и неправильное отслеживание букв / интервал

#html #css #font-face #typography

#HTML #css #font-face #типографика

Вопрос:

Я столкнулся с проблемой при использовании @font-face при создании веб-сайта. Шрифт установлен на моем компьютере, я скачал его с fontsquirrel.com .

Если я использую версию, установленную на моем компьютере (журнал), все в порядке, как вы можете видеть на следующем снимке экрана:

_{(источник: valeriobulla.it )}

Однако, как только я переключаюсь на версию @font-face, отслеживание букв (особенно Ts) отличается и выглядит нарушенным:

_{(источник: valeriobulla.it )}

Вот код для @font-face (набор шрифтов, загруженный с font squirrel):

 @font-face {
font-family: 'JournalRegular';
src: url('journal-webfont.eot');
src: url('journal-webfont.eot?#iefix') format('embedded-opentype'),
     url('journal-webfont.woff') format('woff'),
     url('journal-webfont.ttf') format('truetype'),
     url('journal-webfont.svg#JournalRegular') format('svg');
font-weight: normal;
font-style: normal;
}

И вот стиль элемента (div):

 #assignment-text {
font-family: Journal, JournalRegular, serif;
font-size: 3em;
text-align: center;
width: 340px;
position: absolute;
top: 200px;
left: 320px;
color: #000;
}

С помощью журнала на моем компьютере все в порядке. Принудительное использование JournalRegular (путем комментирования журнала) нарушает интервал.
Я разрабатываю на местном уровне. Проверено в:
ПК с Windows 7 (с установленным шрифтом): Firefox 7, Chrome, Opera, IE9.
Macbook (без установленного шрифта): Firefox, Safari.

Это известная проблема? Я искал, но, похоже, не могу найти решение.

1. Попробуйте использовать только один src URL-адрес за раз, чтобы увидеть, проявляется ли проблема только в одном из альтернативных форматов? Возможно, формат, используемый браузером, не очень хорошо обрабатывает горизонтально перекрывающиеся контуры, и выбирается именно этот формат.

2. Термин, который вы ищете, — «кернинг», и я согласен с Inerdia в том, что некоторые форматы, вероятно, его не поддерживают.

3. Я пробовал это, но это не сработало. Спасибо за ваш комментарий! @Mark Спасибо за ваши разъяснения, я итальянец, и иногда я немного путаюсь при использовании английских технических терминов 😉

Ответ №1:

У меня были похожие проблемы со шрифтами, которые я конвертировал в font-squirrel. В один из таких случаев, возвращаясь к генератору и играя с опциями эксперта, в частности, «Удалить кернинг» решил проблему.

1. Что ж, похоже, это все-таки ответ! Ранее я загрузил предварительно сгенерированный набор шрифтов. Теперь я знаю, что могу настроить параметры из генератора. Большое вам спасибо!

2. потрясающе! тогда рад быть полезным! 🙂

Ответ №2:

Если у вас возникла эта проблема и вы не можете отредактировать шрифт — ознакомьтесь с моим проектом:

Jerning.com

В этом случае вы могли бы сделать:

 $('#assignment-text').jerning({
    "Te": -0.1,
    "Th": -0.1
});

Вот пример:

Показать фрагмент кода

 $('.with-jerning').jerning("Wo", -0.1);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://jerning.com/js/jquery.jerning.min.js"></script>

<h2 class="without-jerning">Hello World</h2>

<h2 class="with-jerning">Hello World</h2>