Свойство font

Свойство font-size

Свойство font-size позволяет указывать размер текста CSS. Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em, rem и ex.

CSS

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

Значения длины (px, em, rem, ex и т. д.), используемые в свойстве font-size, не могут быть отрицательными.

Абсолютные ключи и значения

CSS

.element { font-size: small; } }

Свойство, которое устанавливает в CSS размер текста, принимает следующие ключевые слова:

  • xx-small;
  • x-small;
  • small;
  • medium;
  • large;
  • x-large;
  • xx-large.

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

Среди других абсолютных значений можно выделить mm (миллиметры), cm (сантиметры), in (дюймы), pt (пункты) и pc (пики). Один pt равен 1/72 дюйма, или одна пика равна 12 пунктам. Обычно эти единицы используются в печатных документах.

Относительные ключевые обозначения

CSS

.

element { font-size: larger; }

Например, если свойство font-size у родительского элемента имеет значение small, то у дочернего элемента с относительным значением larger размер текста HTML CSS будет больше.

Процентные обозначения

CSS

.

element { font-size: 110%; }

Процентные значения, как font-size со значением 110%, также являются относительными, и зависят от размера шрифта, указанного в родительском элементе. Предлагаем вам взглянуть на демо.

Единица измерения em

CSS

.

element { font-size: 2em; }

Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:

HTML:

Заголовок

Какой-нибудь текст

CSS:

.

container { font-size: 16px; } p { font-size: 1em; } h2 { font-size: 2em; }

В приведенном выше примере у абзаца будет установлено значение font-size 16px, так как 1 x 16 = 16px, а в качестве размера текста HTML CSS заголовка будет использоваться 32px, так как 2 x 16 = 32px. Есть некоторое преимущество в том, чтобы указывать размер, ориентируясь на родительский элемент. Так мы можем оборачивать элементы в контейнеры и быть уверенными в том, что все дочерние элементы всегда будут относительны друг другу:

Посмотреть демо

Единица измерения rem

Что касается единиц измерения rem, то здесь font-size всегда зависит от значения корневого элемента (или элемента html).

CSS

html { font-size: 16px; } p { font-size: 1.5rem; }

В приведенном выше примере rem равен 16px (так как это значение наследуется у html-элемента) и, следовательно, размер текста CSS для всех элементов paragraph будет составлять 24px (1.5 x 16 = 24). В отличие от em-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.

Эта единица измерения поддерживается следующими браузерами:

 Chrome  Safari Firefox  Opera IE  Android  iOS
 Работает  Работает  Работает   Работает  10+  Работает Работает

Единица измерения ex

CSS

.

element { font-size: 20ex; }

1ex равен высоте строчной буквы x в используемом шрифте. В примере, приведенном ниже, html-элемент установлен на 20px, а все остальные размеры определяются высотой x определенного шрифта.

Посмотреть демо

Поэкспериментируйте с приведенным выше демо, заменяя семейства шрифтов в html-элементе и таким образом изменяя размер текста CSS.

Единицы изменения viewport (окно просмотра)

CSS

.element-one { font-size: 100vh; } .element-two { font-size: 100vw; } .

Viewport-единицы, такие как vw и vh, позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:

  • 1vw = 1% от ширины окна просмотра;
  • 1vh = 1% от высоты окна просмотра.

То есть, если мы посмотрим на следующий пример:

CSS

.

element { font-size: 100vh; } }

то увидим, что размер текста CSS всегда должен находиться на отметке в 100% ширины окна просмотра (50vh будет означать 50%, 15vh — 15% и так далее). В приведенном ниже демо попробуйте изменить высоту, и посмотрите, как растягивается шрифт:

Посмотреть демо

vw-единицы отличаются тем, что позволяют указывать высоту символов, руководствуясь шириной окна просмотра. В приведенном ниже демо вам нужно будет изменить ширину окна браузера, чтобы увидеть изменения:

Посмотреть демо

Эти единицы измерения поддерживаются следующими браузерами:

 Chrome  Safari Firefox  Opera IE  Android  iOS
 31+   7+  31+   27+  9+  4.4+ 7.1+

