Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Css свойства Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в Html коде

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня будет очередная статья, вносящая свой вклад в составление справочника по Css. Речь в ней пойдет уже не о Css селекторах, а о свойствах таблиц каскадных стилей, а именно о свойствах, которые используются для CSS оформления шрифтов в Html коде: font-family, font-weight, font-size, font-style, font-variant и line-height. Постараюсь при этом максимально наглядно показать их работу, рассказать о синтаксисе и способах использования.

Если вы впервые столкнулись с понятием стилевого оформления кода, то советую вам начать углубляться в тему с основ (что такое CSS), а дальше уже идти по порядку формирующему очередность материалов в справочнике по CSS (вплоть до этой статьи). Собственно, во всех предыдущих материалах мы лишь во всех подробностях изучили тему селекторов, а Css свойства начинаем разбирать только сейчас и первым из них мы рассмотрим Font во всех его ипостасях (ну, и line-height, ибо это CSS свойство тоже имеет прямое отношение к оформлению шрифтов в Html элементах кода).

Font-family — задаем в CSS тип и гарнитуру шрифта для Html элементов

Нужно будет предварительно сказать, что все CSS свойства, используемые для оформления шрифтов (Font Weight, Family, Size, Style, Variant и Line Height) в Html коде, наследуются (что такое Css наследование и где можно узнать — наследуется данное свойство таблиц стилей или же не наследуется):

Итак, с помощью Css свойства font-family можно задать гарнитуру и тип шрифта, который вам требуется применить к какому-то конкретному элементу Html кода (например, к тегу абзаца P или же тегам заголовков H1-H6). Понятно, что Html элемент, к которому требуется применить font-family, вы будете задавать в Css коде с помощью селекторов (о css селекторах мы с вами уже подробно поговорили).

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

Т.е. сначала пишется CSS свойство, а через двоеточие — значение для него. Отдельные CSS правила для каждого селектора отделяются друг от друга точкой с запятой (после последнего правила точку с запятой можно не ставить):

Теперь давайте перейдем непосредственно к синтаксису Css свойства font-family, ибо тут есть небольшие нюансы. В font-family нужно перечислить гарнитуры шрифтов в порядке убывания их приоритета (если на компьютере пользователя не будет установлен первый шрифт, то применен будет второй из списка в font family, ну и т.д. по списку), а в конце нужно будет дописать желаемый тип шрифта, например, sans-serif (если ни одного из перечисленных в font-family шрифтов на компьютере пользователя не обнаружится, то будет применен один из имеющихся у него шрифтов указанного типа).

В приведенном примере браузер сначала поищет на компьютере пользователя установленный шрифт Arial и если его найдет, то данный Html элемент им и будет в результате отрисован. А если Arial на компьютере пользователя найден не будет? Тогда браузер поищет Geneva, а в случае неудачи — шрифт Helvetica, ибо он идет следующим по убыванию приоритета в CSS свойстве font-family. Понятно?

Ну, а если пользователь окажется настолько экзальтированным, что ничего из перечисленного в font family на его компе найдено не будет, то данный Html элемент будет отрисован тем шрифтом, который у этого пользователя выбран по умолчанию для шрифтов типа sans-serif (шрифты без засечек или по другому — рубленные). Существуют еще типы шрифтов Serif (с засечками) и monospace (моноширинные), которые вы так же можете использовать в CSS свойстве Font-family для указания типа шрифта.

Да чего я объясняю?! Ведь это все в точности повторяет задание шрифтов в Html теге Font через атрибут Face, который сейчас считается не рекомендуемым (не валидным) и которому на смену как раз и пришло CSS свойство Font-family. Там же вы можете более подробно почитать про то, как пользователь может назначить умолчательные шрифты различных типов:

Там же, кстати, написано, что существует проблема задания в Css и Html абсолютно любых шрифтов, ибо они должны быть обязательно установлены на компьютерах пользователей. Считается, что с большой долей вероятности на компьютере пользователя будут установлены только около десятка шрифтов (Arial, Verdana, Times New Roman, Tahoma, Georgia, Trebuchet MS, Courier New, Comic Sans MS) и именно их вы можете без опаски использовать в Css правилах с Font-family.

