Управление пакетами шрифтов.

243

27 декабря 2017, 19:02

Я скачал шрифт, а там целый пак шрифтов - Regular, Bold, Light, Italic...
Если я подключу обычный шрифт (Regular), то я не смогу использовать жирный за счет font-weight: bold. Нужно подключать жирный и ставить его в font-family. Мне это неудобно.
Можно ли как-нибудь объединить все шрифты в 1?
Или подключить нужные мне (bold, regular) и управлять ими через соотвествующие CSS свойства, а не через один лишь font-family?

Answer 1

@font-face {
font-family: roboto;
src: url('../fonts/roboto/roboto-bold.eot');
src: url('../fonts/roboto/roboto-bold.eot?#iefix') format('embedded-opentype'),
     url('../fonts/roboto/roboto-bold.woff2') format('woff2'),
     url('../fonts/roboto/roboto-bold.woff') format('woff'),
     url('../fonts/roboto/roboto-bold.svg#robotobold') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: roboto;
src: url('../fonts/roboto/roboto-regular.eot');
src: url('../fonts/roboto/roboto-regular.eot?#iefix') format('embedded-
opentype'),
     url('../fonts/roboto/roboto-regular.woff2') format('woff2'),
     url('../fonts/roboto/roboto-regular.woff') format('woff'),
     url('../fonts/roboto/roboto-regular.svg#robotoregular') format('svg');
font-weight: 400;
font-style: normal;
}

Для каждого начертания свое правило @font-face с одинаковым названием шрифта. Это позволяет менять font-weight без изменения font-family.

Answer 2

Обратите внимание на свойство font-style для придания шрифту наклона:

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

А также на свойство font-weight для задания толщины:

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100.