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

Подписаться 21 тыс.

Просмотров 6 тыс.

50% 1

✏️ В этом уроке поговорим про шрифты - какие форматы стоит использовать, как лучше подключать, а также рассмотрим важные подсвойства 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 | Что дальше
📚 Полезные ссылки:
➖ Современный справочник по CSS: doka.guide/css/
➖ Справочник по фронтенду "MDN" от разработчиков Mozilla Firefox: developer.mozilla.org/ru/
➖ Google Fonts: fonts.google.com/
➖ Преобразования шрифтов Transfonter: transfonter.org/
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css

Опубликовано:

17 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 34

@mishased8322 14 дней назад

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

@user-yv1sv6ks6u Месяц назад

😀спасибо

@voronovmaksim88 Месяц назад

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

@abdul-malikibragimov9562 8 месяцев назад

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

@user-hm4pv5ou7j 8 месяцев назад

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

@andreykozimirov4419 9 месяцев назад

очень полезные видео, спасибо

@Ivanfwit 9 месяцев назад

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

@user-qx6hn1qw8r Месяц назад

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

@gvitoss 9 месяцев назад

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

@AleksanderLamkov 9 месяцев назад

Да, font-style зачастую роли не играет и он меняется редко, согласен. Видео по JS и React в будущем будут, но по WP - нет :) Этот пласт знаний, специфичный исключительно для фриланса, прошел мимо меня.

@smotritelyoutube 9 месяцев назад

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

@TeomunMete Месяц назад

Thanks

@vallery_ikl Месяц назад

спасибо, ты всё прям хорошо объяснил

@alexb.2616 6 месяцев назад

огонь!

@user-dv5un5ii8w 2 месяца назад

Спасибо!)

@colodatwin3102 9 месяцев назад

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

@AleksanderLamkov 9 месяцев назад

Ну, в коэффициенте банально запись короче, а так то процентная запись имеет те же преимущества при адаптиве, это верно :)

@m4estrooo_official Месяц назад

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

@AleksanderLamkov Месяц назад

Привет! Спасибо за обратную связь :) Коммент может срезать сам ютуб, если посчитает, что какие-то запретные слова используются или если текст похоже на спам. Лично я комменты не удаляю, даже негативные.

@m4estrooo_official Месяц назад

@@AleksanderLamkov я на тебя и не думал) видимо удалил из-за ссылки на фрондентдментор точка ио

@m4estrooo_official Месяц назад

@@AleksanderLamkov Ладно, я себе покоя не нахожу - я восстановлю часть того огромного отзыва)) Я посмотрел вчера весь html, сегодня половину css, хотя я знаю уже и флексы и многое другое, но всё-равно твои уроки очень полезные! Почему? Качество. Краткость. Самые доступные примеры. И! (оооочень ценно, отдельное тебе спасибо, Саша) Примеры из практичего опыта разработки, то есть ты не просто показал на что способны определенные инструменты и технологии, а еще и рассказал ГДЕ их лучше использовать. И казалось бы куда круче, но ты еще и НЕВЕРОЯТНО доступно объяснил ПОЧЕМУ лучше использовать именно в этом месте и именно так. Твои уроки это одновременно и конспект по докам и лекция и советы действующего разраба, при этом всём ты сделал это технически качественно (картинка, звук и пр.), и бесплатно... Пожалуйста, не увлекайся делать это так круто, иначе я не смогу конкурировать с количеством разрабов, из-за твоих настолько доступных уроков)))))) уже рвусь посмотреть твой JS!

@pomedorkaaa 9 месяцев назад

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

@AleksanderLamkov 9 месяцев назад

Привет! Подключить напрямую файл шрифта через @import не получится. Директива import подключает только другие CSS-файлы. Фактически у всех рассмотренных в уроке вариантах подключения под капотом находится font-face. По поводу «использование файла шрифта со всеми вариантами жирности» - один файл шрифта содержит ровно один вариант начертания. Разве что есть исключение - вариативные шрифты, где множество параметров, типа жирности, можно настраивать буквально самостоятельно и менять жирность не просто по 100, а хоть на 1%. Но эта фича ещё не очень хорошо поддерживается браузерами и тема эта точно не для начинающих, поэтому об этом даже не упоминал.

@pomedorkaaa 9 месяцев назад

@@AleksanderLamkov Понял, спасибо за оперативность! У вас очень классный канал, мне, как для начинающего программиста с небольшим опытом, оказался очень полезен! 🔥

@DSW- 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

С такими юридическими тонкостями не подскажу, но кажется, что это не головная боль разработчиков. Если дизайнер использует в макете платный шрифт, то у него должна быть на него лицензия и заказчик должен заплатить за неё. А по поводу обхода через иной font-family точно не сработает. Задетектить настоящий шрифт можно кучей других способов. Автоматизированные проверки наверняка смотрят глубже, чем просто значение CSS-свойства.

@DSW- Месяц назад

@@AleksanderLamkov спасибо за быстрый ответ и за качественные видео

@svitboomer8840 9 месяцев назад

ЕЕЕЕЕЕЕЕЕ ШРИФТЫ. Сверхполезно

@IgorBobyrev 7 дней назад

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

@AleksanderLamkov 6 дней назад

Поставьте скорость на х0.75, пока не станет слишком медленно. Постепенно в своих видео я нормализовал темп своей речи. Сравните, допустим, с последними видео по JS - ну лучше же стало, согласитесь 🙂

@IgorBobyrev 6 дней назад

@@AleksanderLamkov ОК, хорошо что пофиксили это 👍

@kalts_daniil 2 месяца назад

Про идеальный мир улыбнуло 🤣 Если подключаться шрифты через @font-face, стоит ли там указывать свойства помимо font-family и src ? Например: @font-face { font-family: "Protest Revolution"; src: url("./ProtestRevolution-Regular.ttf"); } или @font-face { font-family: "Protest Revolution"; src: url("./ProtestRevolution-Regular.ttf"); font-weight: 400; font-style: normal; font-display: swap; } Вторая запись лучше или всё-таки это излишки?

@AleksanderLamkov 2 месяца назад

Привет! Точно стоит. Без указанного font-weight по дефолту все правила будут отвечать за начертание 400 (regular) и в таком случае действовать будет только последняя директива @font-face. А без font-swap загрузка шрифтов будет не самой оптимальной.

@kalts_daniil 2 месяца назад

@@AleksanderLamkov понял, благодарю 👌