Оформление шрифтов в CSS. Размер шрифта в CSS. Единицы измерения px, %, em

Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

Задание размера шрифта с помощью HTML

Размер шрифта на странице можно определить при помощи тега font HTML. В статье мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size , который и позволяет установить размер шрифта. Применяется он следующим образом:

Конструктор сайтов "Нубекс"

Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.

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

Устанавливаем размер шрифта при помощи CSS

В CSS для изменения размера шрифта применяется свойство font-size , которое применяется следующим образом:

В приведенном примере размер шрифта устанавливается в пикселях. Но существуют и другие способы задания размера:

• large, small, medium - задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
• larger, smaller - задают относительный размер (меньше или больше относительно родительского элемента).
• 100% - задается относительный размер (в процентах относительно родительского). Например: h1 { font-size: 180%; } Это означает, что размер тега H1 будет составлять 180% от базового размера шрифта.
• Другие варианты задания относительного размера:
  • 5ex - означает, что размер составит 5 высот буквы x от базового шрифта;
  • 14pt - 14 пунктов;
  • 22px - 22 пикселя;
  • 1vw - 1% от ширины окна браузера;
  • 1vh - 1% от высоты окна браузера;

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

Рассмотрим доступные свойства.

font-family

Позволяет определить, каким шрифтом будет написан текст. Для группировки шрифтов в CSS используется два типа имён: generic-family и family-name .

generic-family содержит пять базовых семейств шрифтов, которые можно найти практически на любом компьютере.

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

family-name определяет не семейство, а один шрифт: “Arial Black”, Verdana.

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

H1 {font-family: Arial, sans-serif;} h2 { font-family: "Times New Roman", serif; }

font-style

Задаёт курсивное (значение italic ), наклонное (oblique ) или стандартное (normal ) начертание текста.

<style type="text/css"> h1 { font-style: oblique; } h2 { font-style: italic; } h3 { font-style: normal; }

Текст с наклонным начертанием.

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

Обычное начертание текста.

Создаёт такую страницу:

font-size

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

• Пиксели (px). Используются довольно часто, потому что позволяют указать размер максимально точно. По умолчанию браузер отображает текст размером 16 пикселей.

P { font-size: 12px; }

Обратите внимание: между числом и единицами измерения пробела быть не должно.

• Проценты (%). Высчитываются от размера шрифта родительского элемента. Если у родителя он установлен по умолчанию, то можно вспомнить про 16 пикселей и принять их за 100%.

P { font-size: 120%; }

• Пункты (pt). Тоже используются очень часто. Более того, когда вы выбираете число, выставляя размер шрифта в текстовых редакторах (Word, Блокнот, Notepad и т. д.), то также используете пункты.

P { font-size: 15pt; }

• Относительная высота шрифта (em ). Высота шрифта родителя принимается за единицу, и относительно него устанавливается высота шрифта текущего элемента.

P { font-size: 1.2em; }

• Константы . Считается, что значения xx-small , x-small , small , medium , large , x-large , xx-large (от меньшего к большему) задают абсолютный размер шрифта, хотя на самом деле при их использовании размер всё равно будет зависеть от настроек операционной системы и браузера. Есть также и относительные константы: smaller (меньший) и larger (больший), которые уменьшают или увеличивают шрифт относительно элемента-родителя.

P { font-size: x-large; }

• Другие единицы измерения. Для установки шрифта можно использовать всё, что доступно в CSS: миллиметры (mm ), сантиметры (cm ), дюймы (in ), пики (pc, 1 pc = 12 pt ), размер символа x (ex ).

P { font-size: 1.5pc; }

font-variant

Предлагает два значения:

• small-caps . Строчные буквы меняются на прописные малого размера.
• normal . Обычный текст.

Чтобы понять, разницу лучше один раз увидеть:

H1 { font-variant: small-caps; } h2 { font-variant: normal; }

font-weight

Влияет на насыщенность (жирность) шрифта. Значения могут быть такими:

