Свойство CSS font-family - Блог ITVDN
ITVDN: курси програмування
Відеокурси з
програмування

    Обери свою IT спеціальність

    Почати безкоштовно

    Обери свою IT спеціальність

    Почати безкоштовно

      Свойство CSS font-family

      advertisement advertisement

      Введение

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


      Самым простым методом применения специфического шрифта является использование специального свойства font-family и задание ему значения с именем специфического шрифта при условии, что тот установлен на пользовательской машине. Напомним, что по умолчанию, т.е. на машине среднестатистического пользователя, на компьютерах с установленной ОС Windows в браузерах будет использоваться шрифт Times New Roman.

      <head>

          <title>title>

          <style>

              p {

              font-family: 'Segoe UI';

              }

          style>

      head>

      <body>

          Текст для сравнения

          <p>Текст с заданными настройкамиp>

      body>

       Заданные настройки

      В нашем случае добавление на странице любого количества элементов p, описывающих параграфы, сопровождалось бы присвоением определенного правила начертания шрифтов для их содержимого, в частности использование гарнитуры шрифта под названием Segoe UI. В случае, если у нашего пользователя данные шрифты отсутствуют на компьютере, текст отобразится с начертанием Times New Roman.

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

      Правда, стоит отметить преимущества работы с текстом:

      • текст легко добавляется и настраивается (изменение размеров шрифта, межстрочных и межсимвольных расстояний, добавление эффектов тени, цветового оформления и т.д.);
      • текст лучше индексируется современными поисковыми системами;
      • текст можно скопировать в буфер, перевести на другой язык.

      Что же делать, если необходимо отобразить текст со специфическим шрифтом, которого может попросту не быть на клиентской машине, и не хочется ограничиваться изображением? Ответ напрашивается сам за себя – загрузить файл со шрифтами непосредственно на пользовательский компьютер и оперировать с ним как с подключаемым модулем. Для этого используем правило @font-face, которое позволит определить дополнительные настройки шрифта и в случае необходимости (если данный шрифт не будет  обнаружен на компьютере пользователя) загрузить его на клиентскую машину.

      В итоге получим следующий результат:

      <head>

          <title>Font-facetitle>

          <style>

              @font-face {

                  font-family: heinrich;

                  src: url('heinrich.ttf'),

                  url('heinrich.eot');

              }

      /* После того как мы позаботились о доступности шрифта для пользователя,

      можем смело приступить к его использованию. */

              div {

                  font-family: heinrich;

                  font-size: 1.5em;

              }

          style>

      head>

      <body>

          <div>Текст с заданными настройкамиdiv>

          <p>Текст для сравненияp>

      body>

      Использование шрифта

      Важным моментом использования подключаемых шрифтов является применение курсивного начертания для текста. Так, в случае если мы добавим тег , то получим следующую картину:

       

      <div><i> Текст с заданными настройкамиi>div>

       

      Текст с заданными настройками

       

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

       

      <head>

          <title>Font-facetitle>

          <style type='text/css'>

              /* Подключаем шрифт */

              @font-face {

                  font-family: heinrich;

                  src: url('heinrich.ttf'), url('heinrich.eot');

              }

       

              /* Подключаем шрифт для задания курсивного начертания */

              @font-face {

                  font-family: heinrich;

                  font-style: italic;

                  src: url('heinrichitalic.ttf'), url('heinrichitalic.eot');

              }

       

              /* Указываем, что все параграфы должны использовать подключенные шрифты */

              p {

                  font-family: heinrich;

                  font-size: 1.5em;

              }

          style>

      head>

      <body>

          <p>Для обычного текста будет использован уже знакомый шрифт heinrich.p>

          <p><i>Для курсивного текста будет использован другой шрифт, а именно – heinrich italic.i>p>

          <p>А это обычный текст с <i>"вставками"i> курсивного.p>

      body>

       

      Использование разных шрифтов

      КОМЕНТАРІ ТА ОБГОВОРЕННЯ
      advertisement advertisement

      Пакети підписки з доступом до всіх курсів та сервісів

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      49.99 $
      37.50 $
      Підписка
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      89.99 $
      63.00 $
      Підписка
      Преміум
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      169.99 $
      102.00 $
      Підписка
      new
      Преміум Plus
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      199.99 $
      120.00 $
      Підписка
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.