В нашем распоряжении имеются еще две единицы измерения, основанные на размере окна просмотра. Первая позволяет вычислять значения vh и vw, и устанавливать свойству font-size минимальное значение, а vmax позволяет определить и установить, наоборот, максимальное значение.

Единица измерения ch

Единица измерения ch чем-то похожа на ex, и позволяет устанавливать размер текста CSS относительно нулевой ширины глифа:

Посмотреть демо

Эта единица измерения поддерживается следующими браузерами:

 Chrome  Safari Firefox  Opera IE  Android  iOS
 27+  Работает  10+  Работает 9+   Работает  Работает

Перевод статьи “Font-size” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: https://www.internet-technologies.ru/articles/svoystvo-font-size.html

Font-family, font-size, color и другие свойства css для задания параметров шрифта

Здравствуйте, уважаемые читатели блога webcodius.ru. В сегодняшней статье речь пойдет о свойствах каскадных таблиц стилей, которые отвечают за параметры шрифта элементов web-страниц. Рассмотрим способы их использования и посмотрим как они работают. Если вы впервые слышите о понятии стилевое оформление страницы и ничего не знаете о CSS, то советую вам начать со статьи «что такое css».

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

Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:

font-family:<\p>

Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:

p { font-family: Arial, Verdana, 'Times New Roman', san-serif; }

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

Обратите внимание

Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи — Times New Roman, и так далее.

Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов, представляющего целые наборы аналогичных шрифтов.

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

  • serif — шрифты с засечками;
  • sans-serif -шрифты без засечек;
  • cursive — шрифты, имитирующие рукописный текст;
  • fantasy — декоративные шрифты;
  • monospace — моноширинные шрифты.

Кроме имен шрифтов, свойству font-family можно задать особое значение inherit, которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.

Font-size — задаем размер шрифта с помощью CSS

 Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:

font-size: |xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit

Давайте теперь рассмотрим подробнее способы применения данного свойства.

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

  • px — пиксели;
  • pt — пункты;
  • in — дюймы;
  • cm — сантиметры;
  • mm — миллиметры;
  • pc — пики.

Обозначение единицы измерения указывают после самого значения. Например:

p { font-size: 10px; }
strong { font-size: 12pt; }

При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.

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

  • em — размер буквы «m» текущего шрифта;
  • ex — размер буквы «x» текущего шрифта;
  • % — проценты от размера шрифта родительского элемента.

Например:

h1 { font-size: 3em; }
em { font-size: 150%; }

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

Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:

Ну, и последний способ это использование значений «larger» и «smaller», которые позволяют увеличивать и уменьшать размер шрифта относительно унаследованного. Например, если для родительского элемента определен шрифт размера small, то значение larger установит для текущего элемента размер шрифта medium.

Свойство color — задаем цвет текста

Атрибут стиля color задает цвет текста. Синтаксис:

color: цвет

Цвет можно задать с помощью RGB-кода, который записывается в формате:

#

Все доли записываются в формате шестнадцатеричных чисел от 00 до FF. Например, чтобы все заголовки h2 на странице выводились красным цветом, необходимо написать такой код CSS:

h2 { color: #ff0000; }

Также возможно задавать цвет с помощью имен. Красный цвет будет red, черный — black, белый — white. Например:

h2 { color: red; }

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

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

В качестве значения свойства может  использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000.

Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold.

Причем значения bolder и lighter не работают.

Пример использования:

em { font-weight: bold; }

Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.

С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание:

text-decoration: none|underline|overline|line-through|blink

Для этого атрибута доступны пять значений:

  • none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
  • underline — устанавливает подчеркнутые текст;
  • overline — «надчеркивает» текст, то есть проводит линию над текстом;
  • line-through — зачеркивает текст;
  • blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

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

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

Читайте также:  Что такое http. коды ответов http сервера

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Важно

Свойство стиля text-transform позволяет задавать регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none

Свойство может иметь одно из четырех значений:

  • capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
  • uppercase — текст в верхнем регистре;
  • lowercase — текст в нижнем регистре;
  • none — не меняет регистр символов.

 Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height.

В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.).

