Разработка моего сайта. Часть 4. Подключение шрифтов

Автор Maksim Inshakov
Разработка моего сайта. Часть 4. Подключение шрифтов

Здравствуйте друзья в этом видео.

Я продолжаю создавать свой личный сайт и сегодня мы подключим шрифты для моего сайта для того чтобы именно отображение было текстовый части вот прямо как в макете, что с приступом сразу для для текстовых слоев использован робота сейчас мы его найди в интернете скачаем и подключаем к нашему проекту так-то шрифт скачать сейчас мы скачаем полностью все шрифты которые нам потребуется все начертания. Чтобы в дальнейшем их использовать roboto Bold. Нам нужен регулярно так roboto Light Regular так сохраняем, тогда скачать шрифт скачать шрифт поместим ему папку нашего проекта.

Вот она меня чуть ранее скачен был так добавим его на рабочий стол разархивируется теперь надо непосредственно все файлы вот эти перенести в папку.

Как перенести в папку так рабочий стол создать папку. Фолз в корневом каталоге нашего нашего сайта и размести туда, что делаем так Program openserver. Отметь 700 она тоже так не добавляем сюда папку zenfone фонд и все файлы которые получены у нас после скачивания мы помещаем в эту папку. Отлично мы забросили все файлы которые. Нам требуются для работы папку fonts теперь при загрузке сайта шрифты будут подтягиваться именно вот этой папке, что нам. Интересно нам интересный интересен файл roboto CSS именно в этом файле там ещё все составил подключены нужные нам даже с запасом шрифты в принципе можно удалять или не удалять лишнее которые не используются — это уже каждый выбирает для себя сам я теперь теперь мне нужно подключить этот файл робот с нас файл style.css. Но — это у нас будет стоял с потому, что мы работаем именно спрятаться list Files так импорт импорт так и так и смотрим так как у нас положить в директории фонд надо подписать фонд Flash робота. CSS так — это мы сделали. Сохрани файл пока и посмотрим сейчас. Надо протестировать подключился ли наш файл именно к нашему сайту так сейчас мы откроем сайт режим инкогнито с тобой моё видели, что у нас меняется с текстом плане и так ещё одеть хочется открыть смотрим применим теперь к нашего телефону или вообще применим к нашему телефону пока, что какой-нибудь шрифт посмотрим макет посмотрим макет и знаю, что — это за шрифт у нас roboto-regular 16 пикселей на сайте вот можно посмотреть робот этот Normal Normal у нас всех сердце правилах так берём смотрим какой у нас открой журнал здесь класс используется в хадере на телефонах фаина фаина фаина и делаем здесь Font Family font-family roboto пока, что смотрим результате рующий ситуацию так пока, что нас не поменялось так сейчас поглядим справочники. Так точно синтаксис функции Font Family так font-family шрифты так имя с лифтом. И прописали верно смотрим. Почему же нас не подключилась так у нас не обновился файл style.css посмотрим его поставил CSS font-family roboto проверим сейчас у нас подключена ли вообще файл Font Family да файл у нас подключён вот можно увидеть как изменяется шрифт вот — это вот пока, что только в отладчике, но в принципе файл все cells сосед уже подключен осталось сделать так чтобы браузер у нас обновился и подхватил наш файл так посмотрим режиме инкогнито как у нас — это дело продают стоит вот здесь у нас всё поменялось отлично вот таким образом мы подключили на сайт нужный шрифт сейчас мы продолжим его использовать сделаем вообще на весь Body один шрифт и потом его уже будем походу менять чтобы нам было проще. Отправь меня только тот нужный шрифт который у нас изменяется остальные чтобы у нас весь текст three-body имел определенный зелёный шрифт . Buddy и выбираем Font Family робота сохраняем смотрим результат нам вот у нас весь текст поменялся именно на шрифт roboto и пока, что он стандартный стоит 16 пикселей можем конечно жестко задать fanserials 16 пикселей ну лично не будет и у нас вот всё так же само осталось поменяли. А, что ещё. Что ещё пока, что мы поменяли шрифт, но потом мы будем с ним дальнейшем работать в дальнейшем будем менять заголовки тоже такими методами CSS чтобы уже продавать нашему тексту вид заголовков так вот серый цвет тоже с цветом будем работать. Ну на этом видео завершён следующем видео продолжим работу над моим сайтом.

0 комментариев
0

Читайте также