От создателя: по мере загрузки веб-шрифта сейчас вы сможете настроить его масштаб, чтоб восстановить размеры шрифтов документа и предупредить сдвиг макета при переключении меж шрифтами.
Разглядим последующую демонстрацию, где размер шрифта составляет 64 пикселя, а единственное различие меж каждым из этих заголовков — это семейство шрифтов. Примеры слева не были скорректированы и имеют несопоставимый окончательный размер. В примерах справа употребляется регулировка размера, чтоб обеспечить неизменный конечный размер 64 пикселя.
В этом примере для отображения высот употребляются инструменты отладки макета сетки CSS Chrome DevTools.
В этом посте исследуется новейший дескриптор шрифтов CSS под заглавием size-adjust, доступный в Chromium 92 и Firefox 89; (см. caniuse для получения крайней поддержки). Он также показывает несколько методов поправить и восстановить размеры шрифта для наиболее комфортного взаимодействия с юзером, согласованных систем дизайна и наиболее прогнозируемого макета странички. Одним из принципиальных вариантов использования является оптимизация рендеринга веб-шрифтов для предотвращения кумулятивного сдвига макета (CLS).
Вот интерактивная демонстрация проблемного места. Попытайтесь поменять шрифт в раскрывающемся перечне и направьте внимание:
Разница результатов в высоте.
Смещение зрительно раздражающего контента.
Перемещение интерактивных мотивированных областей (раскрывающийся перечень прыгает!).
Как масштабировать шрифты при помощи size-adjust
Введение в синтаксис:
CSS @font-face { font-family: «Adjusted Typeface»; size-adjust: 150%; src: url(some/path/to/typeface.woff2) format(‘woff2’);
}
| 12345 | @font-face { font-family: «Adjusted Typeface»; size-adjust: 150%; src: url(some/path/to/typeface.woff2) format(‘woff2’);} |
Создаем пользовательский шрифт с именованием «Adjusted Typeface».
Использоуем регулировку размера для роста всякого глифа до 150% от их размера по дефлоту.
Влияем лишь на один импортированный шрифт.
Используйте обозначенный выше пользовательский шрифт последующим образом:
CSS h1 { font-family: «Adjusted Typeface»;
}
| 123 | h1 { font-family: «Adjusted Typeface»;} |
Предупреждение: Если 2-ой заголовок в приведенной выше демонстрации не больше первого, ваш браузер не поддерживает регулировку размера.
Устранение заморочек с CLS при помощи бесшовной подмены шрифтов
На последующем видео поглядите примеры слева и то, как происходит сдвиг при изменении шрифта. Это всего только маленькой пример с одним элементом заголовка, и неувязка весьма видна.
В примере слева есть сдвиг макета, в правом — нет.
Чтоб сделать лучше рендеринг шрифтов, можно употреблять подмену шрифтов. Визуализируйте системный шрифт с резвой загрузкой, чтоб поначалу показать контент, а потом поменяйте его веб-шрифтом, когда он окончит загрузку. Это дает для вас несколько преимуществ: контент отображается как можно быстрее, и вы получаете прекрасно оформленную страничку, не жертвуя временем юзера. Но неувязка состоит в том, что время от времени, когда загружается веб-шрифт, он сдвигает всю страничку, так как имеет незначительно иной размер поля.
Больше контента значит больший возможный сдвиг макета при смене шрифтов
Помещая size-adjust в правило @font-face, устанавливаем глобальную настройку глифа для начертания шрифта. Верный выбор времени приведет к наименьшим зрительным изменениям и беспрепятственному обмену. Чтоб сделать плавный обмен, отрегулируйте вручную либо попытайтесь этот калькулятор регулировки размера от Malte Ubl.
Изберите веб-шрифт Гугл, потом возвратите за ранее настроенный фрагмент @font-face.
Сначала этого поста неувязка с размером шрифта была исправлена способом проб и ошибок. size-adjust увеличивался в начальном коде до того времени, пока этот же заголовок в Arial не показывал те же 64 пикселя, что и Press Start 2P. Я выровнял два шрифта по мотивированному размеру шрифта.
CSS @font-face { font-family: ‘Adjusted Arial’; size-adjust: 86%; src: local(Arial);
}
@font-face { font-family: ‘Cookie’; size-adjust: 90.25%; src: url(…woff2) format(‘woff2’);
}
| 1234567891011 | @font-face { font-family: ‘Adjusted Arial’; size-adjust: 86%; src: local(Arial);} @font-face { font-family: ‘Cookie’; size-adjust: 90.25%; src: url(…woff2) format(‘woff2’);} |
Калибровка шрифтов
Вы, как создатель, определяете цель (и) калибровки для нормализации шкалы шрифтов. Вы сможете восстановить шрифт Times, Arial либо системный шрифт, а потом настроить пользовательские шрифты для соответствия. Либо вы сможете настроить локальные шрифты в согласовании с тем, что вы загружаете. Стратегии калибровки size-adjust:
Удаленная цель: настроить локальные шрифты в согласовании с загруженными шрифтами.
Локальная цель: адаптировать загруженные шрифты к локальным мотивированным шрифтам.
Пример 1: Удаленная цель
Разглядим последующий фрагмент, который регулирует размер локально доступного шрифта, чтоб он соответствовал размеру пользовательского шрифта удаленного хранилища. Удаленный пользовательский шрифт является целью для калибровки:
Почему лучше не размещать сайты на общем хостинге
CSS @font-face { font-family: «Adjusted Regular Arial For Brand»; src: local(Arial); size-adjust: 90%;
}
@font-face { font-family: «Rad Brand»; src: url(some/path/to/a.woff2) format(‘woff2’);
}
%MINIFYHTML20b197461ee524415dbc92d999c9c21314% %MINIFYHTML20b197461ee524415dbc92d999c9c21315%
html { font-family: «Rad Brand», «Adjusted Regular Arial For Brand»;
}
| 1234567891011121314 | @font-face { font-family: «Adjusted Regular Arial For Brand»; src: local(Arial); size-adjust: 90%;} @font-face { font-family: «Rad Brand»; src: url(some/path/to/a.woff2) format(‘woff2’);} html { font-family: «Rad Brand», «Adjusted Regular Arial For Brand»;} |
В этом примере локальный шрифт Arial корректируется в ожидании загруженного пользовательского шрифта для плавной подмены.
Эта стратегия имеет преимущество в том, что дает дизайнерам и разрабам один и этот же шрифт для конфигурации размера и типографики. Шрифт Brand — это цель калибровки. Это хорошая новость для дизайн-систем.
Внедрение шрифта Brand в качестве цели — это также механизм работы калькулятора Мальте. Изберите шрифт Гугл, и он высчитает, как настроить Arial для плавной подмены. Вот вам наглядный пример Roboto CSS из калькулятора, где шрифт Arial загружен и назван «Roboto-fallback»:
CSS @font-face { font-family: «Roboto-fallback»; size-adjust: 100.06%; src: local(«Arial»);
}
| 12345 | @font-face { font-family: «Roboto-fallback»; size-adjust: 100.06%; src: local(«Arial»);} |
Предупреждение: порядок семейства шрифтов имеет решающее значение. Удостоверьтесь, что шрифт, который для вас нужен больше всего, является первым. Не считая того, локальный (Arial) быть может доступен не на всех устройствах вашего юзера, потому принципиально предоставить несколько запасных вариантов в семействе шрифтов.
Последующий пример, предоставляет 2 настроенных локальных запасных шрифта в ожидании загрузки шрифта Brand.
CSS @font-face { font-family: «Roboto-fallback-1»; size-adjust: 100.06%; src: local(«Arial»);
}
@font-face { font-family: «Roboto-fallback-2»; size-adjust: 99.94%; src: local(«Arimo»);
}
@font-face { font-family: «Roboto Regular»; src: url(some/path/to/roboto.woff2) format(‘woff2’);
}
html { font-family: «Roboto Regular», «Roboto-fallback-1», «Roboto-fallback-2»;
}
| 1234567891011121314151617181920 | @font-face { font-family: «Roboto-fallback-1»; size-adjust: 100.06%; src: local(«Arial»);} @font-face { font-family: «Roboto-fallback-2»; size-adjust: 99.94%; src: local(«Arimo»);} @font-face { font-family: «Roboto Regular»; src: url(some/path/to/roboto.woff2) format(‘woff2’);} html { font-family: «Roboto Regular», «Roboto-fallback-1», «Roboto-fallback-2»;} |
Пример 2: Локальная цель
Разглядим последующий фрагмент, который настраивает шрифт Brand для соответствия Arial:
CSS @font-face { font-family: «Rad Brand — Adjusted For Arial»; src: url(some/path/to/a.woff2) format(‘woff2’); size-adjust: 110%;
}
html { font-family: «Rad Brand — Adjusted For Arial», Arial;
}
| 123456789 | @font-face { font-family: «Rad Brand — Adjusted For Arial»; src: url(some/path/to/a.woff2) format(‘woff2’); size-adjust: 110%;} html { font-family: «Rad Brand — Adjusted For Arial», Arial;} |
У данной для нас стратегии есть преимущество отрисовки без каких-то корректировок, а потом корректировки всех входящих шрифтов для соответствия.
Наиболее узкая настройка с ascent-override, descent-override и line-gap-override
Если общего масштабирования глифов недостаточно для опции вашего дизайна либо стратегии загрузки, вот несколько наиболее тонких характеристик опции, которые работают вкупе с настройкой размера. Характеристики ascent-override, descent-override и line-gap-override в истинное время реализованы в Chromium 87 и Firefox 89.
ascent-override
Дескриптор ascent-override описывает высоту над базисной линией шрифта.
CSS @font-face { font-family: «Ascent Adjusted Arial Bold»; src: local(Arial Bold); ascent-override: 71%;
}
| 12345 | @font-face { font-family: «Ascent Adjusted Arial Bold»; src: local(Arial Bold); ascent-override: 71%;} |
Красноватый заголовок (без корректировок) имеет место над большими знаками A и O, в то время как голубий заголовок был скорректирован так, чтоб его высота плотно прилегала к общей ограничительной рамке.
descent-override
Дескриптор descent-override описывает высоту ниже базисной полосы шрифта.
CSS @font-face { font-family: «Ascent Adjusted Arial Bold»; src: local(Arial Bold); descent-override: 0%;
}
| 12345 | @font-face { font-family: «Ascent Adjusted Arial Bold»; src: local(Arial Bold); descent-override: 0%;} |
Красноватый заголовок (без корректировок) имеет место под базисными линиями D и O, в то время как голубий заголовок был скорректирован так, чтоб его буковкы плотно прилегали к базисной полосы.
line-gap-override
Дескриптор line-gap-override описывает метрику межстрочного промежутка для шрифта.
CSS @font-face { font-family: «Line Gap Adjusted Arial»; src: local(Arial); line-gap-override: 50%;
}
| 12345 | @font-face { font-family: «Line Gap Adjusted Arial»; src: local(Arial); line-gap-override: 50%;} |
Красноватый заголовок (нескорректированный) не имеет переопределения межстрочного промежутка, на самом деле, он равен 0%, в то время как голубий заголовок был скорректирован на 50%, создавая место над и под знаками соответственно.
Объединим все вкупе
Каждое из этих переопределений дает доп метод неопасно обрезать избыточное из ограничивающего поля текста. Вы сможете настроить текстовое поле для четкого представления.
Предупреждение. Если какая-либо из перечисленных выше демонстраций не указывает различий, то ваш браузер не поддерживает переопределения.
Заключение
Функции CSS @font-face и size-adjust — захватывающий метод настроить ограничивающую рамку текста ваших веб-макетов, чтоб сделать лучше процесс подмены шрифтов, что дозволяет избежать сдвига макета.
Создатель: Adam Argyle
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Yandex.Дзен
Источник
Вам также может понравиться