Размер шрифта css в процентах: Размер шрифта CSS. Единицы измерения px, em, проценты — учебник CSS

Содержание

Размер шрифта CSS. Единицы измерения px, em, проценты — учебник CSS

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


/* в процентах: */
h2 {
	font-size: 100%;
}


/* в единицах измерения em: */
h3 {
	font-size: 1em;
}


/* в пикселях: */
h4 {
	font-size: 18px;
}


/* с помощью ключевого слова: */
p {
	font-size: small;
}

Размер шрифта в пикселях

Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px. Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:


font-size: 24px;

Размер шрифта в процентах

Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p, как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:


p {
	font-size: 100%;
}

/* ...то же самое, что и значение в браузере по умолчанию: */

p {
	font-size: 16px;
}

Если же в этом случае задать размер шрифта 50%, то он будет равен половине базового размера. Значение 200%, наоборот, увеличит шрифт в два раза.

Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.

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

По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60%, 3em = 300% и так далее. Пример записи:


font-size: 0.9em;

/* перед точкой можно опустить ноль: */

font-size: .9em;

Значения размеров шрифтов, указанные в em, наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em, то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:

Скриншот: наследование значений размеров шрифтов

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

div с 2em на 2rem, то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.

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

Задать размер текста CSS можно и с помощью специальных ключевых слов, которые также зависят от базового размера шрифта в браузере. Если ориентироваться на стандартный размер шрифта для основного текста (16 пикселей) и не брать во внимание случаи, когда базовый размер был изменен, то таблица ниже показывает соответствие между ключевым словом и размером шрифта в пикселях:

Ключевое слово	Размер в пикселях
xx-small	9px
x-small	10px
small	13px
medium	16px
large	19px
x-large	24px
xx-large	32px

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

Завершение

В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймыin, сантиметрыcm, миллиметрыmm. Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.

Читайте далее: как установить жирный шрифт и курсив в CSS.

font-size | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

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

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

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

Рис. 1. Размер шрифта

Синтаксис

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

Значения

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

Табл. 1. Размер шрифта в CSS и 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% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.

inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-size</title>
  <style>
   h2 {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */ 
    font-size: 250%; /* Размер шрифта в процентах */ 
   } 
   p {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11pt; /* Размер шрифта в пунктах */ 
   }
  </style>
 </head> 
 <body> 
  <h2>Duis te feugifacilisi</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 2. Применение свойства font-size

Объектная модель

[window.]document.getElementById(«elementID»).style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

CSS: Стиль и размер шрифта

Стиль шрифта

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exnormal { font-style: normal; }
      p.exitalic { font-style: italic; }
      p.exoblique { font-style: oblique; }
    </style>
  </head>

  <body>
    <p>Абзац со значением normal.</p>
    <p>Абзац со значением italic.</p>
    <p>Абзац со значением oblique.</p>
  </body>
</html>

Попробовать »

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

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

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

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

Пиксели

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

body { font-size: 14px; }

Проценты

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

body { font-size: 100%; }

EM

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

body { font-size: 14px; }
h3 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h3> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h3> будет составлять 1,2 размера шрифта элемента <body>, что означает в 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% больше предыдущего:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>

  <body>
    <p>Изменение размера с помощью процентов.</p>
    <p>Изменение размера с помощью пикселей.</p>
    <p>Изменение размера с помощью ключевого слова x-small.</p>
  </body>
</html>

Попробовать »

С этой темой смотрят:

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

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

Однако, не одним цветом все решается. Как вы думаете, какой технический момент больше всего влияет на удобство восприятия текстового контента сайта?

Думаю, скорее всего вы скажете — «Размер шрифта!», и будете правы. Чем более удобного кегля шрифт вы подобрали, тем приятнее читать текст на вашем сайте. Возражаете? А как вам такой размер текста? Неудобно??

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

Итак, как вы наверное догадались, в данном CSS уроке мы учимся управлять размером шрифта. Готовы? Тогда начинаем!

Возвращаемся к истокам или сила 16 пикселей

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

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

Свойство, отвечающее за размер шрифта

Размер текста мы изменяем при помощи простого свойства font-size. Например, для отображения всех шрифтов в размере 16 пикселей мы создаем следующее правило CSS:

body {font-size: 16px;}

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

Пиксели

Все системы измерения шрифтов я разделяю на две группы — абсолютные и относительные. Вам возможно немного непонятно данное разделение, но я постараюсь объяснить.

Под абсолютным я имею в виду такие значения, которые не изменяются в зависимости от контекста. Например, давайте зададим тегу body размер шрифта в 18 пикселей.

body {font-size: 18px;}

Размер текста на нашей веб-странице теперь увеличился на 2 пикселя (18-16). Следующим шагом я предлагаю задать параграфам размер шрифта в 14 px.

p {font-size: 14px;}

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

Если вернуться к терминологии, то можно сказать что пиксели — это определенные точки на экране, с помощью которых передается зрительная информация. Когда мы говорим — «Размер шрифта равен 16 пикселям» — мы имеем в виду что на отрисовку шрифта уходит 16 точек (пикселей).

Однако, вы можете спросить, как тогда быть с Retina дисплеями, ведь они имеют более 200 пикселей на дюйм, в то время как обычные мониторы в два раза меньше. Я же отвечу, что вам не о чем беспокоиться, ведь браузеры для Retina мониторов увеличивают шрифт в 2 раза.

