Супер, продолжай в том же духе, одни из самых лучших уроков на ютубе, просто все супер. Информативно, дикция четкая, все по делу без слов паразитов и тд, пушка!!!
Посоветовали посмотреть курс, так вот... восторга от видео просто не передать словами. Копала где могла, но такого четкого, понятного, по мелочам разобранного контента я ещё не видела. Спасибо вам огромное.
font-style normal идёт в браузере по умолчанию, можно не указывать (имхо). Вот если бы такие четкие уроки по js, react, wp были - то каналу цены б не было. Целая книга в видео формате)))
Да, font-style зачастую роли не играет и он меняется редко, согласен. Видео по JS и React в будущем будут, но по WP - нет :) Этот пласт знаний, специфичный исключительно для фриланса, прошел мимо меня.
Про шрифты - полезная и легкая тема. Даётся легче, чем про отступы) Наверное нужно просто почаще работать и практиковаться, чтобы уложить всё в голове. Спасибо за урок!
А можно ли применять @import url('локальный-шрифт.woff2')? Если да, то так он подгружается медленнее, чем через font-face? И насколько хуже использование файла шрифта, в котором есть все варианты жирности, чем какой-то один?
Привет! Подключить напрямую файл шрифта через @import не получится. Директива import подключает только другие CSS-файлы. Фактически у всех рассмотренных в уроке вариантах подключения под капотом находится font-face. По поводу «использование файла шрифта со всеми вариантами жирности» - один файл шрифта содержит ровно один вариант начертания. Разве что есть исключение - вариативные шрифты, где множество параметров, типа жирности, можно настраивать буквально самостоятельно и менять жирность не просто по 100, а хоть на 1%. Но эта фича ещё не очень хорошо поддерживается браузерами и тема эта точно не для начинающих, поэтому об этом даже не упоминал.
@@AleksanderLamkov Понял, спасибо за оперативность! У вас очень классный канал, мне, как для начинающего программиста с небольшим опытом, оказался очень полезен! 🔥
Привет! Спасибо за обратную связь :) Коммент может срезать сам ютуб, если посчитает, что какие-то запретные слова используются или если текст похоже на спам. Лично я комменты не удаляю, даже негативные.
@@AleksanderLamkov Ладно, я себе покоя не нахожу - я восстановлю часть того огромного отзыва)) Я посмотрел вчера весь html, сегодня половину css, хотя я знаю уже и флексы и многое другое, но всё-равно твои уроки очень полезные! Почему? Качество. Краткость. Самые доступные примеры. И! (оооочень ценно, отдельное тебе спасибо, Саша) Примеры из практичего опыта разработки, то есть ты не просто показал на что способны определенные инструменты и технологии, а еще и рассказал ГДЕ их лучше использовать. И казалось бы куда круче, но ты еще и НЕВЕРОЯТНО доступно объяснил ПОЧЕМУ лучше использовать именно в этом месте и именно так. Твои уроки это одновременно и конспект по докам и лекция и советы действующего разраба, при этом всём ты сделал это технически качественно (картинка, звук и пр.), и бесплатно... Пожалуйста, не увлекайся делать это так круто, иначе я не смогу конкурировать с количеством разрабов, из-за твоих настолько доступных уроков)))))) уже рвусь посмотреть твой JS!
Можно без кавычек, но только если название шрифта состоит из одного слова. Но лучше все же всегда указывать кавычки, так надежнее, никогда не будешь о них забывать.
Можно через сервис transfonter.org преобразовать файл шрифта любого формата в woff2. Как именно пользоваться сервисом показывал в обоих мастер-классах по верстке.
А если мне нужны все шрифты со значениями font-weight 100, 400 и т.д. Мне на каждую жирность нужно свой font-face или можно как-то объединить объявления?
Не интересовался, честно говоря. Для веб-шрифтов существует очень много свойств, которые очень редко используют. Ну а вообще, на доке хорошо описано то, о чем ты спрашиваешь: doka.guide/css/font-variant/ doka.guide/css/font-stretch/
Столкнулся с такой проблемой, что при обновлении страницы локальные шрифты не сразу подгружаются, а устанавливаются дефолтные, а потом подгружаются кастомные. Из-за этого появляется эффект дрожания текста или так называемая вспышка. Как это можно победить?
@@AleksanderLamkov Спасибо за ответ, но изменение этого параметра не приводит к положительному результату, по прежнему наблюдается подобный эффект. Если поставить параметр block, то поведение меняется, текст только моргает. Если поставить параметр swap, то текст и моргает и дёргается. Если поставить шрифт Arial, который как я полагаю встроенный. То всё обновляется без таких эффектов и незаметно. Есть ещё идеи?
Вопрос по поводу идеального мира) Оно-то понятно, что почти любой шрифт можно скачать в интернете. Но не прилетит ли потом заказчику огромный штраф от правообладателя шрифта? Читал, что в РФ данные случаи достаточно распространены и в судах взыскивают до нескольких миллионов. И дополнение некое. Если назвать файлы шрифта, font-family по-другому, есть шанс, что правообладатель не найдет воришку или это гиблый прием?
С такими юридическими тонкостями не подскажу, но кажется, что это не головная боль разработчиков. Если дизайнер использует в макете платный шрифт, то у него должна быть на него лицензия и заказчик должен заплатить за неё. А по поводу обхода через иной font-family точно не сработает. Задетектить настоящий шрифт можно кучей других способов. Автоматизированные проверки наверняка смотрят глубже, чем просто значение CSS-свойства.
Поставьте скорость на х0.75, пока не станет слишком медленно. Постепенно в своих видео я нормализовал темп своей речи. Сравните, допустим, с последними видео по JS - ну лучше же стало, согласитесь 🙂
Про идеальный мир улыбнуло 🤣 Если подключаться шрифты через @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; } Вторая запись лучше или всё-таки это излишки?
Привет! Точно стоит. Без указанного font-weight по дефолту все правила будут отвечать за начертание 400 (regular) и в таком случае действовать будет только последняя директива @font-face. А без font-swap загрузка шрифтов будет не самой оптимальной.
Супер, продолжай в том же духе, одни из самых лучших уроков на ютубе, просто все супер. Информативно, дикция четкая, все по делу без слов паразитов и тд, пушка!!!
Саша, ты лучший! Всё по факту, доступным языком и без воды 👍
Посоветовали посмотреть курс, так вот... восторга от видео просто не передать словами. Копала где могла, но такого четкого, понятного, по мелочам разобранного контента я ещё не видела. Спасибо вам огромное.
Полезно было узнать про коэффициент line-height Недавно с ним столкнулся и не знал как он работает Спасибо!
Очень все четко.!!! Так держать. Даже капельки лишней воды не сказал. Большая работа предварительная была видимо, ибо из головы сходу так не передать!
Отлично, без лишних разговоров, всё ясно и понятно!
отличное видео, информативно, спасибо!
font-style normal идёт в браузере по умолчанию, можно не указывать (имхо). Вот если бы такие четкие уроки по js, react, wp были - то каналу цены б не было. Целая книга в видео формате)))
Да, font-style зачастую роли не играет и он меняется редко, согласен.
Видео по JS и React в будущем будут, но по WP - нет :)
Этот пласт знаний, специфичный исключительно для фриланса, прошел мимо меня.
очень полезные видео, спасибо
Спасибо за уроки! Один с лучших курсов
Очень сжато и все, что нужно для начала!
Уроки супер. Вообще без воды. Спасибо , Александр !!!
Про шрифты - полезная и легкая тема. Даётся легче, чем про отступы) Наверное нужно просто почаще работать и практиковаться, чтобы уложить всё в голове.
Спасибо за урок!
С отступами просто больше практики, а про шрифты понять
спасибо, ты всё прям хорошо объяснил
спасибо
спасиьо, очень понятно)
Класс👍Спасибо за видео
Привет! Классный у тебя контент, спасибо за это!
огонь!
Спасибо!)
спасибо, очень интересно!
Спасибо за урок, а почему именно коэффициент указывать в свойстве line-height , а не проценты? Проценты же тоже при адаптиве не сломаются
Ну, в коэффициенте банально запись короче, а так то процентная запись имеет те же преимущества при адаптиве, это верно :)
😀спасибо
А можно ли применять @import url('локальный-шрифт.woff2')? Если да, то так он подгружается медленнее, чем через font-face? И насколько хуже использование файла шрифта, в котором есть все варианты жирности, чем какой-то один?
Привет! Подключить напрямую файл шрифта через @import не получится. Директива import подключает только другие CSS-файлы. Фактически у всех рассмотренных в уроке вариантах подключения под капотом находится font-face.
По поводу «использование файла шрифта со всеми вариантами жирности» - один файл шрифта содержит ровно один вариант начертания. Разве что есть исключение - вариативные шрифты, где множество параметров, типа жирности, можно настраивать буквально самостоятельно и менять жирность не просто по 100, а хоть на 1%. Но эта фича ещё не очень хорошо поддерживается браузерами и тема эта точно не для начинающих, поэтому об этом даже не упоминал.
@@AleksanderLamkov Понял, спасибо за оперативность! У вас очень классный канал, мне, как для начинающего программиста с небольшим опытом, оказался очень полезен! 🔥
Я не знаю как так, но уже дважды пропал мой коммент(
Спасибо за лучшие уроки!
Привет! Спасибо за обратную связь :)
Коммент может срезать сам ютуб, если посчитает, что какие-то запретные слова используются или если текст похоже на спам. Лично я комменты не удаляю, даже негативные.
@@AleksanderLamkov я на тебя и не думал) видимо удалил из-за ссылки на фрондентдментор точка ио
@@AleksanderLamkov Ладно, я себе покоя не нахожу - я восстановлю часть того огромного отзыва))
Я посмотрел вчера весь html, сегодня половину css, хотя я знаю уже и флексы и многое другое, но всё-равно твои уроки очень полезные!
Почему? Качество. Краткость. Самые доступные примеры. И! (оооочень ценно, отдельное тебе спасибо, Саша) Примеры из практичего опыта разработки, то есть ты не просто показал на что способны определенные инструменты и технологии, а еще и рассказал ГДЕ их лучше использовать. И казалось бы куда круче, но ты еще и НЕВЕРОЯТНО доступно объяснил ПОЧЕМУ лучше использовать именно в этом месте и именно так. Твои уроки это одновременно и конспект по докам и лекция и советы действующего разраба, при этом всём ты сделал это технически качественно (картинка, звук и пр.), и бесплатно... Пожалуйста, не увлекайся делать это так круто, иначе я не смогу конкурировать с количеством разрабов, из-за твоих настолько доступных уроков)))))) уже рвусь посмотреть твой JS!
Thanks
Почему Roboto в кавычках, а Arial нет? Можно и так, и так?
Можно без кавычек, но только если название шрифта состоит из одного слова. Но лучше все же всегда указывать кавычки, так надежнее, никогда не будешь о них забывать.
Здравствуйте, делаю проект по макету, применяю шрифты в своем коде через css, но они не работают, хотя все прописываю в font-family
Привет! Напиши в чате t.me/friendlyFrontendChat, скинь туда архив с кодом проекта, тебе помогут.
Спасибо, хорошо
Александр могу ли попросить ответить на этот коммент как я могу сделать формат шрифтов woff2 я не могу уже сделат 2 дня обясните пожалуйста
Можно через сервис transfonter.org преобразовать файл шрифта любого формата в woff2. Как именно пользоваться сервисом показывал в обоих мастер-классах по верстке.
@@AleksanderLamkov а блин в видео буквально было видно как сделать это простите за тупой вопрос
А если мне нужны все шрифты со значениями font-weight 100, 400 и т.д. Мне на каждую жирность нужно свой font-face или можно как-то объединить объявления?
Увы. Нужно на каждое начертание отдельный @font-face.
@@AleksanderLamkov Эх, понял. Спасибо за ответ)
А что из себя представляют свойства font-variant и font-stretch?
Не интересовался, честно говоря.
Для веб-шрифтов существует очень много свойств, которые очень редко используют.
Ну а вообще, на доке хорошо описано то, о чем ты спрашиваешь:
doka.guide/css/font-variant/
doka.guide/css/font-stretch/
Столкнулся с такой проблемой, что при обновлении страницы локальные шрифты не сразу подгружаются, а устанавливаются дефолтные, а потом подгружаются кастомные. Из-за этого появляется эффект дрожания текста или так называемая вспышка. Как это можно победить?
В @font-face в дескрипторе font-display попробуй другие значения поставить. Это правило как раз отвечает за то, что ты описываешь.
@@AleksanderLamkov Спасибо за ответ, но изменение этого параметра не приводит к положительному результату, по прежнему наблюдается подобный эффект. Если поставить параметр block, то поведение меняется, текст только моргает. Если поставить параметр swap, то текст и моргает и дёргается. Если поставить шрифт Arial, который как я полагаю встроенный. То всё обновляется без таких эффектов и незаметно. Есть ещё идеи?
Вопрос по поводу идеального мира) Оно-то понятно, что почти любой шрифт можно скачать в интернете. Но не прилетит ли потом заказчику огромный штраф от правообладателя шрифта? Читал, что в РФ данные случаи достаточно распространены и в судах взыскивают до нескольких миллионов.
И дополнение некое. Если назвать файлы шрифта, font-family по-другому, есть шанс, что правообладатель не найдет воришку или это гиблый прием?
С такими юридическими тонкостями не подскажу, но кажется, что это не головная боль разработчиков.
Если дизайнер использует в макете платный шрифт, то у него должна быть на него лицензия и заказчик должен заплатить за неё.
А по поводу обхода через иной font-family точно не сработает. Задетектить настоящий шрифт можно кучей других способов. Автоматизированные проверки наверняка смотрят глубже, чем просто значение CSS-свойства.
@@AleksanderLamkov спасибо за быстрый ответ и за качественные видео
local("us")
ЕЕЕЕЕЕЕЕЕ ШРИФТЫ. Сверхполезно
Зачем так тараторить, я не могу понять? На скорость что-ли читали?
Поставьте скорость на х0.75, пока не станет слишком медленно. Постепенно в своих видео я нормализовал темп своей речи. Сравните, допустим, с последними видео по JS - ну лучше же стало, согласитесь 🙂
@@AleksanderLamkov ОК, хорошо что пофиксили это 👍
Про идеальный мир улыбнуло 🤣
Если подключаться шрифты через @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;
}
Вторая запись лучше или всё-таки это излишки?
Привет! Точно стоит. Без указанного font-weight по дефолту все правила будут отвечать за начертание 400 (regular) и в таком случае действовать будет только последняя директива @font-face. А без font-swap загрузка шрифтов будет не самой оптимальной.
@@AleksanderLamkov понял, благодарю 👌