Ошибка позиционирования шрифта, связанная либо с размером шрифта, либо с кодировкой шрифта.

Я столкнулся с проблемой, когда глифы располагаются так, как я ожидаю, когда я указываю line height:1 ДО ТОГО, как размер шрифта не станет больше 255 пикселей. Установите размер шрифта на 256 и бац, глифы резко меняют положение и становятся слишком высоко в строке.

Я использую веб-шрифты Google для добавления Josefin Sans - http://www.google.com/webfonts/specimen/Josefin+Sans

Изменить: я использую Chrome на Fedora, а не на одной из тех крутых машин с долей рынка и финансированием.

Упрощенная скрипка здесь - http://jsfiddle.net/jBAnc/

Изменить: скрипка не показывает код для меня. Если вы нажмете на «Bacon», он будет переключаться между 255 и 256, заставляя его подпрыгивать вперед и назад (по крайней мере, для меня).

Я не сталкиваюсь с этой проблемой, когда шрифт является базовым веб-шрифтом, таким как Arial, поэтому я предполагаю, что он как-то связан с веб-шрифтом Google. Это проблема с кодировкой шрифта, возможно, с программой, с помощью которой был создан шрифт (255 кажется значительным)?

это скриншот моей первоначальной проблемы


css webfonts google-webfonts font-size
person iabw    schedule 04.01.2013    source источник
comment
Для меня в Google Chrome скрипка работает просто отлично. Кроме того, зачем вам такой большой размер шрифта? Просто любопытно.   -  person SeinopSys    schedule 05.01.2013
comment
Большой текст предназначен для заголовков в презентации. Вы щелкали беконом, а шрифт не двигался вверх и вниз?   -  person iabw    schedule 07.01.2013
comment
Я не вижу значительного скачка между 255/256 с моей стороны, используя этот jsfiddle (проверено: Chrome 23.0.1271.97, Safari (ПК) 5.1.7, FF 17.0.1 и IE 9)   -  person MikeM    schedule 07.01.2013

Ответы (2)


arrow_upward
1
arrow_downward

У меня возникают непоследовательные проблемы с высотой строки/интервалом с этим шрифтом. Я начинаю подозревать, что проблема в конструкции самой Жозефин Санс.

РЕДАКТИРОВАТЬ: после небольшого поиска в Google кажется, что проблема не столько в самом шрифте, сколько в API Google Webfont.

http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer-or-chrome-with-font-face/

Краткий ответ: Загрузите и разместите шрифт самостоятельно, и у вас не должно возникнуть проблем.

person Alex    schedule 28.03.2013

arrow_upward
0
arrow_downward

В этом нет ничего плохого. Вы просто ожидаете, что все шрифты будут иметь одинаковую x-высоту, высоту спуска/расширения, а это не так (9 раз из 10).

Следующая скрипка иллюстрирует различия между 4 шрифтами (3 — очень распространенные шрифты, которые можно найти на Mac, ПК и т. д.). И Жозефин Санс тоже в доме.

Обратите особое внимание на различия в:

  • верхнее расстояние между заглавной буквой Q и границей ее родителя
  • различная высота Xx (особенно строчные буквы против заглавных)
  • потомок строчной буквы G (некоторые на самом деле происходят от своего родителя)

_http://jsfiddle.net/suK2U/

введите здесь описание изображения

Чтобы ответить на ваш вопрос о 255/256px, я рискну сказать, что вы только что столкнулись с «золотой серединой» между вашим контейнером и его родителем. На 256 он начинает конфликтовать (и поля начинают схлопываться или что-то в этом роде).

person Dawson    schedule 06.01.2013
comment
Я не ожидаю, что шрифты будут иметь одинаковую высоту. Этот резко меняется в этой точке останова. Кроме того, когда я открываю вашу скрипку, эти шрифты x-height не отображаются для меня, как на вашем изображении. Я использую Chrome в немного более старой версии Fedora, так что, возможно, проблема как-то там. - person iabw; 07.01.2013
comment
Просто чтобы проверить, у Жозефин Санс для вас есть место для выносных элементов, как выглядит моя версия на 256 пикселей? Я представляю, как это должно выглядеть, я просто не знаю, почему оно смещается для меня. - person iabw; 08.01.2013