2

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

1
  • У меня тоже были проблемы с шрифтами с гугл и я хотел бы узнать ответ. Но если вам действительно нужен ответ покажите код как вы подключаете все дело и дайте больше подробностей.
    – Telion
    26 дек 2017 в 3:03

2 ответа 2

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.

1

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

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

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.