Программы
Музыка
Игры
Заработок и Раскрутка
GPS навигация
» » Об использовании свойства FONT в CSS
Информация к новости
  • Просмотров: 278
  • Автор: hazardcd
  • Дата: 19-12-2016, 12:46
  • Не нравится
  • 0
  • Нравится
19-12-2016, 12:46

Об использовании свойства FONT в CSS

Категория: Вебмастер / Оптимизация сайтов / Статьи

До боли привычный элемент <font> представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Но как и всё в этом мире стареет, так и его время прошло. Код, в котором он используется, не проходит валидацию, а во всех справочниках рекомендуют пользоваться аналогами в CSS. Здесь мы рассмотрим как официальные рекомендации по использованию элемента, так и практические методы.

Итак, вот стандартный синтаксис использования свойства font в CSS:

font: [font-style||font-variant||font-weight||font-stretch] font-size [/line-height] font-family

Обязательные значения свойства font - размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании.

 

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

caption - Шрифт для текста элементов форм вроде кнопок.
icon - Шрифт для текста под иконками.
menu - Шрифт применяемый в меню.
message-box - Шрифт для диалоговых окон.
small-caption - Шрифт для подписей к небольшим элементам управления.
status-bar - Шрифт для строки состояния окон.

Примеры:

p { font: 12pt/10pt sans-serif; }

Из типографики пошла запись указывать через слэш размер шрифта и высоту строки. Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — высоту строки. В качестве семейства указывается рубленый шрифт sans-serif.

p { font: bold italic 110% serif; }

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задаётся в процентах, а в качестве гарнитуры используется шрифт с засечками serif.

p { font: normal small-caps 12px/14px fantasy; }

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

font-style

Синтаксис:

font-style: normal | italic | oblique

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

italic - Курсивное начертание

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

font-variant

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

Синтаксис:

font-variant: normal | small-caps

normal - Оставляет регистр символов исходным, заданным по умолчанию

small-caps - Модифицирует все строчные символы как заглавные уменьшенного размера, как показано на рисунке

Это свойство никогда широко не использовалось.

font-weight

Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

Синтаксис:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

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

bold — жирное начертание

normal — нормальное начертание.

Допустимо использовать условные единицы от 100 до 900.

Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

Вот как числовые значения влияют на насыщенность шрифта:

100 — тонкое начертание;

200 — сверхсветлое;

300 — светлое;

400 — нормальное (аналогично normal);

500 — среднее;

600 — полужирное;

700 — жирное (аналогично bold);

800 — сверхжирное;

900 — тяжёлое.

Надо учитывать, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.

font-stretch

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

Синтаксис:

font-stretch:  ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

 Браузеры применяют свойство font-stretch не ко всем шрифтам, поэтому уплотнение или расширение текста может не работать с некоторыми популярными и распространёнными гарнитурами шрифтов.

Влияние разных значений font-stretch на вид букв в тексте показано на рисунке:

font-size

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант: xx-small, x-small, small, medium, large, x-large, xx-large, задаёт абсолютный размер. На самом деле они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

Об использовании свойства FONT в CSSДругой набор констант: larger и smaller, устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

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

Синтаксис:

font-size: <абсолютный размер> | <относительный размер> | <размер> | <проценты>

Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в таблице:

CSS xx-small x-small small medium large x-large xx-large Нет
HTML 1 Нет 2 3 4 5 6 7

Относительный размер шрифта задается значениями larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берётся размер шрифта родительского элемента. Отрицательные значения не допускаются.

Надо учитывать, что установка размера шрифта 16px не делает каждую букву высотой 16px. Фактический размер каждой буквы зависит от используемого font-family.

line-height

Для блочных элементов определяет минимальную высоту строки текста.

Для внедряемых строчных элементов, например <img>, свойство line-height не оказывает никакого эффекта. Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.

Синтаксис:

line-height: <множитель> | <размер> | <проценты> | normal

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и другие. Разрешается использовать процентную запись, в этом случае за 100% берётся высота шрифта. При значении normal расстояние между строк вычисляется автоматически.

font-family

Устанавливает семейство шрифта, которое будет использоваться для оформления текста. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

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

Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace.

Синтаксис:

font-family: <шрифт> [, <шрифт>[, ...]]

Универсальные семейства шрифтов:

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

Замена свойства FONT в HTML средствами CSS

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

Ранее мы бы сделали это таким образом:

<font color="#FFFFFF">текст</font> /*шрифт белого цвета*/
<font color="black">текст</font> /*шрифт черного цвета*/
<font size="1">текст</font> /*размер шрифта 1*/
<font size="2">текст</font> /*размер шрифта 2*/

Теперь реализуем те же самые параметры шрифта в CSS:

<style>
  .text_white {color:#FFFFFF;} /*шрифт белого цвета*/
  .text_black {color:black;} /*шрифт черного цвета*/
  .text_1 {font-size:xx-small;} /*размер шрифта 1*/
  .text_2 {font-size:small;} /*размер шрифта 2*/
<style>

Теперь заменим значения FONT с помощью атрибута SPAN:

<span class="text_white">текст</span> /*шрифт белого цвета*/
<span class="text_black">текст</span> /*шрифт черного цвета*/
<span class="text_1">текст</span> /*размер шрифта 1*/
<span class="text_2">текст</span> /*размер шрифта 2*/

Так мы добились валидности нашего кода.

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

<style>
  .mytext {color:#000000; font-size:xx-small;}
<style>

также используем для вывода тэг span:

<span class="mytext">текст</span>

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
HTML-cсылка:
BB-cсылка:
Прямая ссылка:

Добавление комментария

Имя:*
E-Mail:
Комментарий:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Подтвердите что вы не робот: *

^
 
Рейтинг сайтов HazardCD Studio Рейтинг@Mail.ru Push 2 Check Web100kz.com - каталог сайтов Траст. Анализ сайта hi-cd.ru Goon Каталог сайтов