Устанавливаем размер шрифта с помощью 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 будет составлять 180% от базового размера шрифта.h2 { font-size: 180%; }
- 5ex — означает, что размер составит 5 высот буквы x от базового шрифта;
- 14pt — 14 пунктов;
- 22px — 22 пикселя;
- 1vw — 1% от ширины окна браузера;
- 1vh — 1% от высоты окна браузера;
Смотрите также:
nubex.ru
font-size | htmlbook.ru
Internet Explorer | Chrome | Opera | 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.
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.
htmlbook.ru
Свойство font-size | CSS справочник
CSS свойстваОпределение и применение
CSS свойство font-size задает размер шрифта элемента.
Поддержка браузерами
CSS синтаксис:
font-size:"medium | small | x-small | xx-small | smaller | large | x-large | xx-large | larger | length | initial | inherit";
JavaScript синтаксис:
object.style.fontSize = "150%"
Значения свойства
Значение | Описание |
---|---|
medium | Устанавливает размер шрифта среднего размера. |
small | Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов). |
x-small | Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов). |
xx-small | Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов). |
smaller | Устанавливает размер шрифта меньшего размера, чем у родительского элемента. |
large | Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов). |
x-large | Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов). |
xx-large | Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов). |
larger | Устанавливает размер шрифта большего размера, чем у родительского элемента. |
length | Устанавливает размер шрифта фиксированного размера (в единицах измерения CSS — px, em, cm и др.). |
% | Задает размер шрифта в процентах от размера шрифта родительского элемента. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS1Наследуется
Да.Анимируемое
Да.Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования свойства font-size.</title> <style>.test { font-size : 180%; /* устанавливаем размер шрифта 180% от размера шрифта родительского элемента */ } .test2 { font-size : 1.5em; /* устанавливаем размер шрифта 1.5em. */ } .test3 { font-size : 16px; /* устанавливаем размер шрифта 16px. */ } </style> </head> <body> <p class = "test">Параграф с размером шрифта в процентах от размера шрифта родительского элемента (180%).</p> <p class = "test2">Параграф с размером шрифта 1.5em.</p> <p class = "test3">Параграф с размером шрифта 16px.</p> </body> </html>
basicweb.ru
font-size | CSS | WebReference
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Рис. 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} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.
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 (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич
webref.ru
УЧЕБНИК HTML для новичков — Размер шрифта
Размер шрифта
По умолчанию размер шрифта равняется 3 пунктам. Но, при желании мы можем увеличить или уменьшить его размер с помощью атрибута <size>. Для этого есть два пути. Абсолютный и относительный. Абсолютный, это когда мы прямым текстом говорим, сколько пунктов должен иметь наш текст. Так, например, выражение FONT size=5 говорит о том, что наши буквы должны иметь размер 5 пунктов. Ни больше ни меньше! Так попытайтесь угадать, какой размер должен иметь текст FONT size=2? Совершенно правильно! Два пункта! А сколько FONT size=20? Думаете 20? Ничего подобного. Всему есть предел! Вот и тут тоже предел от 1 до 7. Мало ли какой шутник найдется и буквы с километр сделает?
Как и говорила, есть еще один путь — относительный. Это если за основу взять те три пункта, которые приняты по умолчанию. И прибавляя, либо отнимая число пунктов, можно увеличивать или уменьшать наши пунктики. А вот и примеры:
<FONT size= +2> означает 3+2=5 пунктов
<FONT size= +4> означает 3+4=7 пунктов
<FONT size= -1> означает 3-1=2 пункта
Может я вас немного запутала, но, приноровившись, вы будете щелкать эти задачки как орешки. Заодно и арифметику вспомните, а с нею и школьную юность… Значит, для вышеприведенных примеров можно записать так:
<font size=5>Шрифт размером в 5 пунктов</font>
<font size=+2>Шрифт размером 3+2 пункта</font>
<font size=7>Шрифт размером в 7 пунктов</font>
<font size=+4>Шрифт размером в 3+4 пункта</font>
<font size=2>Шрифт размером в 2 пунктов</font>
<font size=-1>Шрифт размером 3-1 пункта</font>
В принципе, вы можете изменить базовый размер, с которого ведется отсчет, и тогда этот размер будет использоваться по умолчанию с помощью Basefont. И, установив, например значение <basefont=4>, можно далее изменять значиения текста относительно этого размера. Указывать этот basefont можно не только на самой страничке, между тегами <BODY> и </BODY>, но и в заголовке между тегами <HEAD> и </HEAD>
А если вам не нравится возиться с цифрами, то можно обойтись и буквами, вернее словами. Big — большой, small — маленький. Вернее, больше и меньше.
Опять примерчики:
Это обычный текст.
<big>Этот текст побольше.</big>
<small>Этот текст поменьше.</small>
А хотите, вообще можно написать — больше, больше, больше, или наоборот, меньше-меньше-меньше. Вот так:
<big><big><big>Ну ооочень большой текст!</big></big></big>
<small><small><small>А тут малюююююююсенький!</small></small></small>
В общем, выбирайте сами, какой размер установить, только смотрите, чтобы экран не разорвало! Он же все-таки не резиновый!
Тренировка!
Введите в форму любой текст, необходимые теги, нажмите на «посмотреть» и любуйтесь на свою работу!
highstar.ru
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>Попробовать »
С этой темой смотрят:
puzzleweb.ru
Свойство font-size | CSS
1.7KСвойство font-size позволяет указывать размер текста CSS. Оно влияет не только на шрифт, к которому применяется, но и используется для вычисления единиц измерения em, rem и ex.
font-size может принимать в качестве значений ключевые слова, единицы измерения или процентное соотношение. Важно отметить, что в рамках применения сокращенного свойства font, font-size является обязательным значением. Если его не указать, то вся строка кода будет игнорироваться.
Значения длины (px, em, rem, ex и т. д.), используемые в свойстве font-size, не могут быть отрицательными.
.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 пунктам. Обычно эти единицы используются в печатных документах.
.element { font-size: larger; }
Например, если свойство font-size у родительского элемента имеет значение small, то у дочернего элемента с относительным значением larger размер текста HTML CSS будет больше.
.element { font-size: 110%; }
Процентные значения, как font-size со значением 110%, также являются относительными, и зависят от размера шрифта, указанного в родительском элементе. Предлагаем вам взглянуть на демо.
.element { font-size: 2em; }
Единица измерения em является относительной, и вычисляется в зависимости от CSS размера текста в родительском элементе. Это означает, что дочерние элементы всегда зависят от родительских. Например:
<div> <h3>Заголовок</h3> <p>Какой-нибудь текст</p> </div>
.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).
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+ | Работает | Работает |
.element { font-size: 20ex; }
1ex равен высоте строчной буквы x в используемом шрифте. В примере, приведенном ниже, html-элемент установлен на 20px, а все остальные размеры определяются высотой x определенного шрифта.
Посмотреть демо
Поэкспериментируйте с приведенным выше демо, заменяя семейства шрифтов в html-элементе и таким образом изменяя размер текста CSS.
.element-one { font-size: 100vh; } .element-two { font-size: 100vw; } .
Viewport-единицы, такие как vw и vh, позволяют устанавливать размер шрифта относительно длины или ширины окна просмотра:
- 1vw = 1% от ширины окна просмотра;
- 1vh = 1% от высоты окна просмотра.
То есть, если мы посмотрим на следующий пример:
.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 чем-то похожа на ex, и позволяет устанавливать размер текста CSS относительно нулевой ширины глифа:
Посмотреть демо
Эта единица измерения поддерживается следующими браузерами:
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
27+ | Работает | 10+ | Работает | 9+ | Работает | Работает |
Данная публикация представляет собой перевод статьи «Font-size» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru