Я скачал шрифт, а там целый пак шрифтов - Regular, Bold, Light, Italic...
Если я подключу обычный шрифт (Regular
), то я не смогу использовать жирный за счет font-weight: bold
. Нужно подключать жирный и ставить его в font-family
. Мне это неудобно.
Можно ли как-нибудь объединить все шрифты в 1?
Или подключить нужные мне (bold, regular
) и управлять ими через соотвествующие CSS свойства, а не через один лишь font-family
?
-
У меня тоже были проблемы с шрифтами с гугл и я хотел бы узнать ответ. Но если вам действительно нужен ответ покажите код как вы подключаете все дело и дайте больше подробностей.– Telion26 дек 2017 в 3:03
2 ответа
@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.
Обратите внимание на свойство font-style для придания шрифту наклона:
Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста.
А также на свойство font-weight для задания толщины:
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100.