[Александр Ламков — Friendly Frontend] 6. CSS шрифты — способы подключения, правило font-face, свойство font и другие параметры
🎯 Загружено автоматически через бота:
🚫 Оригинал видео:
📺 Данное видео является собственностью канала Александр Ламков — Friendly Frontend. Оно представлено в нашем сообществе исключительно в информационных, научных, образовательных или культурных целях. Наше сообщество не утверждает никаких прав на данное видео. Пожалуйста, поддержите автора, посетив его оригинальный канал: @AleksanderLamkov.
✉️ Если у вас есть претензии к авторским правам на данное видео, пожалуйста, свяжитесь с нами по почте support@, и мы немедленно удалим его.
📃 Оригинальное описание:
✏️ Обсудим шрифты — какие форматы стоит использовать, как лучше подключать, а также рассмотрим важные подсвойства 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:
➖ Справочник по фронтенду “MDN“ от разработчиков Mozilla Firefox:
➖ Google Fonts:
➖ Преобразования шрифтов Transfonter:
💬 Чат в телеграмме (помощь новичкам):
🔸 Boosty (поддержать канал):
🗂️ Бесплатные курсы на канале:
🟠 HTML:
🔵 CSS:
🟡 JS:
🟢 A11y:
⚪️ Мастер-класс по верстке для новичков:
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):
🗺 Frontend Roadmap 2024
📌 Автор:
➖ Личный сайт:
➖ Telegram:
➖ Boosty:
➖ GetMentor:
➖ Solvery:
#frontend #фронтенд #css
3 weeks ago 00:27:01 10
![[Александр Ламков — Friendly Frontend] Ускоряем верстку | Гайд по препроцессору стилей | Sass (SCSS)](https://sun9-31.userapi.com/impg/rrgEEXiMqpxFcT7nsage-WKhaDqyh89ehcw4Dw/kWr_Y3Uo83g.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=ee4da045d4744c15ae4e027739ef8607&c_uniq_tag=bDv4gCx_eTOktCSKxUCYGTSQibDqy3mS_BRvKqQbCeE&type=video_thumb)
4 weeks ago 00:35:29 7
![[Александр Ламков — Friendly Frontend] #1 Адаптивная верстка сайта с нуля для начинающих | HTML, CSS, Figma практика | Анализ ма](https://sun9-17.userapi.com/impg/gOpajqzgBxVpT4V7gTmk7cANyMgWQn9p2liLdg/-OeSvlZ4CAY.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=38c9c5bd1131aa5cba905a66792b7c23&c_uniq_tag=LTU-9mijlO2gth1d2UXDpVtHWlf9IbnQqZBV9qmbgHU&type=video_thumb)
4 weeks ago 00:35:30 1
4 weeks ago 00:14:15 23
![[Александр Ламков — Friendly Frontend] 15. CSS Grid Layout. Грид-сетка. Гайд по гридам в CSS](https://sun9-45.userapi.com/impg/7zrziWqvSsXhQiijWK-ajB4STSaGGBksnaFVaw/9333KPvX31M.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=d56fbef67f8e9e5d87f41fc0baf49921&c_uniq_tag=0dohML911W2aCGJV2D0d6Gr3JMXvNYYH19afDToImNU&type=video_thumb)
4 weeks ago 00:15:15 29
![[Александр Ламков — Friendly Frontend] 2. Гайд по CSS-селекторам, расчёт специфичности в CSS. Приоритет и вес стилей](https://sun9-68.userapi.com/impg/GeF8R7TaMDRSLN5i8RJxJv-kdtzSdayD9iq1sg/kqTFK-Y3554.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=112e597774839e144916d07d737d4e69&c_uniq_tag=zPt7FBICP0LYv-j67NBZQ0jCnV-ZmocCSmZkeVe7_PY&type=video_thumb)
4 weeks ago 00:10:33 40
![[Александр Ламков — Friendly Frontend] 1. CSS для начинающих. Введение. Подключение, базовые концепции: каскад, специфичность, н](https://sun9-68.userapi.com/impg/wJHIni0gq8ZGuS2HMUfz6sJWdQ6cMZmFGWTiaA/jHjc0wA5A8M.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=2c4c32efd5d4bc0c0b290191b3c86e90&c_uniq_tag=mycfRCeHgxgqVZETLDBOxV8SXRu_U6JnPXcM_peG-zY&type=video_thumb)
4 weeks ago 00:08:18 45
![[Александр Ламков — Friendly Frontend] 18. Актуальность HTML-тегов и атрибутов. Сервисы caniuse и caninclude. Валидатор разметки](https://sun9-24.userapi.com/impg/Ezq5vt55PraHNdz-jqMka3D1ffNmVrrfZDuSDg/C4_-Ohqfafo.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=ead3d807cf203150bf3b4540838de055&c_uniq_tag=FNjuZBubRppHw3q5WUtSVdUiiuK_3eJVlbt7lpszEjo&type=video_thumb)
4 weeks ago 00:08:17 22
![[Александр Ламков — Friendly Frontend] 17. Глобальные атрибуты HTML — class, id, title, hidden, tabindex, lang и др. Комментарии](https://sun9-47.userapi.com/impg/bKsO0Pr40Ypqm1MIHAdEgfGqrBwd7rGLDJpihQ/VYsgNHCVZRg.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=b41ee9540dba75ef4e7add08a9fe91eb&c_uniq_tag=Q-3icKHV3qceFyacksZ8mkpLzK0RiO7b2vFCvM40ckU&type=video_thumb)
4 weeks ago 00:06:10 22
![[Александр Ламков — Friendly Frontend] 16. HTML векторная графика, тег svg. Как выгрузить SVG изображение из Figma](https://sun9-77.userapi.com/impg/mSd6494rOjJZQxZRhIesy4WPD1XBtfmMXxGvXw/-RGRQNO3k5g.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=0ce5fba04fa6cf6600e77baa5dfc7d06&c_uniq_tag=qQyB7ayxvgUCqMXSj_YblI4SiWdVsX0bafWmuvz5yAo&type=video_thumb)
4 weeks ago 00:04:41 12
![[Александр Ламков — Friendly Frontend] 15. Семантические теги HTML: header, main, footer, section, aside, nav и остальные. Семан](https://sun9-79.userapi.com/impg/tF2vA9Mp28-JhB_uyYQweQxCqbNusZrAhPzQZw/2vgGlePJYgY.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=e1f0227ce747733bd350f883601edf15&c_uniq_tag=BBUv2FALIB2P0hOrfQxxruWS5nIvc_NbxKSd7KtQuaU&type=video_thumb)
4 weeks ago 00:16:34 16
![[Александр Ламков — Friendly Frontend] 14. Формы в HTML. Атрибуты required, disabled, readonly, placeholder, inputmode, type и a](https://sun9-71.userapi.com/impg/fqnGuolRfZgtdGwcFcNWUi7uTe-1iFfGAM0FCw/LoH7vGI38H8.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=c62f44d3d46a06b7d1d5e8207517ddab&c_uniq_tag=_NO3fw5ne5jvMK-ocTYzsbn1aPWjSl2OyPO_Crqq_dY&type=video_thumb)
4 weeks ago 00:04:42 15
![[Александр Ламков — Friendly Frontend] 13. Формы в HTML. Теги textarea, select, option, optgroup](https://sun9-7.userapi.com/impg/Zi5_yJmy5pNECGWgr37w-GkwrRCY-5ZccOd-Yg/4tGLcZw5I5c.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=40ff660217350f035c96d042d60b320b&c_uniq_tag=j8ToW_m20ncpKxWGL9A7REFMiWpmKRMRIMKZAy5igQU&type=video_thumb)
4 weeks ago 00:05:17 23
![[Александр Ламков — Friendly Frontend] 12. HTML тег input и его вариации. Атрибут type, значения tel, email, password, url, sear](https://sun9-9.userapi.com/impg/Qbao-o4mKOrlEKYsH-DzrTTjsVRt5hxbXXdLIg/d_4vZDkC7vE.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=e6f4a3d2f99aa25a3b7b6e54423a09a0&c_uniq_tag=3pkJqqUsIo-7NQbfE_0E0EMxJw1PJsJT_zNkgchOfuk&type=video_thumb)
4 weeks ago 00:04:38 12
![[Александр Ламков — Friendly Frontend] 11. HTML формы. Теги form, fieldset, legend, label и поле ввода input](https://sun9-74.userapi.com/impg/woQlJAJoSrQQ-x-YWlqNWFXHHkdO1R3ip69PZw/M-K9-2zdZxM.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=06b95216f63955d4604ceb78cf9a3b8e&c_uniq_tag=Z1nd8rBdvcGlDD4qNgB67ZA9iI1DTO6AXYlXRzc-tOA&type=video_thumb)
4 weeks ago 00:06:07 3
![[Александр Ламков — Friendly Frontend] 10. HTML таблицы — теги table, tr, td и th. Структурные табличные теги thead, tbody, tfoo](https://sun9-45.userapi.com/impg/E2vWfMey3Dnnv_Uu9u9cwd3IwCduAW_bkhpPzg/rGwmadQn-QM.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=5d11ea8c48cbd950fffa4372740d5906&c_uniq_tag=h0JJtwT4D80CrQPoQWLvsqcr8jz194m8qzme9sOwVx0&type=video_thumb)
4 weeks ago 00:06:42 22
![[Александр Ламков — Friendly Frontend] 9. Медиаконтент в HTML — видео, аудио, фреймы. Теги video, audio, iframe. Тег source](https://sun9-51.userapi.com/impg/IM6SOcOsdADDL2PQWA9SCiboObYA7UQJZPjXJA/jqy0hbrfeHE.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=6d98307e4ec890facf641d842da5428e&c_uniq_tag=w19Rz-QPTqUQ9qJXS43--8w0tbGAsCmz0zpqvNJbSF4&type=video_thumb)
4 weeks ago 00:02:18 24
![[Александр Ламков — Friendly Frontend] 8. Цитаты в HTML — теги blockquote, cite. Атрибут cite. Источник цитаты в HTML](https://sun9-77.userapi.com/impg/h1MhdRy1-349Hu51phzY0cJKWiTbFYqt_NxErA/M8mTZlk43r0.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=094094d906da2363627fdf25d58dc1ee&c_uniq_tag=gPYgQAkooJshAvpVxWOuf6PkHr8OtEEdllG6Tr8kszw&type=video_thumb)
4 weeks ago 00:08:17 14
![[Александр Ламков — Friendly Frontend] 7. HTML изображения — тег img. Относительные и абсолютные пути](https://sun9-64.userapi.com/impg/C5dQ2YHHDfeouiRwT8DiCTRsMrToXj889TeQeA/GnttATnmPMQ.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=85ae55626c722627f0f664a34ae763bf&c_uniq_tag=WbxlbNNi54YMzcL_bvoplu0bXfjusc_mCGo-Ag6uRDw&type=video_thumb)
4 weeks ago 00:07:22 27
![[Александр Ламков — Friendly Frontend] 1. HTML для начинающих. Введение — тег, анатомия тега, поток документа, вложенность, атри](https://sun9-20.userapi.com/impg/lJyA6cqUBsy9h0SHw1DI_htdxAEfpD05gHPtVw/Yva6VCqSYTM.jpg?size=320x240&quality=95&keep_aspect_ratio=1&background=000000&sign=2d02df627747faee0af71469491940d9&c_uniq_tag=lBdFNQv2DfzWTu9790kplxQSYZ_Tycqgs89eXUJNh_M&type=video_thumb)
4 months ago 00:16:06 1
5 months ago 00:09:38 1
8 months ago 00:11:00 1
8 months ago 00:00:58 1
8 months ago 00:00:50 1
