Css размер текста html: Размер текста | htmlbook.ru

Свойство font-size — размер шрифта CSS и не только

2021-01-30 0 ∞

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

CSS

p {
  font-size: 20px;
}

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

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

• Абсолютные ключи и значения
• Относительные ключевые обозначения
• Процентные обозначения
• Единица измерения em
• Единица измерения rem
• Единица измерения ex
• Единицы изменения viewport (окно просмотра)
• Единица измерения ch

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;
}

• larger;
• smaller.

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

CSS

. element {
  font-size: 110%;
}

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

CSS

.element {
  font-size: 2em;
}

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

HTML

<div>
  <h3>Заголовок</h3>
  <p>Какой-нибудь текст</p>
</div>

CSS

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

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

Что касается единиц измерения 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-единиц параграф будет игнорировать стилизацию всех родительских элементов, кроме корневого.

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

CSS

. element {
  font-size: 20ex;
}

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

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

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-единицы отличаются тем, что позволяют указывать высоту символов, руководствуясь шириной окна просмотра. В приведенном ниже демо вам нужно будет изменить ширину окна браузера, чтобы увидеть изменения:

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

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

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

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

Валентин Сейидовавтор-переводчик статьи «Font-size»

Стилевые параметры шрифта.

Параметр	Значение	Описание
font-family (определяет список семейств шрифтов) Шрифты	название шрифта	Обычно задаются несколько похожих шрифтов в порядке предпочтения. Названия разделяются запятыми. Если название шрифта состоит из нескольких слов, то оно заключается в кавычки. Список шрифтов желательно завершить родовым именем шрифта: serif (для Times), sans-serif (для Helvetica), cursive, fantasy, monospace (для Courier) <style> h2 {font-family: "Times New Roman", serif} </style> <body>
font-size (размер шрифта) Размер шрифта	относительный размер: larger (больше), smaller (меньше)	Значения интерпретируются относительно таблицы размеров шрифтов браузера и размера шрифта элемента-родителя. Например, если родительский элемент имеет размер шрифта » medium», значение » larger» сделает размер шрифта текущего элемента равным » large». Размер можно задавать в % и в em.
	абсолютный размер: xx-small, x-small, medium (по умолчанию), large, x-large, xx-large	<style> body {font-size: 12pt} h2 {font-size: large} h3 {font-size: 150%} h4 {font-size: 12pt} h5 {font-size: 75%} </style> <body> <h2>Заголовок 1</h2> <h3>Заголовок 2</h3> <h4>Заголовок 3</h4> <h5>Заголовок 4</h5> </body> Заголовок 1 и 3 заданы в абсолютных единицах, а Заголовок 2 и 4 в % относительно размера шрифта, заданного для тега <body>, являющегося родительским (100%) элементом для заголовков.
Размер шрифта в CSS и HTML CSS xx-small x-small small medium large x-large xx-large — Масштаб (коэфф-т) 3/5 3/4 8/9 1 6/5 3/2 2/1 3/1 Размер HTML 1 — 2 3 4 5 6 7 Заголовки h6 — h5 h5 h4 h3 h2 — Размер шрифта в CSS и HTML — xx-small Размер шрифта в CSS и HTML — x-small Размер шрифта в CSS и HTML — small Размер шрифта в CSS и HTML — medium (по умолчанию) Размер шрифта в CSS и HTML — large Размер шрифта в CSS и HTML — x-large Размер шрифта в CSS и HTML — xx-large
Распространенные единицы измерения шрифта: em — высота шрифта элемента {font-size: 2. 5em}, pt — пункты {font-size: 16pt}, px — пикселы {font-size: 12px}, % — проценты {font-size: 80%}. Размер шрифта
font-weight (жирность шрифта)	normal	соответствует числу 400
	bold	Жирный (700)
	bolder	Жирнее
	lighter	Светлее
	число	Одно из девяти целых чисел от 100 до 900
