7. Форматирование шрифта с помощью css.

В CSS сушествует два типа имен семейств шрифтов:

-обобщенное семейство (generic family) - группа семейств шрифтов с одинаковым начертанием (например "Serif" или "Monospace")

-семейство шрифтов (font family) - специфическое семейство шрифтов (например "Times New Roman" или "Arial")Обобщенное семейство

Семейство Шрифтов

Семество шрифта устанавливается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов в качестве "запасных" вариантов. Если браузер не поддерживает первый шрифт, он пробует применить следующий шрифт.

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

Замечание: Если в имени семейства шрифта более одного слова, оно должно заключаться в кавычки, например семейство шрифтов "Times New Roman".

Более одного семейства шрифтов указывается через запятую:

Пример

p.serif{font-family:"Times New Roman",Times,serif;}

Стиль Шрифта

Свойство font-style в основном используется, чтобы указать курсивный текст.

Это свойство имеет три значения:

normal - Обычный текст

italic - Курсивный текст

oblique - Наклонный текст (наклонный (oblique) текст очень похож на курсивный, но меньше поддерживается)

Пример

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

Размер Шрифта

Свойство font-size устанавливает размер текста.

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

Всегда используйте подходящие теги HTML, например <h1> - <h6> для заголовков и <p> для параграфов.

Значение font-size может быть абсолютным или относительным.

Абсолютный размер:

Устанавливает определенный размер шрифта

Не позволяет пользователю изменять размер шрифта во всех браузерах (плохо из соображений удобства просмотра)

Абсолютный размер полезен, когда физический размер вывода известен

Относительный размер:

Устанавливает размер относительно окружающих элементов

Позволяет пользователю изменять размер текста в браузерах

Если вы не указываете размер шрифта, то размер шрифта по умолчанию, размер обычного текста, например в параграфах, равен 16px, т.е. 16 пикселей (16px=1em).

Установка Размера Шрифта в Пикселях

Установка размера шрифта в пикселях дает вам полный контроль на размером текста:

Пример

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

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

Установка Размера Шрифта с Помощью Em

Чтобы избежать проблем изменения размера в Internet Explorer, многие разработчики используют единицы em вместо пикселей.

Единицы размеры em рекомендуются W3C.

1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах равен 16px. Таким образом, размер по умолчанию одной единицы em равен 16px.

Размер может быть вычислен из пикселей в единицы em, используя эту формулу: пиксели/16=em

Пример

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

В примере выше, размер текста в em такой же, как и в предыдущем примере в пикселях. Однако, указывая размер в em, становится возможным подгонять размер текста во всех браузерах.

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

Использование Комбинации Процентов и Em

Решение, которое работает во всех браузерах, - установить размер шрифта по умолчанию в процентах в элементе body:

Пример

body {font-size:100%;}

h1 {font-size:2.5em;}

h2 {font-size:1.875em;}

p {font-size:0.875em;}

Наш код теперь работает идеально! Он показывает одинаковый размер текста во всех браузерах, и позволяет всем браузерам изменять размер текста корректно!

Все CSS Свойства Шрифта

Font: Устанавливает все свойства шрифта в одном объявлении

font-family: Устанавливает семейство шрифта для текста

font-size: Устанавливает размер шрифта текста

font-style: Устанавливает стиль шрифта текста

font-variant: Указывает, следует или нет отображать текст в шрифте small-caps (маленькие заглавные буквы)

font-weight: Указывает вес шрифта