Например, если мы через таблицу стилей задаем размер текста в 20 пикселей, браузер увеличит данное значение до 40 пикселей, в случае с Retina дисплеями. Хочу отметить, что задание размеров текста в пикселях является наиболее распространенным и универсальным методом. Я также предпочитаю данный метод всем остальным.

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

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

Помимо вышеназванного метода, у нас есть возможность управлять размером шрифта при помощи следующих ключевых слов — medium (16px), small (13px), x-small (10px), large (18px), x-large (24px). За базовое значение берется medium.

Хочу подчеркнуть, что базовые значения всех единиц измерения равняются 16 пикселям, хотя обозначаются по-разному. Если вы хотите задать тексту больший размер, можно указать значение large (18px) или x-large (24px). Если хотите меньше, указываете small (13px) или x-small (10px). Вот как это выглядит на практике:

p {font-size: large;}
ol {font-size: small;}

Всем абзацам мы придали размер текста в 18px, а всем нумерованным спискам — 13px. Вам никто не запрещает использовать ключевые слова при оформлении сайта, однако, в таком случае у вас нет большой гибкости.

Например, вдруг вы захотите изменить размер текста на 15px? В этом случае ключевыми словами дело не решить. Нужно применять обозначения в виде пикселей, либо в виде процентов и единиц измерения, с которыми мы познакомимся далее.

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

Процентные значения я отношу к относительным системам задания размера шрифта, и сейчас вы поймете почему. Дело в том что у нас базовый кегль шрифта равен 16px, которое по-другому можно обозначить как 100%. В случае если нам необходимо увеличить размер всего текста веб-страницы на 10%, мы создаем следующее CSS правило:

body {font-size: 110%;}

В правиле выше мы указали в процентном отношении размер всего текста веб-страницы. Он увеличился на 10% относительно 16px. Если нам нужно увеличить шрифт в два раза, то вместо 110% мы указываем 200%. Если нам нужно уменьшить текст абзацев на 30 процентов, мы пишем следующее CSS правило:

p {font-size: 70%;}

В общем, все просто и думаю у вас не возникло никаких трудностей с пониманием работы данного метода. Однако, есть одна особенность, которую я бы хотел осветить, и которую очень часто люди упускают из виду. Дело в том что за базовое значение берется не всегда 16px, а берется размер текста родительского элемента. Например, давайте зададим всем нумерованным спискам размер текста в 80%, а затем создадим один список вложенный в другой.

ol {font-size: 80%;}

Теперь, наш нумерованный список первого уровня будет на 20 процентов меньше 16 пикселей, а это примерно 13 пикселей. А вложенный в него список, будет меньше на 20 процентов не 16 пикселей, а будет меньше размера родительского элемента, то есть 13 пикселей. Значит, текст списка второго уровня будет примерно 10 пикселей. Размер шрифта вложенного списка относительно родителя

Этот момент часто не учитывают начинающие веб-мастера и получают на выходе не совсем то, что ожидали. Вот такая вот история.

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

Данный метод очень похож на предыдущий, с той лишь разницей что вместо 100% у нас выступает значение в 1em. Для увеличения всего текста на 20 процентов мы создаем следующее CSS правило:

body {font-size: 1.2em;}

Как и в предыдущем примере, у нас 1em равен 16 пикселям, и можно сказать что он также равен 100%. Для уменьшения размера текста всех нумерованных списков на 15 процентов мы создаем следующее CSS правило:

ol {font-size: .85em;}

Думаю, в данной системе обозначений нет ничего сложного и вам все понятно. Не удивлюсь, если вы в мыслях сравниваете меня с пестрым попугаем, который повторяет одно и то же. Однако, прошу не быть столь строгим к вашему товарищу, ведь я лишь пытаюсь наиболее понятно объяснить все детали, чтобы у вас не возникло никаких сложностей при верстке сайта.

Итак, как и в предыдущем способе задания размера шрифта, у нас есть проблема с размером родительского элемента. Вы ведь еще помните про вложенный нумерованный список? Так вот, для решения данной проблемы как вариант мы можем создать следующее CSS правило:

ol ol {font-size: 100%;}

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

Тем не менее спешу вас обрадовать что в CSS 3 появился новый метод задания размера шрифта, который обозначается как rem (root em). Данное значение будет брать за базовый размер величину корневого элемента, то есть тега html, которое равняется 16 пикселям. Таким образом, мы можем создать следующее CSS правило:

ol {font-size: .85rem;}

В этом случае, вложенный список второго уровня будет на 15 процентов меньше корневого значения (16px). Единственным недостатком в использовании единицы обозначения rem является то, что его не понимает браузер Internet Explorer 8 и более ранних версий, а во всем остальном он просто идеален.

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

При необходимости использовать относительные величины, можно присмотреться к процентам и em. Ну а если вам безразличны браузеры IE 8 и более ранние версии, лучше тогда использовать значение rem. А на этом у меня все.

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

На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

font-size | CSS | WebReference

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

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

Рис. 1. Размер шрифта

Краткая информация

Значение по умолчанию	medium
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

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

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Табл. 1. Размер шрифта в CSS и 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% берётся размер шрифта родительского элемента. Отрицательные значения не допускаются.

