Title of the document

CSS font-size Property

The font-size property defines the font size of the text.

Font size can be defined by the following ways:

Absolute font size includes the following values:

Relative font size includes the following values:

Lengths can be relative lengths (em, ex, px) and absolute lengths (in, cm, mm, pt, pc). Percentages specify an absolute font size relative to the font size of the parent element.

Initial Value	medium
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	Yes.
Version	CSS1
DOM Syntax	object.style.fontSize = «15px»;

Syntax

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

Example of the font-size property:

html> html> head> title>Title of the document title> style> h1 < font-size: 24pt; > h3 < font-size: 26px; > p < font-size: 1em; > a < font-size: 100%; > span < font-size: x-small; > style> head> body> span>This span is written with x-small value. span> p>This paragraph is written with 1em font-size. p> a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size. a> h3>We used x-small font size for this heading. h3> h1>We set the font size 24pt for this heading. h1> body> html>

Result

Usage of percentage values

Percentage values are relative to the font-size of the parent element. The code below shows its usage:

Example of the font-size property specified in percentage:

html> html>    body> h3>We used x-small font size for this heading.h3> span>This span is written with x-small value.span> p>This paragraph is written with 1em font-size.p> body> html>

Usage of the em unit

The em unit is considered to be a relative unit. It is based on the calculated value of its parent element’s font size. In the code below, the paragraph will be 32px, because 2×16=32, and the heading will have a font-size of 48px because 3×16=48px. This method is very useful because we can be sure that all the child elements will always be relative to each other.

Example of the font-size property with the «em» value:

html> html> head> title>Title of the document title> style> .container < font-size: 16px; > p < font-size: 2em; > h2 < font-size: 3em; > style> head> body> div class="container"> h2>Here is the heading h2> p>Here is the text. p> div> body> html>

Usage of the rem unit

In the case of using the rem unit, the font-size depends on the value of the HTML element. In the example below, the rem unit is inherited from the HTML element, that’s why it is equal to 24px. So, the heading will have a font-size of 24px, because 1.5×16=24px.

Example of the font-size property with the «rem» value:

html> html> head> title>Title of the document title> style> html < font-size: 16px; > h2 < font-size: 1.5rem; > style> head> body> div class="container"> h2>Here is the heading h2> p>Here is the text. p> div> body> html>

Usage of the ex unit

In the case of the ex unit, 1ex is equal to the calculated height of the HTML element’s letter x. In the code example below, the HTML element is 15px. The x-height of that particular font will determine all the other font-sizes.

Usage of viewport units

Viewport units (vw and vh) are used for setting the font-size of an element, which is relative to the size of the viewport.

Example of the font-size property with the «length» value:

html> html> head> title>Title of the document title> style> span < color: green; font-size: 2vh; > p < color: red; font-size: 1em; > .length < color: orange; font-size: 30px; > h3 < color: lightblue; font-size: 3ex; > h1 < color: purple; font-size: 24pt; > a < color: blue; font-size: 120%; > style> head> body> h2>Font-size property h2> span>This text is written with 2vh font-size. span> p>This paragraph is written with 1em font-size. p> div class="length">Example with 30px font-size length div> h3>Example with 3ex font-size length. h3> h1>We set the font size 24pt for this heading. h1> a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size. a> body> html>

Example of the font-size property with the absolute-size values:

html> html> head> title>Title of the document title> style> .font-xxsmall < color: grey; font-size: xx-small; > .font-xsmall < color: grey; font-size: x-small; > .font-small < color: grey; font-size: small; > .fontSize-medium < color: grey; font-size: medium; > .font-large < color: grey; font-size: large; > .font-xlarge < color: grey; font-size: x-large; > .font-xxlarge < color: grey; font-size: xx-large; > style> head> body> h1>Font-size property h1> div class="font-xxsmall">Example with font-size xx-small property div> div class="font-xsmall">Example with font-size x-small property div> div class="font-small">Example with font-size small property div> div class="font-medium">Example with font-size medium property div> div class="font-large">Example with font-size large property div> div class="font-xlarge">Example with font-size x-large property div> div class="font-xxlarge">Example with font-size xx-large property div> body> html>

Example of the font-size property with «smaller» and «larger» values:

html> html> head> title>Title of the document title> style> .smaller < color: red; font-size: smaller; > .larger < color: red; font-size: larger; > style> head> body> h1>font-size property h1> div class="smaller">Example with font-size smaller property div> div class="larger">Example with font-size larger property div> body> html>

Values

Value	Description	Play it
medium	Sets the font-size to medium. This is the default value of this property.	Play it »
xx-small	Sets the font-size to xx-small.	Play it »
x-small	Sets the font-size to x-small.	Play it »
small	Sets the font-size to small.	Play it »
large	Sets the font-size to large.	Play it »
x-large	Sets the font-size to x-large.	Play it »
xx-large	Sets the font-size to xx-large.	Play it »
smaller	Smallers the font-size.	Play it »
larger	Largers the font-size.	Play it »
length	Specifies the font-size by px, em etc.	Play it »
%	Sets the font-size to a percent of the parent element’s font size.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.

