26.09.2013

Как изменить шрифт с помощью css

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

ШрифтыШрифты

Здесь дважды написан один и тот же текст. Но если верхнюю часть хочется прочитать, то текст внизу сливается в одно серое пятно.

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

Давайте их и разберем.

Стиль шрифта font-style

Определяет начертание шрифта:

обычное - normal;
курсивное - italic;
наклонное - oblique.

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

<p style="font-style:italic;">

Курсивное выделение текста

</p>

Размер шрифта font-size

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

Для фиксированного размера:

xx-small - очень очень маленький,
x-small - очень маленький,
small - маленький,
medium - средний,
large - большой,
x-large - очень большой,
xx-large - очень очень большой.

Для относительного размера:

larger - больше чем размер шрифта родительского элемента,
smaller - меньше чем размер шрифта родительского элемента.
 
<p style="font-size: 25pt;">размер 25pt </p>
<p style="font-size: medium;">medium - средний</p>

Жирность шрифта font-weight

Свойство font-weight - определяет жирность шрифта. Насыщенность шрифта может быть задана с помощью зарезервированных слов:

normal - обычный шрифт,
bold - полужирный шрифт,
bolder - жирный шрифт,
lighter - тонкий шрифт.

Кроме этого жирность можно задавать числами в интервале от 100 до 900 с шагом 100.

<p style="font-weight: lighter">тонкий шрифт</p>
<p style="font-weight: 300">жирность шрифта равна 300</p>

Семейство шрифта font-family

Свойство font-family - указывает одно, два или три имени шрифта из библиотеки шрифтов.

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

Так например запись вида <p style="font-family: Times New Roman, Arial, Verdana;"> - будет указывать браузеру пользователя, что данный параграф следует писать с помощью шрифта Times New Roman, а если его по каким то мифическим причинам не окажется в его библиотеке шрифтов то следует использовать шрифт Arial, и уж если и его нет, тогда писать шрифтом Verdana.

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

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

serif - шрифты с засечками
sans-serif - рубленые шрифты
cursive - курсивные шрифты
fantasy - декоративные шрифты
monospace - моношириные шрифты

Например, если в файле  написать

<p style="font-family: Times New Roman, sans-serif;">

то это означает, что если вдруг не окажется шрифта с именем Times New Roman, то следует использовать любой (или определённый в настройках браузера) доступный шрифт из семейства sans-serif - рубленых шрифтов.

 Преобразование букв в заглавные-уменьшенные

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

Значения:

normal - нормальный (по умолчанию)
small-caps - все буквы заглавные и уменьшенные
<p style="font-variant: small-caps;">

Стилевые свойства шрифта

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

<h2 style="font-variant:small-caps;font-weight: bold;font-style:italic;font-family: Arial; font-size:18pt;">Наш зоголовок</h2>

Ох, как длинно! Вы, наверное, заметили, что все свойства начинаются одинаково, со слова font

Оказывается, оно является базовым атрибутом. И мы можем все эти свойства записать в следующем виде:

<h2 style="font:small-caps bold italic Arial 18pt"</h2>