Песочница

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

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>font-size</title> <style> h2 { font-family: ‘Times New Roman’, Times, serif; /* Гарнитура текста */ font-size: 250%; /* Размер шрифта в процентах */ } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt; /* Размер шрифта в пунктах */ } </style> </head> <body> <h2>Амазонская низменность</h2> <p>Для гостей открываются погреба Прибалатонских винодельческих хозяйств, известных отличными сортами вин «Олазрислинг» и «Сюркебарат».</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 2. Применение свойства font-size
Объектная модель
Объект.style.fontSize
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
Устанавливаем размер шрифта с помощью HTML и CSS
Серёжа СыроежкинКопирайтер
Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

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

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

Конструктор сайтов <font size="7">"Нубекс"</font>

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

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

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

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

<html> <head> <title>Меняем размер шрифта при помощи CSS</title> <style> .nubex { font-size: 14px; } </style> </head> <body> <div>Шрифты HTML-блока div класса nubex получают размер 14px при помощи свойства font size.</div> </body> </html>

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

large, small, medium — задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).

larger, smaller — задают относительный размер (меньше или больше относительно родительского элемента).

100% — задается относительный размер (в процентах относительно родительского). Например:
h2 { font-size: 180%; }
Это означает, что размер тега h2 будет составлять 180% от базового размера шрифта.

Другие варианты задания относительного размера:
5ex — означает, что размер составит 5 высот буквы x от базового шрифта;

14pt — 14 пунктов;

22px — 22 пикселя;

1vw — 1% от ширины окна браузера;

1vh — 1% от высоты окна браузера;

Смотрите также:
Определение размеров шрифтов в CSS
В этой статье мы рассмотрим различные способы, с помощью которых вы можете установить размер шрифта HTML.
Единицы измерения можно разделить на две категории: абсолютные и относительные.
Абсолютные единицы являются фиксированными и относятся к каким-либо физическим единицам измерения. После того, как они были заданы, размер не меняется.
Относительные единицы не имеют фактического значения. Их размер определяется относительно родительского элемента. Это означает, что размер шрифта можно изменить в HTML путем изменения размеров связанного элемента.
Вот краткий обзор некоторых единиц измерения:

Я подробнее рассмотрю те единицы измерения, которые являются наиболее значимыми — px, pt, %, em, rem и vw.
Разницу между этими единицами измерения трудно понять теоретически, так что лучше продемонстрировать ее на конкретных примерах увеличения размера шрифта HTML.
В HTML-документе, где вы еще не устанавливали никаких размеров шрифтов, существуют настройки по умолчанию. В большинстве браузеров размер шрифта по умолчанию для разделов html и body — 100%. Что соответствует следующему:
100% = 1em = 1rem = 16px = 12pt
Это означает, что, если вы установите размер шрифта для одного блока <р> в 100%, а для другого — 16px, на экране они будут выводиться с одним и тем же размером шрифта:
Разницу между абсолютными и относительными единицами измерения проще понять на примере, когда мы хотим размер шрифта в HTML задать для конкретного элемента. Если мы зададим html { font-size: 200% }, это повлияет только на блоки <р> с размером шрифта, заданным в относительных единицах:

В этом заключается преимущество использования относительных единиц измерения. Таким способом можно создавать адаптивный сайт, просто с помощью изменения размера шрифта элемента html:
Единицы измерения em (и %) работают путем вычисления текущего размера шрифта в зависимости от размера шрифта родительского элемента.
Например:
html { font-size: 100% /* =16px */ } body { font-size: 2em; /* =32px */ } p { font-size: 1em; /* =32px */ /* font-size: 0.5em; =16px */ }
Поскольку р является дочерним элементом body, который в свою очередь является дочерним html — параграфы, font-size которых задан с помощью em и процентов, будут иметь два разных размера шрифта HTML:

