Рекомендуемый порядок работы

Начало работы

• Заменить title в index.html на название проекта.

Базовая настройка проекта

Подключение шрифтов

Шрифты, используемые в дизайне, должны быть приложены к макету в psd. Если этих файлов нет, можно запросить их у руководителя проекта, или найти в Интернете самостотельно. Для подключения шрифтов нужно использовать CSS правило @font-face.

Обычно вместе с дизайном приходят шрифты только в одном определённом формате. Для совместимости необходимо подключать шрифты в нескольких форматах. Для того, чтобы получить шрифт во всех необходимых форматах, а также для автоматического написания нужных правил @font-face, рекомендуется использовать онлайн-сервис Transfonter (opens new window), разработанный русским разработчиком Алексеем Иляскиным.

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

• Family support - On;
• Formats - TTF, EOT, WOFF, WOFF2, SVG;
• Subsets - Latin, Latin Extended, Cyrillic, Cyrillic Extended;
• Остальные настройки по умолчанию.

После завершения преобразования будет доступен архив для скачивания, в котором будут размещены шрифты, преобразованные во все выбранные форматы, и файл stylesheet.css. Файлы шрифтов нужно скопировать в папку static_src/fonts. Все CSS правила @font-face из файла stylesheet.css нужно скопировать в файл static_src/styles/settings/_settings.font-faces.scss. При этом нужно не забыть поправить относительные ссылки на файлы шрифтов. Определения переменных для различных значений font-family следует делать в файле static_src/styles/settings/_settings.fonts.scss

Ссылки для справки:

• Использование @font-face (opens new window) - Статья на CSS-Tricks [EN].