Как исправить @fontface против размера шрифта по умолчанию - макет ломается, если @fontface не загружается

Question

Если сайт использует @fontface для загрузки 2 пользовательских шрифтов, а также использует шрифт ariel или sans-serif в качестве шрифта по умолчанию / резервного копирования, но эти два шрифта очень различаются по размеру - как исправить проблему с макетом, которая возникает, если шрифт @fontface не загружается?

Проблема в том, что шрифт @fontface занимает меньше места, чем шрифт ariel по умолчанию. Так что если заголовок имеет размер 45px и шрифт @fontface отлично загружается в div. Но если шрифт @fontface не загружается вовремя - вместо него загружается шрифт по умолчанию (45px), и ariel занимает больше места в div, в результате чего заголовок разбивается на 2 строки и, следовательно, разбивается на макет.

Итак, как мы можем контролировать ОБА стиль @fontface и стиль по умолчанию. В идеале я хотел бы сохранить стиль h2 @fontface в 45px и заставить шрифт по умолчанию загружаться в 30px для того же стиля h2.

Answer 1

Я бы порекомендовал использовать Google Web Font Loader , это добавляет дополнительные классы к элементу body, который указывает, что шрифт: начал загружаться, закончил загрузку, не может загрузить. Используя эти классы тела, вы можете соответствующим образом настроить стили шрифта. Например, если @ font-face не удается загрузить, вы можете установить меньшее семейство шрифтов для резервного шрифта.

Answer 2

вы можете использовать http://www.fontsquirrel.com/fontface/generator для генерации фиксированных шрифтов.

используйте опцию X-height Matching: и Adjust Glyph Spacing

Answer 3

Вы можете использовать font-size-Adjust , который поддерживается Firefox и Blink браузерами с поддержкой .

Чтобы избавиться отПОЛНОСТЬЮ Я бы рекомендовал этот метод .

И если @font-face не поддерживается, вы можете использовать этот фильтр для обслуживания альтернатив javascript (например, Cufón или Typeface.js).

Answer 4

Вам необходимо использовать элемент метрики, чтобы измерить текущий фактический размер используемого шрифта, отношение em <=> пикселей.

Общая идея заключается в том, что у вас есть невидимый элемент, который использует основаниеразмер шрифта (например, <span>&nbsp;</span>), а затем используйте javascript, чтобы измерить, сколько (в основном высоты) он занимает на отображаемой странице.

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

Техника, конечно, зависит от установки одного базового размера и всего остального в процентах (аля сброс YUI / стиль шрифтов)придется пройти и переписать все, а не только стиль для body.

ссылка, которую я нашел в моих закладках: http://www.alistapart.com/articles/fontresizing Написано во время IE7 раз, но все еще работает отлично.

Этот метод также решает «Как компенсировать пользователям увеличенный размер текста / увеличенный размер шрифта, не нарушая макет страницы».

Answer 5

взгляните на

http://www.options4.com/options/standards/metrics.html

вы найдете все метрики, доступные для вас

Я лично рекомендую point систему, если вы хотите использовать фиксированный размер (em слишком велик, и ваши цифры кажутся странными)

Answer 6

Если вы не возражаете, полагаясь на поддержку JavaScript, вы могли бы сделать что-то вроде Modernizr , который, помимо прочего, добавит класс fontface к элементу html, если поддерживается @font-face,Затем просто переделайте свой CSS, чтобы использовать лучшие шрифты только при наличии класса, например:

h2 { font:30px/1.2 sans-serif; }
html.fontface h2 { font:45px/1.2 'awesome font', sans-serif; }