Как исправить размер шрифта @fontface vs. default - разрывы макета, если @fontface не загружается

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

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

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

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

Чтобы избавиться от FOUT полностью Id, рекомендуем этот метод.

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

Ответ 4

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

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

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

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

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

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

Ответ 5

Если вы не против полагаться на поддержку 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; }

Ответ 6

взгляните на

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

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

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