Использование свойства font-family

После того как пользовательский шрифт подключен к панели инструментов с помощью правила @font-face CSS, вы можете использовать его в свойстве font-family CSS, чтобы применить шрифт к компонентам панели инструментов.


Свойство CSS font-family задает приоритетный список одного или нескольких названий семейств шрифтов и/или стандартных названий семейств для выбранного элемента.


Свойство font-family состоит из списка одного или нескольких семейств шрифтов, разделенных запятыми ( , ). Каждое семейство шрифтов указывается либо как имя семейства шрифта, либо как одно из значений типового типа. Имя шрифта должно быть заключено в кавычки ( "" ), если оно содержит пробелы:

font-family: "Font Name", <generic type>;

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


Веб-безопасные шрифты - это шрифты, которые предустановлены по умолчанию на большинстве устройств, независимо от операционной системы. Список меняется по мере развития операционных систем, но некоторые из них стали основными: Arial (sans-serif), Courier New (monospace), Georgia (serif), Times New Roman (serif), Trebuchet MS (sans-serif) и Verdana (sans-serif).


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


cursive

Шрифты имеют рукописный стиль, например, соединение штрихов и другие особенности скорописи.

fantasy

Шрифты декоративного стиля с ярко выраженной тематикой или просто игривые.

monospace

Все символы шрифта имеют одинаковую фиксированную ширину.

serif

Шрифты имеют завершающие штрихи, расклешенные или скошенные концы, а также засечки.

sans-serif

Шрифты имеют простые окончания штрихов.


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


Перечисленные стандартные типы шрифтов взяты из спецификации W3C CSS 2.2. По мере развития веб-шрифтов типы, поддерживаемые браузерами, могут меняться.


Применение шрифтов к компоненту

Шрифты применяются в Конструкторе UI через пользовательские свойства CSS веб-компонентов SberMobile так же, как и любые другие свойства CSS.

  1. В Конструкторе UI добавьте компонент на инструментальную панель, щелкнув его в Палитре компонентов или перетащив на макет.

  2. Откройте редактор свойств, наведя курсор на компонент на макете и нажав кнопку () Настроить в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В редакторе свойств переключитесь на вкладку, содержащую свойство пользовательского стиля.

  1. На открытой вкладке добавьте стиль CSS со ссылкой на шрифт в записи медиатеки или другом источнике в свойство локального пользовательского стиля. Укажите резервный безопасный веб-шрифт на случай, если при загрузке пользовательского шрифта что-то пойдет не так, и укажите стандартный тип шрифта для семейства шрифтов:

font-family: "Custom Font", Arial, sans-serif;


О том, как использовать медиатеку для хранения активов инструментальной панели, читайте в статье Использование медиатеки.


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