Хорошо там, где мы есть: будь в курсе - подпишись.

OneTwoTrip

Друзья!

Нам очень нужны подписчики на наш канал в YouTube. Если вам не жалко –подпишитесь на наш канал! Если у вас есть канал на YouTube, и вам нужны подписчики, то вам сюда.

Последнее видео:

О генераторе sitemap.xml

станок из циркулярной пилы своими руками

Распаковка диктофона Tascam DR 05

Пылесос Philips FC 8472

Все видео.

Как подключить  шрифты через CSS ?

Сегодня хотелось рассмотреть очень интересную тему!

Как подключить  шрифты через CSS ?

Будем заниматься конкретикой. У нас сайт сделан на простом html, с таблицей стилей CSS.

Мы уже много сделали, чтобы превратить нашу первую страницу из архива с шаблонами в  нормальный шаблон.

Не будем долго ходить вокруг да около!  Для подключения шрифтов есть множество способов.

Вот мой способ:

Подключаем шрифты для сайта с использованием @font-face.

Чтобы что-то подключать – это нужно иметь! А откуда мы возьмем шрифты? Правильно скачаем!

Нужно скачать шрифты – здесь.

Не получилось скачать? см здесь!

Для открытия данного архива вам понадобится программа архиватор WinRAR

Шрифты в формате « ttf»

Технология подключения шрифтов для сайта.

Кратко:

У нас будут 3 куска кода:

1.Код - который размещается в документе css.(Я его разместил на самом верху).

Правило @font-face – позволяет подключать другие шрифты. Отличные от системных.

@font-face

2.Код – который размещается в документе css – это название дива( в моём случае #rightPan), далее тег «p»- абзац, bodytext2 – класс привязанный к абзацу.

#rightPan p.bodytext2

3.Код - который размещается непосредственно на странице.

<p class="bodytext2">Пример шрифта, bodytext 2. </p>

Полная инструкция, как подключить новый шрифт на сайте.

а.Открыть архив, найти нужный шрифт.

б.Распаковать в нужную папку.

с.Прописать путь.

д.В CSS документе создать описание для текста, который будет применять данный шрифт!

е.Написать текст на странице и применить стиль css с новым шрифтом к данному тексту.

Все очень просто!

Внимание!

Если у вас возникают проблемы с применением сторонних шрифтов на вашем сайте, т.е. вы все сделали  по инструкции, которую вы нашли, но шрифты не работают...

Есть совсем простой способ, с помощь которого можно проверить правильность использования шрифтов.
Создайте простую страницу  и там попробуйте  использовать ваши шрифты.

Если шрифты заработают, то значит на основной странице допущена ошибка, либо возник конфликт между CSS кодами – какой-то код css перебивает ваш код нового шрифта.

1:

Открываем документ  файл стиля css смотрим расположение строка №2.

Как подключить шрифты через CSS ?

Вот этот код:

@font-face { /*правило */
font-family: 'DrPoDecorRu'; /*Название  шрифта, Как узнать название шрифта?*/
src: url('http://marrex.ru/5021/aquatic/data/decor.ttf') /*путь к шрифту*/

format('truetype');
font-weight: normal; /*насыщенность шрифта*/
font-style: normal; /*начертание шрифта — обычное, курсивное или наклонное*/

Что такое - format('truetype'); ? Если честно, то слишком много написано и разобраться просто времени не было, не стал удалять оставил так - хуже не будет.

2:

Всё в том же файле css.

Немного я опущусь до нужной таблицы(дива). У меня  весь текст находится в диве  rightPan, поэтому назовем шрифт -  bodytext2 (просто для примера)

Как подключить шрифты через CSS ?

Код:

#rightPan p.bodytext2 { /*описано сверху...*/
text-decoration: none; /*без эффектов*/
font-family: DrPoDecorRu; /*Название  шрифта */
font-size: 50px; /*размер */
color: #000000; /*цвет */
}

3:

<p class="bodytext2">Пример шрифта, bodytext 2. </p>

Размещаем в том месте, уже на странице, где будет располагаться текст с новым шрифтом.

Смотрим, что у вас может получиться!

Как извлечь шрифт из архива в нужное место?

Откроем архив с шрифтами, найдем нужный шрифт – я  ткну пальцем… - decor.zip

Как подключить шрифты через CSS

Нажимаю ПКМ, извлечь файлы(у вас эта строчка: "извлечь файлы" появится лишь тогда, когда у вас будет установлен архиватор WinRAR)

Как подключить шрифты через CSS

Как написать путь к шрифту в css?

Показываем путь. Я извлекаю в ту папку, где у меня на сайте будут храниться шрифты.

Путь к данному шрифту будет такой – смотрим на скрин
5021/aquatic/data/decor.TTF

Как подключить шрифты через CSS

Добавляю http://marrex.ru/.

Получится http://marrex.ru/5021/aquatic/data/decor.TTF

Обращайте внимание на мелочи! Если вы обратите внимание на ссылку, то видим, что название  TTF – написано заглавными буквами! Не знаю почему, но расширение у файла данного шрифта, написано заглавными, я не стал менять их на строчные, И на компьютере, и загруженный на сайт, файл имеет расширение, написанное заглавными, так и в ссылке должно быть соответствие!

Как проверить правильность ссылки на шрифт?

Если вы нажмете на ссылку, то вы сможете загрузить себе данный шрифт. Это говорит о том, что наша ссылка верная!

http://marrex.ru/5021/aquatic/data/decor.TTF

Как узнать название шрифта?

В архиве нажимаем по нужному шрифту – сверху есть имя шрифта.

Как подключить шрифты через CSS

Внимание!!!

Файл может иметь одно название, а шрифт другое!

decor.TTF - название файла.

DrPoDecorRu; /*Название  шрифта */

Друзья!

Мы тратим время + деньги, чтобы у вас была бесплатная + доступная + правдивая информация!!!

Если вы найдете время и проявите великодушие отправив ссылку в соцсети, и оставите комментарии внизу страницы, то это – самое малое, что вы можете сделать для нас!! Мы за это вам очень благодарны!

Мы существуем от кликов по рекламе!

Если вы не нашли подходящего блока рекламы, то вы можете помочь проекту!

Комментарий через Vk.

А теперь самое время развлечься!

Улучши поведенческий фактор на своём сайте!

Если понравится игра, то можно забрать код для своего сайта отсюда!

При копировании материала, ссылка на источник http://marrex.ru/ обязательна!