В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

p { line-height: 1.5 }

Для управления расстоянием между символами текста существует свойство letter-spacing.

Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др.

Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

em { letter-spacing: 5px; }

Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

h1 { word-spacing: 5px }

Совет

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

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

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

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

p { font: 10pt «Times New Roman» }

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

p { font: italic 12px sans-serif }

На этом рассказывать о свойствах CSS отвечающих за отображение текста

Источник: http://webcodius.ru/spravochnik-css/font-family-color-svoistva-css-dlya-shriftov.html

Свойства шрифта

это курсив

а это наклонный текст

И чем спрашивается, они отличаются?

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

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

Значения:

  • normal — нормальный (по умолчанию)
  • small-caps — все буквы заглавные и уменьшенные

Пример:

Купи слона!!

Свойство CSS font-size — определяет размер шрифта.

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

значения абсолютного размера шрифта:

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

значения относительного размера шрифта:

  • larger — больше чем размер шрифта родительского элемента
  • smaller — меньше чем размер шрифта родительского элемента

Пример:

Размер шрифта родительского элемента (блока DIV) равен 18 пикселям

Этот шрифт будет крупнее относительно элемента родителя

А этот шрифт будет мельче относительно элемента родителя

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

xx-small — очень очень маленький

x-small — очень маленький<\p>

small — маленький<\p>

medium — средний

large — большой

x-large — очень большой

xx-large — очень очень большой

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

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

А также выражается в условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300… 900) где значение 100 тонкий шрифт, а 900 — сверх жирный.

Пример:

жирный шрифт

тонкий шрифт

жирность шрифта равна 600

Атрибут CSS font-family — указывает одно, два или три имени шрифта из библиотеки шрифтов.

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

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

Обратите внимание

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

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

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

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

Пример:

Купи слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Вы наверняка обратили внимание на тот факт, что все свойства CSS предназначенные для работы со шрифтом начинаются с английского слова font (собственно шрифт).. font-family, font-size и т.д..

Так вот это неспроста.. дело в том, что все эти свойства являются «дочерними» базового атрибута CSS font в довершении главы о нем собственно и пойдёт речь.

Речь будет недолгой.. )) Итак font — (шрифт), являясь базовым атрибутом, может определять одновременно сразу несколько параметров шрифта принимая те или иные значения от следующих атрибутов:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

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

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

Все это можно осуществить, написав следующие:

span{ font-style: italic; font-weight: bolder; font-size: 20px; font-family: Arial

}

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

Вот так:

span{font: italic bold 20px Arial}

Мы просто перечислили нужные нам параметры «марки» font. Согласитесь, по-моему, так писать гораздо проще, к тому же код становится более компактным и лёгким для чтения как браузером, так и человеком.

Пример:

Этот текст написан курсивом, он жирный, имеет размер 20 пикселей и использует шрифт Arial

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

Источник: http://www.webremeslo.ru/css/glava3.html

Справочник по CSS

Атрибут font | Свойство font

Задает свойства шрифта объекта. Или устанавливает от одного до шести предпочитаемых пользователем шрифтов.

Синтаксис

HTML { font : sFont }
Скрипты [ sFont = ] object.style.font

Используемые значения

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

font-style Одно из диапазона значений, доступных для свойства fontStyle.
font-variant Одно из диапазона значений, доступных для свойства fontVariant.
font-weight Одно из диапазона значений, доступных для свойства fontWeight.
font-size Одно из диапазона значений, доступных для свойства fontSize. Когда это значение выражено целым числом и следует перед знаком проценты (%), то значение выражено в процентах от размера родительского шрифта объекта.
line-height Одно из диапазона значений, доступных для свойства lineHeight. Когда используется вместе со свойством font, то атрибут должен включать знак косой черты (/) перед значением. Процентное значение свойства высчитывается от размера шрифта самого объекта, а не его родителя.
font-family Одно из диапазона значений, доступных для свойства fontFamily. Это свойство может использоваться для установки нескольких значений, разделенных между собой запятой. Значение по умолчанию зависит от пользовательских настроек.
caption Предпочитаемый пользователем шрифт, используемый в объектах, имеющих заголовок, название и т.п.
icon Предпочитаемый пользователем шрифт, используемый в названиях иконок.
menu Предпочитаемый пользователем шрифт, используемый в меню.
message-box Предпочитаемый пользователем шрифт, используемый в диалоговых окнах.
small-caption Предпочитаемый пользователем шрифт, используемый для небольших элементов управления.
status-bar Предпочитаемый пользователем шрифт, используемый для строки состояния.

