Привет,🖐 это все ещё Андрей, сегодня 3 августа и вот уже 5 дней исследую html на данный момент хочу поделиться с тобой вот какой информацией.👨💻
1. Стадия отрицания. 🤦♂️
Первые дни сидел перед компом и думал, что знания где-то рядом, а памяти всплывали знакомые теги от <html> до всевозможных блочных типа <h1> и <p>, а так же сточных типа <b> или <u>. Сейчас уже понимаю, что это скорее мешало, чем помогало, так как новую информацию принимаешь в себя как губка, а с уже знакомыми терминами возиться желания мало.
2. Стадия Гнев. 🧨
На второй день стало совершенно невозможно возиться с тем, что уже когда-то проходил, читал https://developer.mozilla.org/ru/docs/Learn/HTML а так же смотрел серию уроков от "фрилансер по жизни" Сам факт того, что ты не идёшь дальше, а возишься в багаже из старых заметок вымораживал и не давал покоя. Так же в этот день просмотрел вакансии сис. админа, после чего расслабился на выискивании совершенно незнакомых протоколов и стандартов TCP/IP. Время пролетело незаметно, день закончился, казалось безрезультатно.
3. Стадия Торг. 🎪
Эта стадия началась на третий день и, кажется, длиться до сих пор. Я торгуюсь с самим собой за каждый тег. Решил делать вёрстку лендинга какого-то портфолио ux/ui дизайнера. Все остановилось, когда моя голова поняла, что со шрифтами работать не так-то просто. Не знаю уж как завтра, но до сего момента я просматривал и фильтровал статьи и просторы YouTube в поисках не чёткого ответа как подключить шрифт, а скорее теории о том как это делать не в одной ситуации, а в ряде подобных проблем. Иными словами я хотел самостоятельно найти необходимые мне знания в документации, а не просматривать какие-то лёгкие видео, хочется хардкора и вот что я понял.
4. Что я понял про подключение шрифтов сам.
Если лень читать мои корявые объяснения, то советую сразу перейти к пункту 5 в нем будут конкретные ответы от профессионалов. Для тех кто остался, вот мои выводы и скрины проделанной работы:
За эталон документации сначала я брал сайт http://htmlbook.ru/samcss. Позже, а именно через часа 3-4 я понял, что он мне не нравится от слова совсем и решил взять https://htmlbase.ru/css/font данный ресурс, отличия на лицо...
Если в одной "документации" я старался выжить, то во второй я нашёл абсолютную золотую жилу структурированности, важности выделения информации, а так же другие плюсы.
И так:
♦ Первое, что нужно знать, это то, что в любом готовом макете сайта можно найти какой используется шрифт и все его характеристики. Я учусь вместе с Figma. Поэтому, если я нашёл, то ты, и подавно справишься, я верю!
♣ Существует так называемое свойство font это свойство работает абсолютно во всех браузерах, оно отвечает за шрифт и замечательно несёт службу. С ним я думал будет проходить вся моя работа над внедрением на сайт, кстати вот ссылка на его макет.
Итак, вернёмся к font и его свойствам.
font-family: "Roboto", "Arial", sans-serif;
Вот оно, подумал я, вбил в свой css файл и нет, не работает... Немного отступим назад. Мне необходимо было запилить на сайт работающий шрифт Gilroy. В чем была сложность есть способ использовать Google Fonts ну так вот это не в этом случае.
♠ Я перешёл в активное наступление на противника (fonts), немного пошарив в инете нашёл данный сайт "Как подключить и оптимизировать нестандартные шрифты"
Опять же на просторах свободного интернета нашёл необходимые мне Gilroy шрифтики. Взял естественно .woff2 так как это оказывается самый оптимизированный вариант, хоть он и не работает в старых версиях браузеров, про совместимость пока что мало что могу рассказать, но знай, что она есть, её нужно держать в уме.
Итак, перейдём к решению, наконец.
@font-face {
font-family: "Roboto";
}
Этот способ стал первым самостоятельно освоенным мной реально необходимым для будущей работы. Думаю тебе было интересно и полезно, вот результат, который ты точно сможешь достичь за 5 дней, а может и раньше, это основы для меня, следующее, буду разбираться с css , чтобы сделать этот макет точь в точь. Думаю ещё 5 дней будет достаточно. Проверим?))
Оставляет желать лучшего, не так ли?)
Посмотрим, что сможем сделать дальше и насколько быстро, но пока что, ставлю себе задачу за 5 дней сделать первый шаблон! Теперь только вверх!)
Ссылка на код в гитхабе. Да, если нужно узнать основы, напиши, и я сделаю небольшой обзор на git...
Спасибо тебе, дорогой светлячок, что дошёл до этого места, уверен, у тебя всё получится, будь добр и свеж!