Но довольно интересный выход из этой ситуации предложил Google (красивые Html и CSS шрифты для вашего сайта). Суть состоит в том, что браузер будет искать данные красивые шрифты (не входящих в десятку универсальных) не на компьютере пользователя, а на серверах Google, которые, как вы знаете, работают очень стабильно и высоки аптаймом.

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

Font-size — задаем в CSS размер для шрифта

Следующее Css свойство Font-size служит для задания размера шрифта для какого-либо Html элемента (все те же абзацы, заголовки и т.п.). У этого Css свойства есть свои особенности. Размер шрифта в Font-size можно задавать как в абсолютных, так и в относительных единицах:

1. Можно задать размер шрифта в Css свойстве Font-size жестко, используя для этого пикселы (единицы размеров шрифтов в Html и CSS):

   font-size:10px;

2. Можно задать размер шрифта в относительных единицах em и ex . Подробнее об этих единицах размеров вы можете прочитать по ссылке, но если говорить кратко, то «em» — это высота шрифта, заданная для данного элемента по умолчанию или унаследованная, а «ex» — это высота не всего шрифта, а только лишь латинской буквы «x».

   Но размер «Ex» для разных браузеров может отличаться по отношению к «Em», поэтому в CSS свойствах font-size гораздо чаще используют относительные единицы размера шрифта в «Em». Например, если для заголовка задать:

   font-size:2em;

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

3. Так же относительные размеры шрифтов в font size можно задавать и с помощью процентов, которые будут считаться от размера шрифта, который данный Html элемент получил по наследству (наследование в CSS). «Em», кстати, делает тоже самое. Один «Em» и 100% — это одно и то же:

   font-size:200%;

   Кстати, размеры шрифта и гарнитура по умолчанию определяются используемым браузеров и эту информацию всегда можно посмотреть. В Firefox, например, вам достаточно для этого выбрать из верхнего меню «Настройки» — «Настройки» — вкладка «Содержимое»:

   

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

   В любом случае вы вольны будете с помощью Css свойства font-size задавать в относительных единицах уменьшение или увеличение этого унаследованного размера шрифта. То же самое можно сказать и об умолчательной гарнитуре шрифта (которая в CSS задается в font-family) — она так же передается по наследству тегу Html из настроек браузера пользователя.

   Все шрифтовые CSS правила наследуются (font-family, font-weight, font-size, font-style, font-variant и line-height). Т.е., если вы написали в каком то Html элементе Font-size, то этот размер будет передаваться во все вложенные в него Html элементы (наследоваться). Это можно перебить уже прописанным для вложенного элемента правилом «Font-size» и т.д.

4. Можно так же в качестве значений для Css свойства font-size использовать одно из семи обозначений: xx-small, x-small, small, medium, large, x-large или xx-large. Что это такое?

   А это полный аналог того, как мы задавали размеры шрифта в чистом Html с помощью тега Font и атрибута Size. Но только там мы использовали для задания размера шрифта числа от 1 до 7, а здесь используются названия размеров, но суть осталась прежней и размеры, заданные таким образом и через font size в html, будут кореллироваться между собой:

   
5. Ну, и последний способ задания относительных размеров через Css свойство «font size» заключается в использовании «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного (примерно на 17 процентов, но зависит от конкретного браузера). Этот способ тоже имеет аналог в чистом Html, т.к. ранее для этого использовались теги Small и Big.

Css свойства font-weight, line-height и font-style

Font-weight» в Css позволяет задавать нормальное (font-weight: normal) или жирное (font-weight: bold) начертание шрифта для того Html элемента, которому это Css свойство адресовано. Но на самом деле у свойства «Font-weight» могут быть и другие значения. Их всего четыре буквенных плюс цифровая шкала:

1. В CSS для «font weight» можно использовать значения: normal, bold, bolder (чуть более жирный) или lighter (чуть более тонкий). Причем, реально работают во всех браузерах только значения normal (в него же будет переключать и lighter) и bold (bolder так же даст просто жирное начертание).