Значение по умолчанию — шрифт «Times New Roman» с параметрами normal normal normal medium normal. Атрибут Каскадных таблиц стилей (CSS) наследуется.

Данные выражения могут использоваться в Internet Explorer, начиная с версии IE5.

Замечания

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

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

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

При использовании Internet Explorer 6, когда вы используете объявление !DOCTYPE для указания стандартного совместимого режима, на свойство накладываются следующие условия:

1. Должны быть объявлены значения font-size и font-family. Если их не объвить или объявить неправильно, то свойство font проигнорируется.
2. Все заданные значения должны указываться в правильном порядке. Иначе, свойство font проигнорируется.
Читайте также:  Как увеличивать изображения (все способы)

При определении предпочитаемых пользователем параметром caption, icon, menu, message-box, small-caption или status-bar для этого свойства, вы не должны устанавливать какие-либо другие значения для свойства font того же элемента. Так как, если вы это сделаете, то результат задания тех других свойств будет виден, но предпочитаемые пользователем свойства будут игнорироваться.

Примеры

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

В первом примере используются таблицы стилей для задания атрибутов шрифта.

 :

Во втором примере используется скрипт для задания атрибутов шрифта.

 :

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 1 (CSS1)

Поддерживаемые браузеры

Internet Explorer 5.5, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.2, 9.5

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms530756(VS.85).aspx

http://developer.mozilla.org/en/CSS/font

Источник: http://ww.abcd.bz/font.htm

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

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

Код, в котором он используется, не проходит валидацию, а во всех справочниках рекомендуют пользоваться аналогами в 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, задаёт абсолютный размер. На самом деле они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

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

Совет

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

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

Синтаксис:

font-size: | | |

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

CSSxx-smallx-smallsmallmediumlargex-largexx-largeНетHTML1Нет234567

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

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

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

line-height

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

Для внедряемых строчных элементов, например , свойство 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.

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

текст /*шрифт белого цвета*/ текст /*шрифт черного цвета*/ текст /*размер шрифта 1*/ текст /*размер шрифта 2*/

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

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

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

текст /*шрифт белого цвета*/ текст /*шрифт черного цвета*/ текст /*размер шрифта 1*/ текст /*размер шрифта 2*/

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

Обратите внимание

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

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

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

текст

Источник: https://hi-cd.ru/webmaster/793-ob-ispolzovanii-svoystva-font-v-css.html

Свойство font-weight в CSS

При помощи CSS свойства font-weight можно добавить жирности тексту (шрифту), не используя при этом теги и . Данное CSS свойство можно использовать для текста и в программе WYSIWYG Web Builder.

Пример свойства font-weight с значением: bold;

жирный шрифт

Вышеуказанном примере данное свойство было применено через class=»bold_txt», где и было прописано свойство font-weight: bold; (параметр bold — это эквивалент стандартному полужирному тексту с значением: 700).

Возможные значения для font-weight:

normal — обычный вариант текстаbold — стандартный полужирный текстinherit — текст наследует параметры (свойства) родительского элементаlighter — убавляет жирность текста относительно насыщенности родителя

bolder — прибавляет жирность тексту относительно насыщенности родителя

Числовые значения для font-weight:

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900Толщина шрифта равная 700 — это эквивалент значения: bold

Толщина шрифта равная 400 — это эквивалент значения: normal

Пример с числовым значением:

текст с значением: 900

В программе WYSIWYG Web Builder css свойство: font-weight для текста, можно задать двумя способами. В первом способе через вкладку CSS3 (для всего текста), а вторым способом через Менеджер Стилей (для фрагмента текста).

