CSS шрифт, стиль и размер шрифта

Определяем CSS шрифт с засечками и без засечек

Существует множество видов шрифтов, которые образуют так называемые семейства:

Georgia, Times New Roman, serif
Arial, Helvetica, sans-serif
Courier New, Courier, monospace
Verdana, Geneva, sans-serif
Times New Roman, Times, serif

Шрифт в CSS | Семейства шрифтов, примеры
Шрифт в CSS | Изменяем вид и тип шрифта
Тип CSS шрифта | Наклонный, жирный шрифт
CSS шрифт | Определяем размер шрифта

CSS виды и семейства шрифтов:

`font-family:`	Pезультат
`Verdana, Geneva, sans-serif`	Семейство шрифтов без засечек
`Arial, Helvetica, sans-serif`	Семейство шрифтов без засечек
`'Times New Roman', Times, serif`	Семейство шрифтов с засечками
`'Courier New', Courier, monospace`	Семейство моноширинных шрифтов

Verdana, Geneva, sans-serif — семейство шрифтов без засечек:

Times New Roman, Times, serif — семейство шрифтов с засечками:

Courier New, Courier, monospace — семейство моноширинных шрифтов:

Еще пример форматирования:

<title>CSS шрифты и примеры их форматирования</title>

          <style type="text/css">

          p {

          font-family:'Times New Roman', Times, serif;

          font-weight:bold;

          font-size:18px;

          font-style:italic

          }

          </style>
 </head>

          <body>

          <div>Обычный текст</div>

          <p>

          Текст жирный, размером 18 пикселей, наклонный, семейства Times New Roman

          </p>

          </body>

Результат: стиль шрифта, определенный с помощью CSS

В примере выше стилевые описания распространяются на параграфы данного документа. Атрибут font-family: содержит три различных шрифта, одного семейства (с засечками). Указывать их можно в различном порядке, но будет применен первый или второй если браузер не сможет найти на компьютере пользователя установленный первый шрифт, или третий, если программа браузера не прочтет первые два. При написании кода, название, состоящее из нескольких слов выделяется кавычками, например, 'Times New Roman'.

Для web-сайтов рекомендуется применять шрифты без засечек, чтобы не затруднять чтение текста.

Шриф sans-serif является представителем семейства шрифтов без засечек. К нему относятся Verdana, Geneva и другие. Если прописать код: font-family: sans-serif — программа браузера выберет на компьютере пользователя один из шрифтов без засечек, например, Verdana. Если обозначить: font-family: serif — будет выбран шрифт семейства с засечками, например, Times. CSS aтрибут со значением font-family: monospace — установит моноширинный шрифт, к примеру, Courier New.

CSS aтрибут font-family: определит, выбранный вами, вид шрифта. Можно установить свой шрифт, но нет ни какой гарантии, что он будет присутствовать на компьютере пользователя. Если его там не окажется, программа браузера не сможет правильно интерпретировать, указанный вами, шриф.

CSS наклонный и жирный шрифт

Определим наклонный шрифт:

CSS атрибут со значением style="font-style:italic" определяет наклонный шрифт.

Определим жирный шрифт:

CSS ключение style="font-weight:bold" определяет жирный шрифт.

Определим нормальный объем шрифта:

Строчка style="font-weight:300" преобразует жирный шрифт в обычный.

CSS размер шрифта

Пример с изменением размера:

<head>

          <style type="text/css">

          p {font-size:13px}

          p.big {font-size:16px}

          </style>
 </head>

          <p>Текстовая строка размером 13 пикселей.</p>

          <p class="big">Текстовая строка размером 16 пикселей.</p>

Результат:

Текстовая строка размером 13 пикселей.

Текстовая строка размером 16 пикселей.

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS код в HTML CSS шрифт и его размер CSS свойства текста