Веб-шрифты могут понадобиться вам, если вы используете в прототипе нестандартные шрифты, и хотите сделать экспорт в HTML, чтобы прототип могли просматривать другие люди — без установленных шрифтов.
В статье все примеры реализованы с использованием Google Fonts в качестве источника веб-шрифтов.
Например, вы используете в проекте шрифт PT Sans.
Следует обратить внимание как прописано название шрифта (обведено красным на рисунке сверху). В название шрифта вписываются все необходимые гарнитуры и вариации начертания. Т.е. если нужно получить полужирное начертание, то необходимо добавить к названию шрифта "Bold":
"PT Sans" + "Bold" = "PT Sans Bold"
"PT Sans" + "Narrow" = "PT Sans Narrow"
"PT Sans" + "Narrow" + "Bold" = "PT Sans Narrow Bold"
Конечно, используемый шрифт должен обладать всеми используемыми гарнитурами.
Есть возможность сделать шрифт полужирным с помощью кнопки форматирования "B" на панели инструментов (горячие клавиши Ctrl+B). Однако, если мы планируем использовать проект с веб-шрифтами, этого следует избегать, т.к. в таких случаях веб-шрифт не будет работать.
Дело в том, что Google Fonts "отдаёт" за раз только одну гарнитуру шрифта. По этой причине приходится каждую вариацию гарнитуры импортировать отдельно. Например, в данном примере используется четыре разных вариации гарнитуры для шрифта PT Sans. Вот как выглядят настройки Web Fonts (Publish -> Generate HTML -> Web Fonts):
Шаг 1. Открываем Google Fonts, находим нужный шрифт.
Выбираем необходимую разновидность шрифта, нажимаем "Quick-use".
Шаг 2. Настраиваем шрифт, получаем его код @font-face.
Получаем код @font-face для импорта. Копируем все содержимое без самого тэга в буфер обмена
Шаг 3. Настраиваем импорт шрифта.
Открываем настройки Web Fonts (Publish -> Generate HTML -> Web Fonts):
Проверяем — все три значения должны совпадать:
В статье все примеры реализованы с использованием Google Fonts в качестве источника веб-шрифтов.
Например, вы используете в проекте шрифт PT Sans.
Следует обратить внимание как прописано название шрифта (обведено красным на рисунке сверху). В название шрифта вписываются все необходимые гарнитуры и вариации начертания. Т.е. если нужно получить полужирное начертание, то необходимо добавить к названию шрифта "Bold":
"PT Sans" + "Bold" = "PT Sans Bold"
"PT Sans" + "Narrow" = "PT Sans Narrow"
"PT Sans" + "Narrow" + "Bold" = "PT Sans Narrow Bold"
Конечно, используемый шрифт должен обладать всеми используемыми гарнитурами.
Есть возможность сделать шрифт полужирным с помощью кнопки форматирования "B" на панели инструментов (горячие клавиши Ctrl+B). Однако, если мы планируем использовать проект с веб-шрифтами, этого следует избегать, т.к. в таких случаях веб-шрифт не будет работать.
Дело в том, что Google Fonts "отдаёт" за раз только одну гарнитуру шрифта. По этой причине приходится каждую вариацию гарнитуры импортировать отдельно. Например, в данном примере используется четыре разных вариации гарнитуры для шрифта PT Sans. Вот как выглядят настройки Web Fonts (Publish -> Generate HTML -> Web Fonts):
Обратите внимание, что веб-шрифты включены галочкой (обведено красным на рисунке сверху).
Рассмотрим импорт шрифта PT Sans на примере самой "сложной" гарнитуры Narrow Bold.
Шаг 1. Открываем Google Fonts, находим нужный шрифт.
Выбираем необходимую разновидность шрифта, нажимаем "Quick-use".
Шаг 2. Настраиваем шрифт, получаем его код @font-face.
- выбираем полужирное начертание
- обязательно ставим галочку "Cyrillic" если используем кириллицу
- выделенную строку открываем в новой вкладке:
Получаем код @font-face для импорта. Копируем все содержимое без самого тэга в буфер обмена
Шаг 3. Настраиваем импорт шрифта.
Открываем настройки Web Fonts (Publish -> Generate HTML -> Web Fonts):
- нажимаем кнопку добавления шрифта
- пишем название
- выбираем переключатель "@font-face"
- вставляем код из буфера обмена.
- меняем значение параметра "font-family" на PT Sans Narrow Bold.
Проверяем — все три значения должны совпадать:
Готово! Теперь можно делать экспорт и проверять работу шрифтов. Помните, что проверить на своём компьютере не получится — у вас уже стоят шрифты, и они будут корректно отображаться в любом случае. Если очень хочется проверить, то шрифты придётся удалить (обычно для этого может потребоваться перезагрузка).
Также не рекомендую открывать RP-файл проекта без установленных шрифтов — было замечено, что некоторые элементы съезжают со своих мест и не встают назад даже после установки шрифтов.