Пример для всего блока с текстом:

шрифт текста с значение: 600

Для всего текста (первый способ):

Свойства текста (объекта) — CSS3 анимацияв разделе — Переходы — нажать — ДобавитьТриггер: (default)Длительность: 0Свойство: font-weight

Значение: bold (или ваше)

Добавить жирности шрифту для всего блока с текстом лучше в HTML-исходнике этого текста, во вкладке — Особый стиль — прописать: font-weight: bold; (или ваше значение), а CSS3 параметры используйте для анимации.

Читайте также:  Обзор криптобиржи yobit

Первый способ (для всего текста) можно применять, например, когда вам нужно сделать подзаголовок или необходимо по дизайну веб-страницы выделить весь текст жирным шрифтом в блоке, без использования тегов strong и b.

Пример для части текста в div блоке:

обычный текст шрифт с значением bold обычный текст

Для фрагмента текста (второй способ):

Главное меню — Инструменты — Менеджер стилей — ДобавитьИмя стиля: придумайте имя, обязательно на латиницев разделе — Шрифт —Имя шрифта: Arial (выберите шрифт тексту)Размер шрифта: 12 (выберите размер тексту)Цвет текста: #000000 (выберите цвет для текста)Внизу, где кнопки, нажмите — ДополнительноПропишите между скобок: font-weight: bold;Не удаляйте остальные строки кодаДалее выберите блок с текстом и выделите нужный фрагмент

Нажмите правую кнопку мыши — Стиль — выберите ваш стиль

Во втором варианте для жирности текста в свойстве font-weight можно прописать только значения: bold или normal, но в созданном стиле можно изменить: размер, шрифт, цвет и т. д., тем самым подобрать нужный вариант для текста.

Источник: http://dlod.ru/svojstvo-font-weight-v-css

Оформление шрифтов в CSS

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

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

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

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

font-size

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

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

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

  • Проценты (%). Высчитываются от размера шрифта родительского элемента. Если у родителя он установлен по умолчанию, то можно вспомнить про 16 пикселей и принять их за 100%.
  • Пункты (pt). Тоже используются очень часто. Более того, когда вы выбираете число, выставляя размер шрифта в текстовых редакторах (Word, Блокнот, Notepad и т. д.), то также используете пункты.
  • Относительная высота шрифта (em). Высота шрифта родителя принимается за единицу, и относительно него устанавливается высота шрифта текущего элемента.
  • Константы. Считается, что значения 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).

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

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

  • В системе 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;}

Источник: https://www.seostop.ru/sozdanie-saita/html-css/stili-shriftov.html

Свойство font

Для задания шрифта можно использовать также интегральное свойство font, значение которого описывает всœе свойства шрифта. Значения свойств шрифтов должны идти в описании в следующем порядке:

font-style font-variant font-weight

font-size/line-height font-family

При задании значений свойств шрифта бывают опущены первые три значения, а также символ «/» и значение свойства line-height (высоты строки) (см. 4.3.14.7).

Вместо указанной выше последовательно бывают заданы следующие значения свойства font:

· caption – шрифт, используемый для заголовков элементов управления (кнопок, выпадающих меню и т.д.);

· icon – шрифт, используемый для обозначения пиктограмм;

· menu – шрифт, используемый в меню (к примеру, в выпадающих меню и списках меню);

· message-box – шрифт, используемый в диалоговых окнах;

· small-caption – шрифт, используемый для обозначения небольших элементов управления;

· status-bar – шрифт, используемый в панелях, описывающих статус окон.

Пример 4.3.41. Задание свойства font:

Важно

1. font: normal normal bold 14pt/24pt Arial, sans-serif – вывод текста шрифтом со значением свойства font-style, равным normal, со значением свойства font-variant, равным normal, со значением свойства font-weight, равным bold, со значением свойства font-size, равным 16 пунктам, со значением свойства line-height, равным 24 пунктам семейств Arial или sans-serif.