2. Либо цифровые значения от 100 до 900 с шагом в 100 (от сверхтонкого до сверхжирного). Т.е. по этой шкале шрифт мог использовать много начертаний разной степени жирности. Изначально значение normal соответствовало 400, а значение bold для свойства font-weight — 700.

   Но на практике пока ни один браузер для «Font-weight» этого не поддерживает в полной мере. А жаль, иногда хочется использовать чуть более жирный или чуть более тонкий шрифт, чем тот, что нам могут дать значения «normal» и «bold» в Css свойстве «font weight». Увы и ах, сейчас все цифры менее 400 дадут вам в итоге нормальный шрифт, а все что больше — жирный.

Кстати, в одной из последних статей мы рассматривали такое понятие, как Css стили принятые по умолчанию для оформления Html элементов, если в файле таблиц каскадных стилей для этих элементов ничего не задано. Так вот там, например, для заголовков H1-H6 и тегов логического и физического выделения жирным (strong и B) определен стиль font weight со значением bolder:

Т.е. разработчики стандарта языка стилевой разметки CSS предполагали, что это будет работать и полностью поддерживаться браузерами, но пока что «Font-weight: bolder» интерпретируется большинством браузеров как «Font-weight: bold» и не более того. По умолчанию, свойство «font weight» имеет значение «normal» (посмотреть это можно для любого свойства в спецификации Css в столбце «Initial value»).

Следующее Css правило, которое у нас стоит на очереди и которое позволяете задать оформление шрифтов для имеющихся у вас Html элементов — это «Line-height», что означает — высота линии. Смысл этого правила в том, чтобы отодвинуть строчки текста на веб странице друг от друга по высоте, ибо слепленные друг с другом строки становятся не читаемыми. В полиграфии это называется интер-линьяж.

С помощью «Line-height» можно добавить или уменьшить пространство над и под строкой с текстом, изменяя таким образом всю высоту линии с текстом:

Расстояние от текста (его размер задается через «font-size») откладывается симметрично и (вверх и вниз одновременно). По умолчанию Css свойство «line height» для всех Html элементов с текстом будет иметь значение Normal (посмотреть это можно для любого свойства в спецификации Css в столбце «Initial value»), которое зависит от типа используемого шрифта и вычисляется браузером автоматически.

Например, для шрифта Arial высота линии равна примерно 120%, т.е. размер по вертикали всей строки (шрифт плюс свободное пространство над и под ним) будет на 120% больше высоты шрифта (задается в font-size). А для шрифта Times New Roman значение Css свойства Line-height по умолчанию будет уже примерно 125%.

Для увеличения и уменьшения расстояния между строками текста можно использовать относительные значения для «Line-height» в виде процентов или «Em». Например, для сильного разрежения строк (увеличения высоты линии) можно написать:

line-height:300%;
или
line-height:3em;

А если написать так:

line-height:30%;
или
line-height:0.3em;

то высота линии (line height) станет меньше, чем высота шрифта (font-size) и строки текста попросту наедут друг на друга.

В качестве значений для Css свойства «Line-height» можно так же будет использовать и любые абсолютные значения, которые принято использовать для шрифтов в таблицах каскадных стилей — пикселы (px), дюймы (in), пункты (pt). Либо можно использовать безразмерный множитель (любое число больше нуля). Например, для задания полуторного интервала между строками можно написать так:

line-height: 1.5;

Следующее Css свойство — это «font-style», с помощью которого можно задать наклонный шрифт (курсив). Для этого свойства по спецификации предусмотрено три варианта значений: normal, italic и oblique. Но на практике используются только первые два. Причем, значение «normal» является для свойства «font style» значением по умолчанию.

Когда вы задаете для какого-либо элемента Html кода значение font-style:italic, то браузер будет искать нужную гарнитуру шрифта помеченную как «italic» (т.е. курсивное начертание). Если сами вы зайдете через панель управления на своем компьютере в «шрифты» , то увидите там, что многие шрифты имеют вариант с «italic» или «курсив» в названии.

Но есть шрифты (например, всем известный Tahoma), у которых разработчиками не было предусмотрено наклонного начертания. Что же сделает в этом случае браузер (если вы в Css свойстве font-style для такого шрифта прописали italic)? Браузер будет сам пытаться наклонить буквы этого шрифта, раз об этом заблаговременно не позаботились его разработчики. Выглядеть это будет конечно же хуже.

Ну, а значение oblique для Css свойства font-style будет вынуждать браузер всегда наклонять шрифт своими средствами, даже если для него имеется курсивное начертание. Выглядеть это будет зачастую просто ужасно, поэтому значение «oblique» с этим свойством практически не используется.

