Подписаться на рассылку:

Ваш e-mail:

Ваше имя:

Авторизация:

Регистрация Забыли пароль ?

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

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

Сегодня я расскажу Вам о том, как подключить нестандартный шрифт на сайте. Вы наверняка видели на некоторых сайтах шрифты, которые не присутствуют в системе Windows, при этом у Вас на экране они отображаются корректно. И в этом уроке я научу Вас этому приему. Вначале я напишу код, при помощи которого мы реализуем нашу проблему, а потом все тщательно объясню.

@font-face {
  font-family: MyFont;
  src: url("fonts/myfont.ttf");
  src: url("fonts/myfont.otf");
  src: url("fonts/myfont.woff");
}

p {
  font-family: MyFont;
}

Как видите, за установку шрифтов отвечает конструкция @font-face, в которой мы прописываем css свойство font-family, и через двоеточие пишем название шрифта, который будем подключать. Название может быть произвольным, которое Вам нравится. И при помощи атрибута src указываем путь к шрифту, который будет подключен. Все, половина дела уже сделано, осталось лишь установить шрифт к нужному элементу на странице. Для этого мы используем уже известное для Вас свойство font-family, и указываем название шрифта, которое Вы задали, в нашем случае это (MyFont).

После этого шрифт будет подключен пользователю, который придет на ваш сайт. Как видите, мы использовали три шрифта, с различными расширениями. Их использование не является обязательным, но я вам рекомендую подключать обязательно эти три. Это связано с тем, что не все браузеры поддерживают одинаковый формат шрифтов, поэтому приходится для каждого из них подбирать свой. Но если Вы будете применять вот эти три расширения, пример которых я привел, то обязательно Вы увидите одинаковый шрифт в различных браузерах, будь то Opera, Chrome, или даже IE. Для преобразования шрифта, вы можете зайти в интернет, и найти онлайн конвертор шрифтов, их там большое множество, и проблем с этим возникнуть не должно.

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

5 последних свежих статей:

Методы alert, prompt, confirm в JavaScript

Методы alert, prompt, confirm в JavaScript

И снова я приветствую Вас в очередной теме посвященной языку JavaScript, в которой мы разберем методы alert, prompt, confrim.


Конструкция switch-case в JavaScript

Конструкция switch-case в JavaScript

Всем привет, сегодня мы рассмотрим с Вами конструкцию switch-case в языке JavaScript.


Всплывающая подсказка на CSS

Всплывающая подсказка на CSS

Здравствуйте дорогие друзья, сегодня мы с Вами изучим еще одну тему посвященную языку CSS. И научимся реализовывать всплывающие подсказки на CSS.


Псевдокласс target в CSS

Псевдокласс target в CSS

Сегодня мы рассмотрим еще одну возможность, которую предоставляет нам CSS3, а именно поговорим о псевдоклассе target, для чего он нам может быть нужен, и рассмотрим один из самых популярных способов его применения.


Как вставить видео с YouTube

Как вставить видео с YouTube

Довольно часто Вы видите на различных ресурсах видео, которое хранится на сервисе youtube, но каким-то образом его можно воспроизвести на данном сайте. Об этом сегодня пойдет речь, и я расскажу Вам, как вставить видео с YouTube.

Добавить комментарий: