Как в верстке использовать два стиля одного шрифта?

Question

Я новичок, и во время верстки столкнулся проблемой. Нужно сверстать страницу со 100% точностью с макетом. Но есть проблема. Нужно использовать два разных стиля одного шрифта в тексте и заголовке. В html через link обьявить оба стиля легко, но в css поставить в нужную часть нужный стиль невозможно. Пример: нужно использовать шрифт lato со стилями regular и light. В html будет так:

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,300&display=swap" rel="stylesheet">

С этим понятно. Но в css коде стиль не указывается, и код будет таким:

h1 {
  font-family: 'Lato', sans-serif;
  font-weight: bold;
}

Тут используется тот стиль, который был обьявлен первее в html.

Answer 1

Как вариант. Или нет?

* {
  font-family: 'Lato', sans-serif;
}

h1 {
  font-weight: bold;
}

.ital {
  font-style: italic;
}

.wght {
  font-weight: bold;
}

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
<h1>Заголовок</h1>
<h2 class="ital">Заголовок</h2>
<p>Текст Текст Текст Текст Текст Текст</p>
<p class="wght">Текст Текст Текст Текст Текст Текст</p>
<p class="ital">Текст Текст Текст Текст Текст Текст</p>
<p class="wght ital">Текст Текст Текст Текст Текст Текст</p>

БЛОГ НА HUSL

Как в верстке использовать два стиля одного шрифта?

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