При использовании Em вы должны принимать во внимание размер шрифта всех родительских элементов. В противном случае это может привести к полной неразберихе.
Решением данной проблемы является rem. Он рассчитывается только на основе размера шрифта элемента html, а не родительского элемента.
Например:
html { font-size: 100% /* =16px */ } body { font-size: 2rem; /* =32px */ } p { font-size: 1rem; /* =16px */ }
Использование rem позволяет сохранить масштабируемость em без влияния иерархии элементов.
vw — это новая единица измерения CSS3, которая использует для изменения размера шрифта в HTML ширину окна просмотра. Это позволяет задавать размеры шрифтов в плавающих адаптивных макетах.
Это отличная единица измерения для адаптивного дизайна, но я не являюсь ее поклонником. Она не дает мне достаточного контроля над размером шрифта, который всегда оказывается слишком большим или слишком маленьким.
До этого исследования я использовала для установки размеров шрифта пиксели. Потому что в настоящее время большинство браузеров позволяют пользователю увеличить масштаб, если текст кажется ему слишком маленьким.
Тем не менее, я считаю этот метод ограниченным с точки зрения возможностей масштабирования. При его использовании размеры шрифта выглядят нормально на средних и малых экранах, но не на больших диагоналях. Даже если у пользователей и есть возможность увеличивать масштаб, мы ведь не хотим заставлять их делать это каждый раз.
Поэтому мое решение заключается в использовании в html коде размера шрифта rem (и пикселей в качестве запасного варианта):
html { font-size: 62.5%; /* для простоты вычислений в качестве базового размера шрифта задается 10 пикселей */ } body { font-size: 16px; font-size: 1.6rem; /* устанавливаем размеры шрифтов по умолчанию, чтобы быть уверенными, что размера в 10 пикселей у нас нигде не будет */ } h2 { font-size: 32px; font-size: 3.2rem; }
Это позволяет мне изменять размеры шрифтов с помощью следующего кода:
@media screen and (min-width: 1280px) { html { font-size: 100%; } }
Этот метод использует пиксели в качестве запасного варианта, поскольку rem не поддерживается в IE8 и ниже. Из-за этого, когда я изменяю размер шрифта HTML для обеспечения масштабируемости, это не затрагивает резервный вариант. Но это не проблема, потому что возможность масштабирования для сверх больших экранов, является необязательной.
Данная публикация представляет собой перевод статьи «CSS Font Sizing» , подготовленной дружной командой проекта Интернет-технологии.ру
телеграм канал. Подпишись, будет полезно!
размер шрифта | htmlbook.ru
Internet Explorer Хром Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+
Краткая информация
Версии CSS
КСС 1 CSS 2 CSS 2.1 CSS 3
Описание
Определяет размер шрифта элемента. Размер может быть установленным средств. Набор констант (xx-small, x-small, small, средний, большой, x-большой, xx-большой) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку использует от настроек и операционной системы.
Другой набор констант (побольше, поменьше) устанавливает относительные размеры шрифта.Размер Франции унаследован от родительского элемента, эти относительные размеры применяются к родительскому Чтобы определить размер типа элемент текущего элементау, чтобы определить размер шрифта текущего элемента.
В итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от стандартной линии до границы кегельной площадки, как показано на рис. 1.
Рис. 1. Размер шрифта
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты | унаследовать
Значения
Для задания абсолютного размера используются следующие значения: xx-small, х-маленький, маленький, средний, большой, x-большой, xx-большой.Их соответствие с размером шрифта в HTML приведено в табл. 1.
Табл. 1. Размер шрифта в CSS и HTML
CSS xx малый x-маленький малый средний большой x-большой хх большой
HTML 1 2 3 4 5 6 7
Относительный размер шрифта задается значениями больше и меньше.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), области (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
наследовать
Наследует значение родителя.
Пример
HTML5CSS2.1IECrOpSaFx
размер шрифта <стиль> h2 { семейство шрифтов: Times New Roman, Times, serif; / * Гарнитура текста * / размер шрифта: 250%; / * Размер шрифта в процентах * / } п { семейство шрифтов: Verdana, Arial, Helvetica, sans-serif; размер шрифта: 11pt; / * Размер шрифта в пунктах * / } Duis te feugifacilisi Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.Ut wisis enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit лобортис нисл ут аликвип экс еа коммодо конскват.
Результат данного примера показан на рис. 1.
Рис. 2. Применение свойств font-size
Объектная модель
[окно.] Document.getElementById («elementID»). Style.fontSize
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение наследования.
.
Свойства шрифтов в CSS | CSS
Свойства CSS шрифтов являются одним из наиболее важных для документа. Если на клиентской машине не установлен используемый шрифт, то браузер будет отображать текст шрифтом, который задан по умолчанию для данной системы.
В файле CSS вы можете настроить несколько свойств шрифта: font-family, font-size, font-style. Это наиболее часто используемый шрифта:
С помощью свойств font-family можно задать семейство, которым будет CSS жирный шрифт:
body { семейство шрифтов: «Arial Black», «Arial Bold», Gadget, без засечек; } п { семейство шрифтов: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", моноширинный; }
Результат:

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

Можно установить значение font-size в абсолютных и относительных единиц измерения. Абсолютные единицы задают фиксированный размер CSS размер шрифта, относительные — задают размер в зависимости от размеров окружающих элементов:
Пиксели (px) — это наиболее часто используемого элемента измерения.Но если вы используете em, то это может помочь избежать некоторых проблем при изменении размеров элементов в окне просмотра:
Em связаны с текущим размером шрифта. 1em равен текущему значению размера шрифта, установленному в браузере. Если можете сравнить с пикселями, то вы можете вычислить их по следующей формуле: pixel / 16 = em:
Также можно задать размер CSS шрифта, используя процентные значения. размер шрифта: 100%; означает, что шрифт использует текущий размер шрифта.Для увеличения размера нужно задать большее процентное значение. Аналогично, если нужно уменьшить размер шрифта, вы можете уменьшить процентное значение:
Приведенный выше код увеличивает размер шрифта в два раза по сравнению с текущим размером, установленным в браузере:
Этот код уменьшает размер шрифта CSS наполовину по сравнению с текущим размером шрифта Категории:
В CSS представлены два значения для свойств font-style — italic и oblique:
p {font-style: italic;} h2 {font-style: oblique;}
Если нужно вывести жирный шрифт, можно использовать свойство CSS font weight:
Значения свойства font-weight: normal, bold, bolder, lighter, 100, 200, 300, 400, 500 , 600, 700, 800, 900:
p {font-weight: bolder;} p {font-weight: 500;}
Свойство font-variant используется, чтобы преобразовать все строчные буквы в заглавные.При этом преобразованные заглавные буквы будут выводиться меньшим шрифтом, чем оригинальные заглавные буквы в документе:
p {font-variant: small-caps;}
В следующем коде используются основные описанные выше свойства шрифтов в CSS:

Этот абзац отображается с размером шрифта 20

Этот абзац отображается с размером шрифта меньше 80%

Этот абзац отображается курсивом шрифтом

В этом абзаце отображаются ЖИРНЫЕ буквы

В этом абзаце буквы заменены заглавными

Результат:
Данная публикация представляет собой перевод статьи «Свойства шрифта CSS», подготовленной дружной командой проекта Интернет-технологии.ру
телеграм канал. Подпишись, будет полезно!
.
CSS-шрифтов

Шрифт в CSS — это ресурс, предоставленное визуальное представление символов. На самом простом уровне он содержит информацию, которая сопоставляет коды с фигурами (называемые глифами), представляющие эти символы.
Шрифты, использующие общий стиль дизайна, обычно группируются в семействе шрифтов, классифицируемые набором стандартных типов шрифта. Внутри семейства форма, отображаемая для данного символа, может изменяться в зависимости от толщины обводки, наклона или относительной ширины.
Ресурсы шрифтов могут быть установлены локально на устройстве, в котором работает браузер. Для локальных ресурсов шрифта описательная информация может быть получена непосредственно из ресурса шрифта (например, из arial.ttf ). Для загружаемых ресурсов шрифтов, также называемых веб-шрифтами, описательная информация включена со ссылкой на ресурс шрифта (например, для шрифта Poiret One).
Используя различные шрифты для заголовков, абзацев и других элементов, можно задавать определенный стиль письменных сообщений, передавая желаемые эмоции и настроение.Окунаясь в множестве шрифтов, не забывайте, что текст основным содержанием веб-страницы должен быть в первую очередь читабельным.
Не рекомендуется использовать более двух шрифтов на странице, а желаемого контраста можно достичь за счет комбинирования шрифтов разной толщины, размера, начертания или же при помощи цвета. Более подробно с правилами веб-типографики вы можете ознакомиться в предложенной статье.
Базовые свойства CSS-шрифтов
1.Семейство шрифтов: свойство font-family
Свойство font-family используется для выбора начертания шрифта. Невозможно предсказать, установлен тот или иной шрифт на компьютере пользователя вашего сайта, рекомендуется прописывать все возможные варианты однотипных шрифтов. В таком случае браузер будет проверять их наличие, последовательно перебирая предложенные варианты.
Если в названии шрифта имеются пробелы или символы (например, #, $,%), то оно заключается в кавычки.Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.
Свойство наследуется.
семейство шрифтов
Значения:
фамилия Название (имя) семейства шрифтов, например, Times , Courier , Arial . Рекомендуется указывать вместе с базовым семейством.
родовое семейство Базовое семейство.CSS определяет пять базовых семейств шрифтов:
Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia)
Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers)
Моноширинные шрифты — Monospace ( Courier, Courier New, Andele Mono)
Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery)
Аллегорические шрифты (Western, Woodblock, Klingon)
начальный Устанавливает значение свойства в значение по умолчанию.
наследовать Наследует значение свойства от родительского элемента.
Синтаксис
семейство шрифтов: "Times New Roman", Georgia, Serif; семейство шрифтов: с засечками; семейство шрифтов: без засечек; семейство шрифтов: моноширинный; семейство шрифтов: курсив; семейство шрифтов: фантазия; семейство шрифтов: system-ui; семейство шрифтов: наследование; семейство шрифтов: начальный;
2. Насыщенность шрифта: свойство font-weight
Свойство font-weight задаёт насыщенность шрифта.
Свойство наследуется.
font-weight
Значения:
нормальный Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
полужирный Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
более жирный Насыщенность шрифта будет больше, чем у предка.
зажигалка Насыщенность шрифта будет меньше, чем у предка.
100, 200, 300, 400, 500, 600, 700, 800, 900 Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретную плотность, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание.Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
начальный Устанавливает значение свойства в значение по умолчанию.
наследовать Наследует значение свойства от родительского элемента.
Синтаксис
font-weight: normal; font-weight: жирный; font-weight: светлее; font-weight: жирнее; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; вес шрифта: наследовать; font-weight: начальный;
Рис.1. Свойство font-weight
3. Ширина шрифта: свойство font-stretch
Свойство font-stretch позволяет выбрать нормальное, сжатие или расширенное начертание символа из семейства шрифтов. Свойство не работает на любом шрифте, а только на шрифтах, для которых разработаны различные начертания, определенным размерам.
Свойство наследуется.
Абсолютные значения ключевых слов следующий порядок, от самого узкого до самого широкого:
растяжка шрифта
Значения:
сверхконденсированный Указывает на наиболее сжатый шрифт.
сверхконденсированный Указывает на второй по сжатости шрифтом.
конденсированный Указывает на сжатый шрифт.
полуконденсированный Указывает на немного сжатый шрифт.
нормальный Значение по умолчанию.
полурасширенный Слегка расширенный шрифт.
расширенный Расширенный шрифт.
сверхширокий Второй по расширенности шрифта.
сверхрасширенный Максимально расширенный шрифт.
начальный Устанавливает значение свойства в значение по умолчанию.
наследовать Наследует значение свойства от родительского элемента.
Синтаксис
font-stretch: сверхконденсированный; font-stretch: сверхконденсированный; font-stretch: сжатый; font-stretch: полуконденсированный; font-stretch: нормальный; font-stretch: полураскрытый; font-stretch: расширенный; font-stretch: экстра-расширенный; font-stretch: сверхширокий; шрифт-растяжка: наследовать; font-stretch: начальный;
Когда не существует глифа для заданной ширины, значения нормальный или сокращенный для более узкого начертания символов, в настоящее время более широкое начертание.И наоборот, расширенные значения используют широкое начертание, в противном случае — узкое начертание. На рисунке ниже показано, как девять параметров свойства влияют на выбор шрифта для семейства шрифтов, содержащий его различные ширины, серый цвет указывает ширину, для которой не существует начертания, поэтому подставляется другая ширина:
Рис. 2. Свойство font-stretch
4. Начертание шрифта: свойство font-style
Свойство font-style позволяет выбрать стиль начертания для шрифта.При этом разница между курсивом и наклонным начертанием заключается в том, что курсив вносит небольшие изменения в каждого символа, в то время как наклонное начертание представляет собой наклонную версию прямого шрифта.
Свойство наследуется.
стиль шрифта
Значения:
нормальный Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
курсив Выделяет текст курсивом.
наклонный Устанавливает наклонное начертание шрифта.
начальный Устанавливает значение свойства в значение по умолчанию.
наследовать Наследует значение свойства от родительского элемента.
Синтаксис
стиль шрифта: обычный; стиль шрифта: курсив; стиль шрифта: наклонный; стиль шрифта: наследовать; стиль шрифта: начальный;
Рис.3. Свойство font-style
5. Размер шрифта: свойство font-size
.
Свойство font-size указывает желаемую высоту глифов из шрифта.
Свойство наследуется.
размер шрифта
Значения:
абсолютный размер xx-small , x-small , small , medium , large , x-large , xx-large . В качестве стандартного размера принимается средний .В CSS1 предложенный коэффициент масштабирования между соседними индексами составляющий 1.5, что для пользователя оказалось слишком большим. В CSS2 предложенный коэффициент масштабирования для экрана компьютера между другими индексами составляющий 1.2. Новый коэффициент масштабирования увеличивается между каждым индексом, чтобы обеспечить лучшую читаемость.
относительный размер меньше , больше .Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки предполагаемых для xx-small и xx-large .
длина Размер шрифта устанавливается с помощью положительных значений длины, например, px , em , как целых, так и дробных.
% Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента.Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью em эквивалентно процентному значению.
начальный Устанавливает значение свойства в значение по умолчанию.
наследовать Наследует значение свойства от родительского элемента.
Синтаксис
размер шрифта: xx-small; размер шрифта: x-small; размер шрифта: маленький; размер шрифта: средний; размер шрифта: большой; размер шрифта: x-большой; размер шрифта: xx-large; размер шрифта: меньше; размер шрифта: крупнее; размер шрифта: 14 пикселей; размер шрифта: 0.8em; размер шрифта: 80%; размер шрифта: наследовать; размер шрифта: начальный;
Значения абсолютного размера
xx малый x-маленький малый средний большой x большой xx большой
Коэффициент масштабирования
3/5 3/4 8/9 1 6/5 3/2 1/2 3/1
HTML-заголовки
h6 h5 h5 h4 h3 h2
HTML размер шрифта
1 2 3 4 5 6 7
6.Относительный размер шрифта: свойство font-size-adjust
Для любого заданного размера шрифта явный размер и четкость текста изменяется в зависимости от шрифта. Для таких шрифтов, как латиница или кириллица, которые различают прописные и строчные буквы, относительная высота строчных букв по сравнению с их прописными аналогами является определяющим фактором удобочитаемости. Это обычно указывает на особенности. Точно определенно, он равен x-height шрифта, разделенной на размер шрифта.
В ситуации указано, когда для шрифта используется несколько семейств шрифтов, резервные шрифты могут не использовать то же значение, что и желаемое семейство шрифтов, и, следовательно, будут казаться менее четкими.
Свойство font-size-adjust — сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.
Свойство наследуется.
Рис. 4. Термины в типографике
font-size-adjust
Значения:
нет Не сохраняет x-height шрифта.
число Задает значение элементов, используемое в приведенных ниже расчетах шрифтов для расчета скорректированного размера:
c = (a / a ') s
где:
s = значение размера шрифта
a = значение параметра, указанное в своем качестве font-size-adjust
a ' = значение частного фактического шрифта
c = скорректированный размер шрифта для использования
Отрицательные значения недействительны.
начальный Устанавливает значение свойства в значение по умолчанию.
наследовать Наследует значение свойства от родительского элемента.
Синтаксис:
регулировка размера шрифта: нет; регулировка размера шрифта: 0,7; font-size-adjust: наследовать; font-size-adjust: начальный;
Как отображается текст в каждом из этих сравниваемых шрифтов, показано ниже, столбцы показывают текст, отображаемый в Verdana, Futura и Times.Одно и то же значение размера шрифта используется для ячеек в каждой строке, для отображения различных по x-height включены красные линии. В верхней строке отображается в том же значении размера шрифта. То же самое верно и для нижней половины, но в этой главе также установлено свойство font-size-adjust , чтобы фактический размер шрифта регулировался таким образом, чтобы сохранить x-height для каждой строки. Обратите внимание, что текст остается относительно разборчивым в каждой строке в нижней половине.
Рис. 5. Текст с использованием и без использования font-size-adjust
7. Сокращенная запись свойств шрифта: свойство font
Свойство font за исключением описанного ниже, является сокращенным для установки font-style , font-variant , font-weight , font-stretch , font-size / line-height , семейство шрифтов . Также могут быть включены значения для свойств font-variant , которые поддерживаются CSS 2.1 — нормальный или малокапельный .
Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust , font-kerning , все подсвойства font-option и шрифтов, за исключением font-Synthesis . Затем этими свойствами присваиваются те значения, которые указаны в свойстве , шрифт . Для свойств font-size-adjust установить невозможно значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуального свойства.Если явное значение какого-либо свойства не нужно, то оно опускается.
Свойство наследуется.
Синтаксис
шрифт: 12pt / 14pt sans-serif; шрифт: 80% без засечек; шрифт: x-large / 110% «Школьный учебник нового века», с засечками; шрифт: полужирный курсив, большой Palatino, с засечками; шрифт: обычные, мелкие, 120% / 120% фэнтези; шрифт: сокращенный косой, 12pt, Helvetica Neue, засечки;
Следующие значения относятся к системным шрифтам:
caption — шрифт, используемый для элементов управления с субтитрами (например, кнопки, раскрывающихся списков и т.д.).
значок — шрифт, используемый для обозначения значков.
меню — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
Окно сообщений — шрифт, используемый в диалоговых окнах.
small-caption — шрифт, инструмент для маркировки подписи элементов управления.
строка состояния — шрифт использовать в строке состояния окна.
Системные шрифты могут быть установлены только целиком; то есть семейство шрифтов, размер, вес, стиль и т.д. задаются одновременно. Эти значения могут быть индивидуально, если это необходимо. Ключевые слова, используемые для системных шрифтов, перечисленных выше, обрабатываются как ключевые слова только в том случае, если они находятся в начальной позиции, в других позициях же эта строка обрабатывается как часть имени семейства шрифтов. Системные шрифты могут быть указаны только с этим своим, но не с самим font-family .
шрифт: меню; / * используются настройки шрифта для системного меню * / шрифт: большое меню; / * используется семейство шрифтов под названием "меню" * /
8.Управление синтезом шрифтов: свойство font-synt
ство font-Synthesis определяет, разрешено ли пользователям агентам (браузерам) синтезировать полужирное или наклонное начертание шрифтов, когда они отсутствуют в семействе шрифтов. Если вес не указан, пользовательские агенты не должны синтезировать полужирное начертание, а если стиль не указан, пользовательские агенты не должны синтезировать курсив.
Свойство наследуется.
синтез шрифтов
Значения:
нет Запрещает синтез начертаний.
вес и / или стиль По умолчанию принимает значение font-Synthesis: weight style; . Если указан только вес , это говорит браузеру, что жирный шрифт может быть синтезирован при необходимости. Если только style — синтезируется только курсив.
начальный Устанавливает значение свойства в значение по умолчанию.
наследовать Наследует значение свойства от родительского элемента.
Синтаксис
Синтез шрифтов: нет; шрифт-синтез: вес; шрифт-синтез: стиль; шрифт-синтез: стиль веса; шрифт-синтез: начальный; шрифт-синтез: наследовать;
По материалам CSS Fonts Module Level 3
.
размер шрифта | CSS | WebReference
Определяет размер шрифта элемента. Размер может быть установлен безопасными способами. Набор констант (xx-маленький, x-маленький, маленький, средний, большой, x-большой, xx-большой) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку используются от настроек Google и операционная система.
Другой набор констант (больше, меньше) устанавливает относительные размеры шрифта. Предоставленный размер унаследован от родительского элемента, указанные относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В итоге размер шрифта сильно зависит от значения font-size у родителя элемента.
Размер шрифта определяется как высота от линии до верхней границы кегельной площадки, как показано на рис. 1.
Рис. 1. Размер шрифта
Краткая информация
Значение по умолчанию средний
Наследуется Да
Применяется Ко всем элементам
Анимируется Да
Синтаксис
font-size: <абсолютный размер> | <относительный размер> | <размер> | <проценты>
Обозначения
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). нормальный | капсюли
A || B Каждое личное дело самостоятельно или с другими в произвольном порядке. ширина || count
[] Группирует значения. [урожай || крест]
* Повторять ноль или больше раз. [, <время>] *
+ Повторять один или больше раз. <число> +
? Указанный тип, слово или группа не является обязательным. вставка?
{A, B} Повторять не менее A, но не более B раз. <радиус> {1,4}
# Повторять один или больше раз через запятую. <время> #
Значения
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.
Табл. 1. Размер шрифта в CSS и HTML
CSS xx-small x-small small medium large x-large xx-large Нет
HTML 1 Нет 2 3 4 5 6 7
Относительный размер шрифта задается значениями больше и меньше.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), точками (pt), пикселы (px), проценты (%) и др. За 100% берётся размер шрифта родительского элемента. Отрицательные значения не допускаются.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
Пример
размер шрифта <стиль> h2 { семейство шрифтов: Times New Roman, Times, serif; / * Гарнитура текста * / размер шрифта: 250%; / * Размер шрифта в процентах * / } п { семейство шрифтов: Verdana, Arial, Helvetica, sans-serif; размер шрифта: 11pt; / * Размер шрифта в пунктах * / }
Амазонская низменность
Для гостей открываются погреба Прибалатонских винодельческих хозяйств, известных отличных сортов вин «Олазрислинг» и «Сюркебарат».
Результат данного примера на рис. 1.
Рис. 2. Применение свойства font-size
Объектная модель
Объект .style.fontSize
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Рекомендация (Рекомендация) — спецификация W3C и одобана как стандарт.
Кандидат в рекомендации (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Проект (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров используются следующие обозначения.
— свойство полностью предоставленным браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство имеется лишь частично, например, не все допустимые значения имеют свойство не ко всем элементам, которые указаны в спецификации.
Число указывает версию, начиная с свойства, имеющего свойство.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 02.03.2020
Редакторы: Влад Мержевич
.
No related posts.

Табл. 1. Размер шрифта в CSS и HTML
CSS	xx малый	x-маленький	малый	средний	большой	x-большой	хх большой
HTML	1		2	3	4	5	6	7

семейство шрифтов
Значения:
фамилия	Название (имя) семейства шрифтов, например, `Times` , `Courier` , `Arial` . Рекомендуется указывать вместе с базовым семейством.
родовое семейство	Базовое семейство.CSS определяет пять базовых семейств шрифтов: Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia) Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Моноширинные шрифты — Monospace ( Courier, Courier New, Andele Mono) Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Аллегорические шрифты (Western, Woodblock, Klingon)
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`наследовать`	Наследует значение свойства от родительского элемента.

font-weight
Значения:
`нормальный`	Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
`полужирный`	Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
`более жирный`	Насыщенность шрифта будет больше, чем у предка.
`зажигалка`	Насыщенность шрифта будет меньше, чем у предка.
`100, 200, 300, 400, 500, 600, 700, 800, 900`	Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретную плотность, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание.Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`наследовать`	Наследует значение свойства от родительского элемента.

растяжка шрифта
Значения:
`сверхконденсированный`	Указывает на наиболее сжатый шрифт.
`сверхконденсированный`	Указывает на второй по сжатости шрифтом.
`конденсированный`	Указывает на сжатый шрифт.
`полуконденсированный`	Указывает на немного сжатый шрифт.
`нормальный`	Значение по умолчанию.
`полурасширенный`	Слегка расширенный шрифт.
`расширенный`	Расширенный шрифт.
`сверхширокий`	Второй по расширенности шрифта.
`сверхрасширенный`	Максимально расширенный шрифт.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`наследовать`	Наследует значение свойства от родительского элемента.

стиль шрифта
Значения:
`нормальный`	Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
`курсив`	Выделяет текст курсивом.
`наклонный`	Устанавливает наклонное начертание шрифта.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`наследовать`	Наследует значение свойства от родительского элемента.

размер шрифта
Значения:
абсолютный размер	`xx-small` , `x-small` , `small` , `medium` , `large` , `x-large` , `xx-large` . В качестве стандартного размера принимается `средний` .В CSS1 предложенный коэффициент масштабирования между соседними индексами составляющий 1.5, что для пользователя оказалось слишком большим. В CSS2 предложенный коэффициент масштабирования для экрана компьютера между другими индексами составляющий 1.2. Новый коэффициент масштабирования увеличивается между каждым индексом, чтобы обеспечить лучшую читаемость.
относительный размер	`меньше` , `больше` .Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки предполагаемых для `xx-small` и `xx-large` .
длина	Размер шрифта устанавливается с помощью положительных значений длины, например, `px` , `em` , как целых, так и дробных.
`%`	Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента.Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью `em` эквивалентно процентному значению.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`наследовать`	Наследует значение свойства от родительского элемента.

Значения абсолютного размера
`xx малый`	`x-маленький`	`малый`	`средний`	`большой`	`x большой`	`xx большой`
Коэффициент масштабирования
3/5	3/4	8/9	1	6/5	3/2	1/2	3/1
HTML-заголовки
h6		h5	h5	h4	h3	h2
HTML размер шрифта
1		2	3	4	5	6	7

font-size-adjust
Значения:
`нет`	Не сохраняет `x-height` шрифта.
число	Задает значение элементов, используемое в приведенных ниже расчетах шрифтов для расчета скорректированного размера: `c = (a / a ') s` где: `s` = значение размера шрифта `a` = значение параметра, указанное в своем качестве `font-size-adjust` `a '` = значение частного фактического шрифта `c` = скорректированный размер шрифта для использования Отрицательные значения недействительны.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`наследовать`	Наследует значение свойства от родительского элемента.

синтез шрифтов
Значения:
`нет`	Запрещает синтез начертаний.
`вес` и / или `стиль`	По умолчанию принимает значение `font-Synthesis: weight style;` . Если указан только `вес` , это говорит браузеру, что жирный шрифт может быть синтезирован при необходимости. Если только `style` — синтезируется только курсив.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`наследовать`	Наследует значение свойства от родительского элемента.

Значение по умолчанию	средний
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Да