• Числа от 100 до 900 с шагом в сотню. С их помощью можно задать жирность точнее всего. Насыщенность нормального шрифта, который вы обычно видите на страницах, равна значению 400, полужирного - 700. Проблема в том, что многие браузеры не поддерживают весь этот ассортимент, и поэтому использование числовых значений часто бывает бессмысленным.
• normal . Обычный шрифт.
• bold . Устанавливает полужирное начертание.

Div { font-weight: bold; }

• bolder и lighter. Делает шрифт соответственно жирнее или тоньше шрифта текста родителя.

color

Определяет цвет шрифта. Может задаваться следующими способами

• По названию. Используются зарезервированные слова, обозначающие имена цветов (например, blue - синий, yellow - жёлтый). Самый простой, но вместе с тем и самый ограниченный метод, потому что поддерживает только 140 цветов, хотя обычно и их хватает.

P { color: red; }

• По шестнадцатеричному коду (HEX). Шестнадцатеричная система счисления включает в себя 16 цифр, последние шесть из которых обозначаются буквами латинского алфавита от A до F, причём десятичное число 255 в этой системе записывается как FF. Как известно, все цвета создаются путём смешивания всего трёх: красного, зелёного и синего. Степень присутствия каждого из них и задаётся числами от 0 до 255, записанными в шестнадцатеричной системе. Перед числом ставится символ «решётка (# ). Белый цвет - #000000 , чёрный - #ffffff .

Пример ниже задаёт абзацу серый цвет:

P { color: #808080; }

• В системе RGB. Всё те же красный, зелёный и синий (red, green, blue), но задающиеся уже числами от 0 до 255 через запятую. Присутствие каждого из трёх цветов можно обозначать и в процентах. Тогда 100% будет соответствовать числу 255.

A {color: rgb(0,128,201);}

• RGBA. Всё, как в RGB, только в конце прибавляется ещё одно число от 0 до 1 - альфа-канал, задающий тексту прозрачность.

A {color: rgba(0,128,201,0.5);}

• HSL. Значение в этом формате задаётся тремя параметрами через запятую.

1. H (hue - оттенок). Определяется в градусах от 0 до 359° в зависимости от цвета на цветовом круге (рисунок ниже).

2. S (Saturate - оттенок). Указывается в процентах. Понятно, что от 0 до 100%, и понятно, что чем больше процент, тем насыщеннее цвет.

3. L (lightness - яркость). Так же, как и насыщенность, устанавливается в процентах.

A {color: hsl(0,100%,100%);}

• HSLA. То же, что и HSL, но с добавлением альфа-канала (как RGBA).

A {color: hsla(0,100%,100%,0.7);}

font

Позволяет объединить все свойства шрифта в одной строке и может тем самым сильно сократить код. Имеет следующую структуру:

Font: font-style font-variant font-weight font-size/line-height font-family

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

Вот пример:

Div {font: oblique small-caps 12pt/1.2 Arial, sans-serif;}

Позволяет выделить текст курсивным, наклонным начертанием или наоборот придать тексту стандартный вид. Данное свойство имеет всего три значения:

• normal - стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
• italic - курсивное начертание
• oblique - наклонное начертание

Абзац со значением normal.

Абзац со значением italic.

Абзац со значением oblique.

Курсивные шрифты традиционно были стилизованными версиями шрифта, основанными на каллиграфии, в то время как наклонное начертание создавалось простым добавлением небольшого наклона символам. Большинство шрифтов не содержат набор курсивных символов, поэтому браузер зачастую использует алгоритм наклона для символов текста. Это означает, что во многих случаях вы не увидите разницы между значениями italic и oblique.

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

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

Для изменения размера шрифта используется свойство font-size . Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

Body { font-size: 14px; }

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% - 32px. Если вы определите правило, задающее всему тексту внутри элемента значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

Body { font-size: 100%; }

EM

Единица измерения em позволяет изменить размер шрифта относительно размера шрифта в родительском элементе. Посколько по умолчанию размер шрифта в браузерах составляет 16px, то можно использовать правила, аналогичные тем, которые используются для значений в процентах.

Body { font-size: 14px; } h2 { font-size: 1.2em; }

В примере мы задали элементу размер шрифта 14px, а для всех элементов

- 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков

будет составлять 1,2 размера шрифта элемента , что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

Ключевые слова

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

P { font-size: small; }

Среднее значение medium - размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

Изменение размера с помощью процентов.

Изменение размера с помощью пикселей.

Изменение размера с помощью ключевого слова x-small.

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

font-family

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

Значение:

• имя семейства - семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки.
• имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospce.

font-style

Определяет начертания шрифта, такие как курсив или наклонное.

Значение:

• italic - курсив.
• oblique - наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив.
• inherit - применяется значение родительского элемента.

font-variant

Определяет, будет ли шрифт выведен в виде малых прописных букв.

Значение:

• normal - обычное начертание (по умолчанию).
• small-caps - выводит шрифт в виде малых прописных букв.
• inherit - применяется значение родительского элемента.

font-weight

cвойства шрифта font css

Определяет толщину выводимого шрифта.

Значение:

• normal - обычное начертание (по умолчанию).
• bold - полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании.
• bolder - жирный шрифт.
• lighter - светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид.
• 100-900 - число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder.
• inherit - применяется значение родительского элемента.

font-stretch

Определяет толщину шрифта.

Значение:

• normal - обычная ширина (по умолчанию)
• wider- увеличение текущей ширины.
• narrower - уменьшает текущую ширину на единицу.
• ultra-condensed - наименьшее значение ширины.
• extra-condensed - значение большее, чем предыдущее
• condensed - значение большее, чем предыдущее.
• semi-condensed - значение большее, чем предыдущее.
• semi-expanded - значение большее, чем при обычной толщине.
• expanded - значение большее, чем предыдущее.
• extra-expanded - значение большее, чем предыдущее.
• ultra-expanded - максимальное значение ширины.
• inherit - применяется значение родительского элемента.

font-size

Определяет кегель (высоту символов) шрифта.

Значение:

• абсолютный размер - для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое).
• относительный размер - для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше),
• любое соответствующая стандарту высота - абсолютный размер шрифта. Отрицательное значение не допускается.
• любое соответствующее стандарту процентное значение.
• inherit - применяется значение родительского элемента.

