@ font-face и неверное отслеживание букв / интервал - PullRequest
Новая
       33

@ font-face и неверное отслеживание букв / интервал

9 голосов
/ 26 октября 2011

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

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

http://www.valeriobulla.it/normal.jpg

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

http://www.valeriobulla.it/error.jpg

Вот код для @ font-face (font-face kit, загруженного с шрифта 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.

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

Ответы [ 2 ]

8 голосов
/ 26 октября 2011

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

0 голосов
/ 09 октября 2013

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

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>
...