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

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

    Начать бесплатно

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

    Начать бесплатно

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

      .NET Live Online бесплатное обучение для украинцев

      Введение

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


      Самым простым методом применения специфического шрифта является использование специального свойства 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>

       

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

      КОММЕНТАРИИ И ОБСУЖДЕНИЯ
      .NET Live Online бесплатное обучение для украинцев

      Пакеты подписки с доступом ко всем курсам и сервисам

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      Премиум
      • Все видеокурсы на 12 месяцев
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.