Почему шрифт на странице в разы больше чем должно быть

Question

Всем привет, извините за возможно глупый вопрос, еще новичок. Пытаюсь сделать свой первый сайт и столкнулся с такой проблемой: в figpea (бесплатный avacode) вижу размер шрифта 41 пиксель, в видеоуроке автор пишет 41 пиксель, а у меня этот шрифт выглядит слишком большим (переносится на след. строку, а так не должно быть). Подумал, что дело в шрифте, но у автора тоже стоит такой шрифт.

Результат, который должен получиться:

То что у меня:

Попробовал менять шрифты, менял браузер (мой firefox, пробовал chrome), менял ОС, масштаб системы и масштаб страницы

css код:

.promo .create_site .title1{
  font-family: 'Roboto - Black';
  text-align: center;
  color: #F9BF3B;
  font-size: 41px;
  margin-top: 53px;
  text-transform: uppercase;
  font-weight: 400;
}

Answer 1

Почему-то если прописать эти значения не в .promo .create_site .title1 , а в .promo .create_site .title1 h1 , то все работает прекрасно

Answer 2

Во-первых, шрифт Roboto без засечек, а на Вашем скрине (который второй) указан дефолтный шрифт с засечками. Отсюда вывод, что у Вас свойство font-family не работает. Скорее всего, в названии шрифта ошибка. Вы откуда этот шрифт берете?

Если шрифт Roboto не установлен локально в Вашей операционной системе, то его надо либо же подключать онлайн через тот же Google Fonts, либо же иметь файл шрифтов в папке с проектом. Есть у Вас такое? Если есть, то проверьте имя файла (добавлю, что приставка black в названии шрифта обычно означает максимальную жирность этого шрифта, т.е. что у него свойство font-weight: 900;. Это явно не Ваш случай, поэтому, я бы посоветовал название всё-таки подправить)

Во-вторых, я бы не рекомендовал иметь привычку обращаться к элементу, чтобы задать ему стили форматирования с помощью такой длинной цепочки классов. Потом этот код будет не удобно править и могут возникнуть неприятные сюрпризы в виде каких-то "левых" свойств элемента, унаследованных им от родителя.

В верстке есть такое понятие "обнуляющих стилей", которые сбрасывают некоторые стили, встроенные в сам браузер. И если Вы такого не используете в Вашем проекте, то браузер просто взял свои встроенные стили для отображения заголовка h1. Если не брать во внимание, что заголовок h1 должен быть только один на странице и к нему можно обратиться напрямую по имени тэга, то в Вашем же случае будет намного проще, правильнее и практичнее навесить класс на заголовок h1 (скажем, <h1 class="promo__title">), и в стилях обаращаться к конкретному элементу по имени его класса.

Надеюсь, я смог понятно изложить свои мысли)

БЛОГ НА HUSL

Почему шрифт на странице в разы больше чем должно быть

Ответы (2 шт):