2. font: italic normal bold 12pt Verdana – вывод текста шрифтом со значением свойства font-style, равным italic, со значением свойства font-variant, равным normal, со значением свойства font-weight, равным bold, со значением свойства font-size, равным 12 пунктам семейства Verdana.

3. font: 12 pt monospace – вывод текста размером 12 пунктов моноширинным шрифтом.

4. font: caption – вывод текста шрифтом, используемым для заголовков элементов управления.

Вывод Web-страницы для этих примеров будет иметь следующий вид:

Читайте также

  • — Свойство автомобиля при движении на повороте

    Лекция 9 Управляемость автомобилем Под управляемостью автомобиля понимается его способность точно сохранять заданное направление движения, а при соответствующем воздействии изменять его по требуемой траектории. Первое свойство называется курсовой устойчивостью,… [читать подробнее].

  • — Эргодическое свойство марковского случайного процесса.

    Существуют марковские случайные процессы, обладающие эргодическим свойством, которое состоит в том, что по истечении достаточно продолжительного промежутка времени (теоретически при t ® ¥ ) вероятности состояний системы практически не зависят от того в каком состоянии… [читать подробнее].

  • — Лекция №4 Размножение, как свойство живых организмов. Гаметогенез.

      Размножение — это свойство воспроизведения себе подобных, обеспечивающие непрерывность и преемственность жизни. Различают два способа размножения: бесполый и половой. Бесполое размножение – различные формы размножения организмов, при которых новый организм… [читать подробнее].

  • — Изменчивость как свойство живого, ее формы. Фенотипическая (модификационная или ненаследственная) изменчивость. Генотипическая изменчивость

    Практическое занятие № 11 Задание для самостоятельной работы студентов Решение типовых и ситуационных задач Самостоятельная работа студентов под контролем преподавателя. Разбор с преподавателем узловых вопросов, необходимых… [читать подробнее].

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

    Таблица № 3 № п/п Нефть Вязкость мПа/с С низкой вязкостью < 1 Маловязкая 1 – 5 С повышенной вязкостью 5 – 25 Высоковязкая > 25 В пластовых условиях при температуре десятки градусов и давлении десятки мегапаскалей, когда в нефти… [читать подробнее].

  • — Целостность — признак и ценностное свойство государства

    Тема 26. Теория целостности государства Государство — это одна из разновидностей социальных сис­тем*, которому наряду с его известными и исследованными ранее признаками — публичная власть, территория, право и др. — свойственны и определенные системные признаки:… [читать подробнее].

  • — Понятие и признаки обеспечения исполнения обязательств. Свойство акцессорности

    Обеспечение исполнения обязательств Способы обеспечения исполнения обязательств – это правовой институт, предназначенный для того, чтобы предоставить кредитору дополнительные гарантии удовлетворения его интересов в рамках гражданско-правового обязательства. Это… [читать подробнее].

  • — АТРИБУТ (лат. attribuo — придаю, наделяю) — неотъемлемое свойство объекта, без которого он не может ни существовать, ни мыслиться

    АРХЕТИП (греч. arche — начало и typos — образ; первообраз, проформа) — понятие, восходящее к традиции платонизма и играющее главную роль в «аналитической психологии», разработанной Юнгом. АРХЕТИП(греч. arche — начало и typos — образ; первообраз, проформа) — понятие, восходящее к… [читать подробнее].

  • — Отражение как всеобщее свойство материи и его эволюция

      Споры о сущности сознания длятся уже много веков и не утихают по сей день. В идеализме сознание, идеальное истолковывается как первичная субстанция, будто бы стоящая над материальным миром и порождающая его. Для материалистов сознание — способность идеального… [читать подробнее].

  • — Отражение, одна из форм которого составляет сущностный признак сознания, характеризуется в марксистской философии как всеобщее свойство материи.

    С точки зрения диалектико-материалистической философии, материя находится вечном и непрерывном движении. Нет материи без движения и движения без материи. Движение есть способ существования материи. С точки зрения идеализма, сознание первично, а материальный… [читать подробнее].

  • Источник: http://referatwork.ru/category/tehnologii/view/480083_svoystvo_font

    Ссылка на основную публикацию