Жирность шрифта Таблица font-weight font-weight: 100 Thin (Hairline) — Тонкий (как волос) font-weight: 200 Extra Light (Ultra Light) — Extra светлый (Ультра светлый) font-weight: 300 Light — Светлый font-weight: 400 Normal or Reqular — Нормальный или Обычный font-weight: 500 Medium — Средний font-weight: 600 Semi Bold (Demi Bold) — Полужирный font-weight: 700 Bold — Жирный font-weight: 800 Extra Bold (Ultra Bold) — Экстра жирный (Ультра жирный) font-weight: 900 Black (Heavy) — Черный (Тяжелый)
font-style (стиль шрифта)	normal	Нормальный прямой — по умолчанию
	italic	Курсив
	oblique	Наклонный
font-variant (вариант стиля шрифта)	normal	по умолчанию и не влияет на отображение шрифта.
	small-caps	Заменяет строчные буквы прописными, но делает их меньше по размеру, чем прописные буквы текущего шрифта. <style> span {font-variant: small-caps} </style> Купи слона! (до изменения стиля) Купи слона! (после изменения стиля)
font (позволяет установить сразу несколько свойств шрифта в одном определении)	font-style; font-variant; font-weight; font-size; line-height; font-family	Значения параметров указываются через пробел. Если задается высота строки (line-height), то ее значение отделяется от размера шрифта (font-size) слэшем (/). Если список шрифтов (font-family) содержит более одного элемента, то последние отделяются друг от друга запятыми.
	<style> body {font: italic 10pt/12pt "Times", serif} </style>
@font-fase (указывает семейство шрифтов и URL-адрес шрифта, если шрифт отсутствует на компьютере)	font-family	Название семейства шрифтов.
	src	URL-адрес шрифта. Синтаксис: src:url(URL-адрес) Открывающаяся круглая скобка идет сразу за словом url
	подкдючения шрифта <style> @font-fase { font-family: MyFont; src:url(http://myserver.ru/MyFont.ttf) } p {font-family: MyFont;} </style>

Размер шрифта CSS (с примерами)

В этом уроке вы узнаете о размере шрифта CSS с помощью примеров.

CSS font-size Свойство регулирует размер текста на веб-странице. Например,

 р {
    размер шрифта: 36 пикселей;
} 

Вывод браузера

Здесь font-size: 36px устанавливает размер шрифта элемента p на 36px .

Синтаксис размера шрифта CSS

Размер шрифта свойство имеет следующий синтаксис,

 размер шрифта: предопределенное ключевое слово|длина|начальный|наследовать; 

Здесь,

• предопределенное ключевое слово : относится к ключевому слову, которое имеет предопределенный размер шрифта , например small , medium , big , и т.д.
• length : Относится к размеру шрифта с использованием определенной единицы длины, такой как px , em или point.like 24px , 2em и т. д.

Возможные значения для font-size следующие:

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

Размер шрифта CSS может быть указан как

1. Абсолютное значение
2. Относительное значение

1.

Абсолютное значение устанавливает фиксированное заданное значение размера. Они указываются в определенных значениях длины, таких как пиксели ( px ), точки ( pt ) и т. д. Например,

HTML

CSS

 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        
    
    <тело>
        
размер шрифта 24 пункта
        
размер шрифта 16 пикселей
        
размер шрифта 10 миллиметров
    
 

 п.первый_параграф {
    /* устанавливает размер шрифта в 24 пункта */
    размер шрифта: 24pt;
}
p.second_paragraph {
    /* устанавливает размер шрифта 16 пикселей */
    размер шрифта: 16px;
}
п.третий_параграф {
    /* устанавливает размер шрифта 10 миллиметров */
    размер шрифта: 10 мм;
} 

Вывод браузера

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

2. Размер шрифта с использованием относительного значения

Относительное значение задает размер относительно его родительских элементов.

Относительные значения указываются с использованием ключевого слова и процентных значений. Например,

HTML

CSS

 

    <голова>
        <метакодировка="UTF-8" />
        
        <ссылка rel="stylesheet" href="style.css" />
        
    
    <тело>
         
Обычный заголовок
 
        <дел>
             
Заголовок с em
 
            
Это пример текста.