cвойства шрифта font css

font-size-adjust

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

Значение:

• none - по умолчанию.
• любое соответствующее стандартам значение - число, представляющее соотношение высоты и ширины символов.
• inherit - применяется значение родительского элемента.

font

Удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию.

Значение:

• font-style - начертание.
• font-variant - значение, определяющее вывод шрифта в виде малых прописных букв.
• font-weight- толщина.
• font-size - кегль.
• line-height - интерлиньяж.
• font-family - семейство шрифтов.
• inherit - применяется значение родительского элемента.

cвойства шрифта font css

Внедрения индивидуальных шрифтов.

До появления Internet Explorer 4.0 Web-мастер должен были использовать встроенные шрифты в браузер или использовать шрифты, доступные в системе. CSS представляет WEB-мастеру возможность указания отображаемых шрифтов, которые загружаются вмести с Web-страницей, что гарантирует правильную обработку страницы. Загружаемый шрифт определяется с помощью новых элементов в синтаксис CSS. Ниже приведен синтаксис для определения загружаемого шрифта в CSS:

@font-face {font-family: fontName ; src: url(failMame.eot) }

значение fontName, на которое впоследствии ссылается свойство CSS font-family, определяется пользователем. Ниже приведен полный пример:

Текст отображается с использованием загружаемого шрифта

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

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

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

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

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

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

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

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

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

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

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

Названия шрифтов, не содержащие пробелов в семействе Font-family, в кавычки заключать не обязательно:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Line-height: 1.5;

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

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

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

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

Ну и последнее из рассмотренных сегодня свойств таблиц каскадных стилей — font-variant, которое очень редко используется при .

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

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

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

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

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

Т.е. писать нужно будет примерно так:

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

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

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

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

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

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

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

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

Font: 10px arial, sans-serif;

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

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

посмотреть еще ролики можно перейдя на

Вам может быть интересно

CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Единицы размеров (пиксели, Em и Ex) и наследование правил в CSS