Css font-family

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

a { font-family: Arial, "Times New Roman"}

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

• serif шрифты с засечками (антиквенные), типа Times;
• sans-serif рубленные шрифты (шрифты без засечек или гротески), типичный представитель Arial;
• cursive курсивные шрифты;
• fantasy декоративные шрифты;
• monospace моноширинные шрифты, ширина каждого символа в таком семействе одинакова.

Css Font Style

Font Style задаёт начертание шрифта. Возможны следующие варианты: обычное, курсивное или наклонное. Если установить курсивное или наклонное начертание, то браузер будет искать подходящий шрифт в системе. Если поиски шрифта окажутся безуспешными, то браузер будет имитировать нужное начертание текста, используя специальный алгоритм. Качество может быть не самым лучшим, особенно при печати.

span.normal {font-style:normal}
span.italic {font-style:italic}
span.oblique {font-style:oblique}

Css font-variant

Если значение font-variant установлено, как small-caps, то вместо букв нижнего регистра используются малые заглавные буквы. Значение по умолчанию равно normal.

H3 {font-variant: small-caps;}
p {font-variant: normal;}

Css Font Size

Свойство Css Font Size устанавливает размер шрифта. Умение управлять текстовым размером важно в веб дизайне. Но не стоит использовать регуляторы размера шрифта, чтобы заставить параграфы быть похожими на заголовки, или заголовки похожи на параграфы. Используйте тэги <h1>-<h6> для заголовков и <p> для параграфов.
Значение font-size Может быть абсолютным или относительным..
Абсолютное значение font-size жёстко задаёт размер шрифта. Пользователи не могут поменять размер шрифта во всех браузерах, что не очень хорошо с точки зрения юзабилити. Абсолютный размер нужно использовать, если заранее известен размер выводимой области текста. Что бы задать абсолютный размер текста, нужно использовать значения: xx-small, x-small, small, medium, large, x-large, xx-large. Но эти значения не совсем абсолютны, т.к. размер зависит от настроек браузера и операционной системы.
Относительное значение font-size задаёт размер шрифта относительно окружающих элементов. Пользователь может менять размер шрифта. Что бы задать тексту относительный размер шрифта, нужно использовать аргументы larger и smaller. Т.к. размер шрифта наследуется от родительского элемента, то для определения размера шрифта текущего элемента относительные размеры применяются к родительскому элементу.
Если не задан размер шрифта, то используется размер шрифта заданный браузером, обычно это 16px (16px=1em).

Задание Font Size в пикселях.

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

h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:14px}

Firefox, Chrome, и Safari могут менять размер текста заданный таким образом, а Internet Explorer не может. Текст может быть изменен во всех браузерах, используя инструмент увеличения масштаба изображения (однако, это изменяет размеры всей страницы, не только текста).

Задание Font Size в Em

Чтобы избежать проблемы изменения размеров в Internet Explorer, многие разработчиков используют em вместо пикселов. Em в качестве единицы измерения размера текста рекомендован W3C.
1em равно текущему размеру шрифта. Размер текста по умолчанию в браузерах равен 16px, следовательно по умолчанию 1em равняется 16px. Для перевода из пикселей в em можно использовать формулу: pixels/16=em.

{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:

{font-size:100%}
h1 {font-size:2.5em}
h2 {font-size:1.875em}
p {font-size:0.875em}

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

Css font-weight

font-weight используется для установки насыщенности шрифта. Значение задаётся от 100 до 900 с шагом 100. 100 для сверхсветлого начертания, и 900 для сверхжирного. Нормальное начертание шрифта равно 400, оно используется по умолчанию, стандартный полужирный текст задаётся – 700.

A {font-weight: bold;}
span { font-weight: bolder;}
p { font-weight: normal;}

Так же можно использовать ключевые слова:

• bold полужирное,
• bolder жирное;
• lighter светлое,
• normal нормальное начертание.

Css line-height

line-height задаёт межстрочный интервал текста, отсчет начинается от базовой линии шрифта. Обычно межстрочное расстояние зависит от вида и размера шрифта и определяется браузером автоматически. Значение межстрочного интервала не может быть отрицательным.
Значение line-height: normal заставляет браузер вычислять расстояние между строк автоматически. Если задано число большее нуля, то оно является множителем от размера шрифта текущего текста. Например, значение 2 устанавливает двойной межстрочный интервал. Доступны так же любые единицы длины, принятые в CSS пикселы, дюймы (in), пункты (pt) и др. Можно применять процентную запись, тогда за 100 процентов считается высота шрифта.

h1 {    line-height: 60%;    }
P {     line-height: 1.8;    }

Краткая запись свойств текста.

Не обязательно перечислять ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’, ‘font-family’, можно также использовать краткую запись: font в которой перечислены значения по порядку: ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-size’, ‘line-height’ and ‘font-family’.

p {
font-family: Arial, Verdana ;
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 9px;
line-height: normal;
}

Этот код можно заменить следующей строчкой:

p { font: 600 9px Arial, Verdana }

css, web-разработка, вёрстка, создание сайтов