CSS3 #10 Шрифты и текст (CSS Font & Text styles)
HTML-код
- Опубликовано: 23 дек 2020
- #YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
Спасибо за труд, отличный урок
Пожалуйста)
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
👍
Nice lessons man!
Thanks
Евгений, очень крутые видео получаются у тебя! Спасибо!
По шрифтам в отдельном видео полезно было бы также подробнее осветить вопросы их оптимизации: про src: local, про удаление неиспользуемых символов или иных вариантах сжатия трафика, про настройку их кеширования, анализ что производительнее: скачать или использовать сервисы типа google fonts и т.д.
Ещё раз спасибо за ценную информацию на канале и твой труд!
Спасибо за отзыв
Спасибо
Пожалуйста
Тож интересуют эти вопросы. +вопрос подключение разных файлов под light, normal, bold, extra bold и т.д.. Вроде если не подключать файлы, то браузер сам пытается подтянуть текущий шрифт, но часто это делает криво? Нет в планах продвинутый курс сделать с набором практик?)
Если рассматривать самый первый пример с подключением гугл шрифта, но при этом в HTML ничего не добавлять, а прописать только часть в CSS - font-family: 'Roboto', sans-serif; то шрифт тоже измениться, правда он будет не такой, как если все таки добавить link в HTML. Откуда берется этот шрифт, если у нас нет ссылки ни на внешние шрифты, ни на внутренние. из стандартных шрифтов имеющихся на компьютере? или умный браузер их еще где то находит и подгружает?
и второй вопрос - вот мы выбрали опять же в гугл шрифте 3 толщины - 100, 500 и 900, и вставили их в HTML после того как мы прописали в CSS применить к body просто семейство шрифта без дополнительного указания толщины, то какая толщина будет? зачем мы выбрали вообще несколько толщин,если все равно можно для любого элемента прописать свою собственную, то есть существует ли вообще необходимость загружать именно такую ссылку в которой записано несколько вариантов толщин одного и того же шрифта. или опять же если мы загрузили несколько толщин то умный браузер применяет соответственно к заголовкам более жирные, а к параграфам более тонкие. в этом хитрость? тогда логичнее загружать сразу все варианты толщин, на все случаи жизни.... наверно.
Бро не в обиду, но душнее вопросов я в жизни не видел 😮💨
Недавно начал изучать JS. Хотелось бы узнать, книги вроде "изучаем js" от Фримена и Робсон, "Выразительный js", "js ниндзя" всё ещё актуальны? Или следует изучать язык сразу на каком-нибудь learn js. И спасибо за видео
Я бы рекомендовал learn.js
Т. е. можно скачать любой шрифт и даже переобразовать его в формат ttf или woff он будет работать, так ?
Да
А можно ещё небольшое видео об разнице между margin и padding?
Padding отступ внутри - входит в элемент. Margin - отступ снаружи, отталкивает другие элементы на указанную величину. Как описать подробнее не знаю
Как растянуть заголовок на весь экран в длину (не размер font-size)
То что вы описали - не возможно, только если не использовать SVG, или сделать текст картинкой
Пишу форматы woff, ttf, otf, и woff2 как в примере на 6:35 все друг за другом и ничего не работает. Запускаю по одиночке всё работает кроме woff2. Ничего не меняю просто комментарием выключаю все кроме одного по очереди. Браузер Хром 89.04 64 бит. Не пойму в чём может быть дело ?
Это шрифты для разных браузеров, а вы тестируете их только в Chrome. Поэтому и не срабатывает
@@YauhenKavalchuk Благодарю!
не совсем понятно зачем в @font-face дополнительно прописывать font-weight: 500;
и font-style: normal; если эти данные уже изначально вшиты в шрифте, и эти свойства ни на что не влияют? Или это просто правила хорошего тона?
Это в примере они "вшиты" в Google fonts, а на проекте вам могут просто прислать папку со шрифтами) Так что это просто был расширенный пример, что бы на практике не возникло вопросов