Ну, и последнее из рассмотренных сегодня свойств таблиц каскадных стилей будет font-variant, которое очень редко используется при верстке. По умолчанию в шрифтах начертание строчных букв отличается от заглавных не только размером, но и внешним видом самих литер. Вот, а «font-variant» позволяет не изменяя размера строчных букв сделать их начертание точно таким же, как и начертание заглавных в этом шрифте.

Соответственно, у Css свойства «font-variant» имеется всего два значения: normal (по умолчанию) и small-caps (начертание строчных будет таким же, как и у заглавных букв). Для русского языка это свойство используется крайне редко.

Font — сборные правила в языке стилей CSS

Сборное правило Font, как и другие сборные правила в CSS, позволяет указать в нем значения отдельных элементарных свойств через пробелы.

В большинстве случае порядок значений CSS свойств в сборных правилах не важен, но вот в Font это не так. Здесь важен порядок следования значений и он должен быть именно таким, как показано на приведенном чуть выше скриншоте (кстати, скриншот сделан в snagit). Т.е. писать нужно будет примерно так:

font: italic small-caps bold 12px/12px verdana;

Но на самом деле, в сборном CSS правиле Font обязательны только два последних значения (font-family и font-size, даже без указания через слеш значения line-height). А какие же значения тогда браузер будет использовать для не указанных в Font свойств? Ну, очевидно, что значения принятые для них по умолчанию (посмотреть это можно для любого свойства в спецификации Css в столбце «Initial value»).

А знаете почему обязательно указывать в этом сборном правиле значения для «font-family» и «font-size»? Да потому что они не имеют как таковых значений по умолчанию (эти значения берутся из настроек браузера пользователя, как мы узнали чуть выше по тексту). Поэтому, если вы не хотите переопределять гарнитуру или размер шрифта, то сборное CSS правило Font использовать не стоит (лучше использовать отдельные правила).

Т.о. сборное правило Font, как правило, используют для тега Html или Body, а для внутренних элементов, у которых гарнитура и размер шрифта должны будут наследоваться, чаще всего используют отдельные Css свойства (font-weight, font-size, font-style).

Если для внутренних элементов использовать это составное правило, то придется обязательно прописывать гарнитуру и размер шрифта. А если вы потом захотите их поменять. Что, будете лазить по всем составным правилам Font в коде? Это неудобно. Поэтому составное правило используется в основном только для внешних контейнеров. Но это так, размышления на тему.

Чаще всего составное правило Font пишется без многих Css свойств, которые редко используют отличными от умолчательных:

font:bold 4em/3em arial, "comic sans ms", sans-serif;

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

font: 10px arial, sans-serif;

Это минимально возможная форма написания, в которой присутствуют только обязательные свойства «font-family» и «font-size». Все остальные CSS свойства оформления шрифтов будут использоваться браузером со значениями принятыми по умолчанию (normal). Описанный выше синтаксис сборного правила Font взят из спецификации CSS:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Верстка сайта
  • Html для чайников
  • Что такое язык Html, валидатор W3C и Html тэги
  • Зачем нужен Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Как использовать цвета в Html коде
  • Как в Html код вставить картинку и html ссылку
  • Как сделать в Html список с помощью тегов UL, OL, DL и LI
  • Html таблица и теги Tr, Th, Td, Table
  • Html формы - теги Form и Input
  • Div верстка сайта в Html и CSS ч.1
  • Html и CSS верстка сайта на DIV ч.2
  • Блочная верстка

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• List style ( type, image, position) — Css правила для настройки внешнего вида списков в Html коде
• Свойства CSS text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
• CSS (таблицы каскадных стилей) — что это такое, Style и Link для связывания языка Css и Html
• Красивые шрифты для сайта онлайн — как добавить в Html и CSS web шрифты через Google Font API
• Единицы размеров (пикселы, Em и Ex) в CSS для шрифтов, цвет и наследование правил в CSS
• Пробелы и спецсимволы (мнемоники) в Html коде, неразрывный пробел и другие специальные символы, форматирование Html и CSS кода
• Font, Html color, Blockquote, Pre — форматирование текста в HTML, Html шрифты, Strong, Em, B, I