Browser support

Источник

Пост писался для Яндекса в основном,всего их 5 серий.
Но там много полезного и для Ли.ру,и потому решила выбрать
у автора,что здесь будет полезно и показать вам!Все 5 серий
полезны как для начинающих,так и для опытных пользователей.
Сегодня 1 серия о самых простых тегах.Еще раз спасибо Проксима.

Заголовки
Для
оформления заголовков используются теги .
С этим думаю всем понятно,это не сложно.Далее
Гарнитура (вид) и цвет шрифта

Здесь есть два способа. Второй будет описан позднее. Первый — используется тег

с атрибутами face и color, соответственно:

шрифт Verdana

шрифт Verdana

красный шрифт

красный шрифт

шрифт цвета MidnightBlue

шрифт цвета MidnightBlue

шрифт цвета MidnightBlue

шрифт цвета MidnightBlue

Цвет имеет название и цифровое значение, как видно в этом примере
(MidnightBlue=#191970). О цветах можно написать очень много, но я
остановлюсь на одной ссылке:

Подбор цвета. Для использования подходят web-safe и web-smart цвета.

Форматирование текста: использование тега и атрибута style (1)

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

и . Однако тег

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

Запись
текст лишена какого-либо смысла сама по себе.
Тег предназначен для того, чтобы приписать тексту
какое-либо свойство. Вот их-то я сейчас попытаюсь перечислить в
более-менее логическом порядке.

Цвет шрифта

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

красный шрифт — красный шрифт

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

Гарнитура (вид) шрифта

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

Сейчас рассмотрим второй способ — с использованием конструкции

шрифт

На место ***
необходимо подставить гарнитуру (вид) шрифта. Как правило, подставляют
название не определённого шрифта, а целого семейства шрифтов, например, Verdana, Times и др. Получаем:

шрифт Verdana шрифт Times

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

Для указания размера шрифта используется конструкция

шрифт

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

xx-large, x-large, large, medium, small, x-small, xx-small.

Результат:

очень-очень крупный шрифт
очень крупный шрифт
крупный шрифт
средний шрифт
мелкий шрифт
очень мелкий шрифт
очень-очень мелкий шрифт

Можно указывать размер шрифта способом, хорошо знакомым из Word — в пунктах (pt). 1 пункт равен 1⁄72 дюйма. Примеры:

12pt

36pt

Значения 12pt, 36pt в этих примерах подставляются на место *** в общей формуле шрифт. Также можно использовать и пиксели:

шрифт 12px
шрифт 36px

Приведённые выше размеры являются абсолютными. Но размер шрифта можно задать и относительным образом — в процентах:
шрифт размера 150% от исходного

шрифт размера 150% от исходного

или по отношению к ширине буквы «m» в исходном шрифте (соответствующая единица измерения называется em):
шрифт размера 1,5em от исходного

шрифт размера 1,5em от исходного

Вес (насыщенность) шрифта

Это — то, что можно задать с использованием простого тега
жирный текст

жирный текст

С помощью это делается так: жирный шрифт

жирный шрифт

Преимущество такого способа в том, что наряду со значением веса шрифта bold можно использовать также значения bolder и lighter, получая шрифт «разной жирности» (в данном случае речь идёт об относительных значениях). А по умолчанию используется значение normal — обычный шрифт.

Стиль шрифта

Kурсив можно получить как с использованием тега , так и следующим способом:
курсив

курсив

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

Капитель

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

капитель< /span>

А вот — пример использования нескольких свойств сразу:

наш шрифт

наш шрифт

Оригинал записи и комментарии на LiveInternet.ru

Источник

Меняем размер текста CSS-стилями

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

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

Навигация по статье:

Как изменить размер текста CSS-стилями

Для изменения параметров в таблице стилей css существует специализированное свойство font-size, используя которое можно задать размер текста css-стилями в любых, удобных для вас единицах измерения. При этом можно использовать абсолютные и относительные единицу измерения.

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

К таким единицам измерения относятся:

Кроме этого можно использовать ключевые слова:

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

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

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

Также расчёт размера шрифта может осуществляться относительно ширины или высоты области просмотра.

Для этого можно воспользоваться такими единицами измерения как:

• 1vw – 1% от ширины области просмотра
• 1vh – 1% от высоты области просмотра
• 1vmin — 1% от меньшей стороны окна браузера
• 1vmax — 1% от большей стороны окна браузера

Кроме того, так же можно указать размер шрифта CSS ключевым словом в относительном выражении: larger, smaller.

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

При использовании smaller – шрифт будет меньше чем родительском блоке.

Как изменить размер текста в HTML

Если вам нужно выделить одно слово или фрагмент текста, то, конечно же, это проще всего сделать в html-коде, используя атрибут style.

Вот так это будет выглядеть на примере:

Источник