CSS шрифты — способы подключения, правило font-face, свойство font и другие параметры

✏️ В этом уроке поговорим про шрифты — какие форматы стоит использовать, как лучше подключать, а также рассмотрим важные подсвойства font.

🔴 Timeline:
▶ 00:00​ | План урока
▶ 00:17​ | Форматы шрифтов
▶ 00:39​ | Браузерная поддержка формата woff2
▶ 00:51​ | Варианты начертаний
▶ 01:17​ | Отсутствующие варианты начертаний
▶ 01:31​ | Свойство font-family
▶ 02:01​ | Как проверить действующий на элемент шрифт, вкладка DevTools Computed
▶ 03:03​ | Откуда берутся шрифты
▶ 03:21​ | Шрифты в операционной системе
▶ 04:16​ | Способы подключения шрифтов к странице
▶ 04:28​ | Подключение шрифтов через font-face
▶ 05:54​ | Дескриптор font-display: swap
▶ 06:32​ | Запасной шрифт в font-family
▶ 07:30​ | Подключение шрифтов через @import
▶ 07:55​ | Google Fonts import
▶ 08:45​ | Подключение шрифтов через тег link
▶ 09:08​ | Google Fonts скачивание файлов шрифтов
▶ 09:37​ | Лучший способ подключения шрифта
▶ 10:24​ | Преобразование в нужный формат
▶ 10:42​ | Сервис transfonter
▶ 11:07​ | Если на Google Fonts шрифт не найден
▶ 11:40​ | Свойство font
▶ 12:14​ | Свойство font-family
▶ 12:25​ | Свойство font-family, фоллбэки
▶ 12:54​ | Свойство font-weight
▶ 13:34​ | Свойство font-size
▶ 13:59​ | Свойство line-height
▶ 14:28​ | Перевод line-height в формат коээфициента
▶ 15:15​ | Что дальше

📚 Полезные ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #css

[Bogdanovich.v]

Привет! Классный у тебя контент, спасибо за это!

[mishased]

Посоветовали посмотреть курс, так вот... восторга от видео просто не передать словами. Копала где могла, но такого четкого, понятного, по мелочам разобранного контента я ещё не видела. Спасибо вам огромное.

[pvytlde]

Про шрифты - полезная и легкая тема. Даётся легче, чем про отступы) Наверное нужно просто почаще работать и практиковаться, чтобы уложить всё в голове.
Спасибо за урок!

[voronovmaksim]

Уроки супер. Вообще без воды. Спасибо, Александр !!!

[abdul-malikibragimov]

Саша, ты лучший! Всё по факту, доступным языком и без воды 👍

[gvitoss]

font-style normal идёт в браузере по умолчанию, можно не указывать (имхо). Вот если бы такие четкие уроки по js, react, wp были - то каналу цены б не было. Целая книга в видео формате)))

[smotritelyoutube]

Супер, продолжай в том же духе, одни из самых лучших уроков на ютубе, просто все супер. Информативно, дикция четкая, все по делу без слов паразитов и тд, пушка!!!

[hmpvouj]

Отлично, без лишних разговоров, всё ясно и понятно!

[Kluchnyk_Alexandr]

Полезно было узнать про коэффициент line-height Недавно с ним столкнулся и не знал как он работает Спасибо!

[Ivanfwit]

отличное видео, информативно, спасибо!

[colodatwin]

Спасибо за урок, а почему именно коэффициент указывать в свойстве line-height, а не проценты? Проценты же тоже при адаптиве не сломаются

[pomedorkaaa]

А можно ли применять @import url('локальный-шрифт.woff2')? Если да, то так он подгружается медленнее, чем через font-face? И насколько хуже использование файла шрифта, в котором есть все варианты жирности, чем какой-то один?

[prodzaha]

Я не знаю как так, но уже дважды пропал мой коммент(
Спасибо за лучшие уроки!

[DSW-]

Вопрос по поводу идеального мира) Оно-то понятно, что почти любой шрифт можно скачать в интернете. Но не прилетит ли потом заказчику огромный штраф от правообладателя шрифта? Читал, что в РФ данные случаи достаточно распространены и в судах взыскивают до нескольких миллионов.

И дополнение некое. Если назвать файлы шрифта, font-family по-другому, есть шанс, что правообладатель не найдет воришку или это гиблый прием?

[IgorBobyrev]

Зачем так тараторить, я не могу понять? На скорость что-ли читали?

[kalts_daniil]

Про идеальный мир улыбнуло 🤣

Если подключаться шрифты через @font-face, стоит ли там указывать свойства помимо font-family и src ?
Например:

@font-face {
font-family: "Protest Revolution";
src:
}

или

@font-face {
font-family: "Protest Revolution";
src:
font-weight: 400;
font-style: normal;
font-display: swap;
}

Вторая запись лучше или всё-таки это излишки?