@ font-face отображает разные межбуквенные интервалы для разных файлов - PullRequest
Новая
       59

@ font-face отображает разные межбуквенные интервалы для разных файлов

1 голос
/ 12 марта 2011

У нас есть несколько нестандартных веб-шрифтов (на которые у нас есть лицензия), и мы получили .otf версия этого шрифта. Существуют некоторые онлайн-инструменты для преобразования шрифтов в веб-форматы, а затем с помощью некоторых CSS вы можете включить шрифты, пока все хорошо.

Однако при отображении текста в разных браузерах отображаемый текст становится шире / меньше, и расстояние между словами также меняется. Я проверил, чтобы убедиться, что шрифты действительно используются в разных браузерах, и что все работает нормально.

Существует 4 файла шрифтов, необходимых для поддержки всех браузеров, и кажется, что каждый файл имеет свой собственный межбуквенный и межсловный интервал для каждого используемого размера шрифта.

на тот случай, если вы хотите увидеть оператор включения здесь: 

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot?') format('eot'), 
         url('myfont.woff') format('woff'), 
         url('myfont.ttf')  format('truetype'),
         url('myfont.svg#webfontaAipHhrc') format('svg');
    }

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

Шрифты внутри используют EM как ширину глифа. Поэтому для меня имело смысл установить размер шрифта документа на некоторое значение и соответственно масштабировать используемые шрифты, а затем установить размер шрифта для каждого элемента, в котором я использую шрифт.

Кроме того, установка межбуквенного и межсловного интервала в определении @ font-face не имеет никакого эффекта, поскольку задается настройка собственного интервала шрифта.

Кто-нибудь знает, может ли генератор шрифтов иметь одинаковый интервал между словами и буквами для каждого из сгенерированных шрифтов? Или есть какое-то другое решение / предложение?

Я пробовал 2 генератора шрифтов, но помню только последний, http://www.fontsquirrel.com/fontface/generator

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

Спасибо:)

EDIT:

я сделал распечатки экранов, показывающих, как различные браузеры, которые я использую, отображают шрифты

http://www.imagedump.nl/img9/8589/15fonts.png

тыс. Использованных CSS: 

.test {
    font-family: myfont;
    font-size: 20px;
    letter-spacing: -0.67px;
    word-spacing: 1px;
}

мне нужно иметь начальную позицию по умолчанию, где все браузеры отображают шрифт одинаково

с «другой» частью, что браузер, подобный ff, отображает текст, отличный от браузера, то есть, который использует другой сгенерированный файл шрифта. но есть также разница между chrome и ff, когда они оба используют один и тот же сгенерированный файл шрифта (woff)

Ответы [ 2 ]

1 голос
/ 12 марта 2011

В вашем вопросе недостаточно подробностей, чтобы понять проблему.Браузеры используют внутренний интервал шрифта.Он не «отличается» в зависимости от того, где он отображается.

Тем не менее, подсказка, применяемая к шрифту, может влиять на его отображение в браузерах Window, поскольку он пытается вписать контуры шрифта в пиксельную сетку.Делая это, весь шрифт может расти / уменьшаться горизонтально, поскольку он пытается вписаться в сетку.Я видел это.

Может ли это объяснить то, что вы видите?В противном случае я бы хотел видеть скриншоты рядом, чтобы понять, о чем вы говорите.

0 голосов
/ 18 марта 2011

Для решения этой проблемы, на мой взгляд, было бы целесообразно просто использовать некоторые специфические для браузера инструкции по визуализации шрифта.Я недостаточно опытен, чтобы знать CSS для стилей, специфичных для браузера, для тегов p и h, которые будут работать в этом случае.

...