КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ

[Главная страница] [HTML/CSS] [Контакты]

Оформление текст и другие базовые возможности

Задание определенного шрифта для текста

Задать определенный шрифт для оформления текста можно с помощью свойства font-family, как показано в следующем примере:

p {
  font-family: Verdana;
}

С помощью CSS можно задавать как определенный шрифт, так и семейства шрифтов:

  • serif (На концах линий, составляющих буквы, есть маленькие черточки (засечки). Засечки - наследие тех времен, когда для письма использовались перья. Такое написание позволяло выделять отдельные буквы. Этот тип шрифта подходит для представления текстов большего кегля или для текстов, набранных маленьким кеглем и предначенных для распечатки. На экране буквы будут неясными, если размер шрифта маленький)
  • sans-serif (Буквы данного семейства шрифтов не имеют засечек. И хотя символы sans-serif менее отчетливы, они больше подходят для текстов, отображаемых на экране и набранных шрифтом меньшего размера)
  • monospace (Все символы этого типа шрифта одинаковы по ширине. Например, в других шрифтах строчная буква "i" занимает в строке гораздо меньше места, чем заглавная "М". Но в моноширинной шрифте увеличивается межсимвольный интервал справа и слева от этой буквы (стоит отметить, что данный интервал является частью буквы и неотделим от нее), и, таким образом, она занимает столько же места, сколько и буква М. Шрифт этого типа идеально подходит для текстов, в которых важна каждая буква (при этом не обязательно быстро их читать), например для программного кода, опечатки в котором могут привести к серьезным ошибкам)
  • cursive (Курсив имитирует письмо от руки, его лучше всего использовать для украшения текста кли смысловых выделений. Большие же объемы текста, набранные курсивом, сложно читать)
  • fantasy (Шрифты, служащие для украшения и не входящие ни в одну из перречисленных категорий, называются шрифтами fantasy. Они весьма декоративны, а шрифт Wingdings представляет собой простые картинки или иконки. Как и курсив, их лучше всего использовать в качестве украшений. Однако не следует увлекаться шрифтами fantasy, даже если вы хотите усилить впечатление, производимое вашей страницей на посетителя.)

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

Во избежание подобных недоразумений можно просто-напросто задать название семейства шрифтов, а система пользователя сама определит, какой шрифт следует применить. К примеру, если вы хотите оформить текст шрифтом из семейства sans-serif, к которому относится, например, Arial, можно использовать следующее правило стиля:

p {
  font-family: sans-serif;
}

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

p {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

В данном случае указано, что при наличии в системы шрифта Verdana следует использовать именно его; в противном случае броузер должен проверить, установлен ли в системе шрифт Geneva; если и его не окажется, будет осуществлен поиск Arial, а затем Helvetica. При отсутствии в системе всех перечисленных шрифтов броузер должен применить используемый в системе по умолчанию шрифт из семейства шрифтов sans-serif.

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

p {
  font-family: "Courier New", "Andalo Mono", monospace;
}

Общее название семейства шрифтов никогда не заключается в кавычки и всегда приводится в самом конце списка.

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Пример</title>
  <style type="text/css">
    h1{
      font-family:Georgia, "Times New Roman", Times, serif  
    }
    h3{
      font-family:"Courier New", Courier, monospace  
    }
    .copy{
      font-family:Arial, Helvetica, sans-serif  
    }
  </style>
</head>

<body>
  <hr/>
  <h1>Задание определенного шрифта для текста</h1>
  <h3>Решение</h3>
  <hr/>
  <h3>Обсуждение</h3>
  <p class="copy">
    Задать определенный шрифт для оформления текста можно с помощью 
    свойства font-family, как показано в следующем примере
  </p>
</body>

</html>

Результат:

Задание определенного шрифта для текста

Решение

Обсуждение

Задать определенный шрифт для оформления текста можно с помощью свойства font-family, как показано в следующем примере