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

Содержание

font-size | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

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

Версии CSS

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (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
CSSxx-smallx-smallsmallmediumlargex-largexx-large 
HTML1 234567

Относительный размер шрифта задается значениями 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.

Размер текста | WebReference

Размер шрифта или, как он ещё называется в типографике — кегль, определяется высотой символов, которая, в свою очередь, на веб-странице может задаваться как в относительных (em, rem), так и в абсолютных единицах (дюймы (in), миллиметры (mm), пункты (pt) и др).

На вид шрифта влияет не только заданный размер, но и выбор гарнитуры. Шрифт Arial выглядит крупнее, чем шрифт Times того же размера, а шрифт Courier New чуть меньше шрифта Arial (рис. 1). Учитывайте эту особенность при выборе шрифта и его размеров.

Рис. 1. Размеры текста на веб-странице

На рис. 1 приведены три типа шрифтов с размером 12 и 24 пункта. Легко заметить, что при одинаковых заданных размерах текст различается как по высоте, так и по насыщенности.

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

На практике константы применяются редко, а в основном используются допустимые единицы CSS: em (высота шрифта элемента), пункты (pt), пиксели (рх) и др. Перечислим несколько популярных.

Пиксели

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

Пункты

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

em

Эта единица показывает размер шрифта текущего элемента и он всегда равен 1em независимо от реального размера текста. Зачем тогда использовать? Em связан с размером шрифта родительского элемента и мы можем легко изменять размер текста самого элемента в большую (1.2em) или меньшую сторону (0.8em) без дополнительных вычислений. В каком-то смысле это является синонимом процентной записи.

rem

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

В примере 1 задействовано сразу несколько единиц измерений.

Пример 1. Изменение размеров текста

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Размер текста</title> <style> body { font-size: 16px; } h2 { font-size: 22pt; } p { font-size: 1.5em; } </style> </head> <body> <h2>Почему неоднозначна первообразная функция?</h2> <p>Начало координат, в первом приближении, непредсказуемо. Абсолютно сходящийся ряд накладывает полином, что несомненно приведет нас к истине.</p> </body> </html>

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

Рис. 2. Задание размера для заголовка и основного текста

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

как его указать, увеличить, изменить

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

Как правильно менять размер текста

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

Так как увеличить размер шрифта в html правильно? Конечно, с помощью css. И не только увеличить, но и уменьшить, поскольку это тоже бывает необходимо.

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

Заголовки же, наоборот, должны быть как минимум в 2-3 раза больше основного содержимого. Также нужно позаботиться о правильном отображении подзаголовков. Здесь правило такое: ни в коем случае размер h4 не должен быть больше, чем у h3.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Используем CSS

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

Ключевые слова. В css в качестве значения этому свойству можно прописывать ключевые слова smaller и larger, которые уменьшают и увеличивают шрифт по отношению к родительскому элементу. Можно сказать, что эффект будет аналогичным использованию тегов small и big.

Абсолютный размер с помощью ключевых слов. Другая группа ключей для этого свойства – xx-small, x-small, small, medium, large, x-large и xx-large позволяют задать абсолютное значение. Хотя на самом деле точно вычислить в пикселах его не получится, потому что многое будет зависеть от настроек браузеров. Можно с уверенностью сказать, что использование таких значений точно не сделает сайт кроссбраузерным.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

body{ font-size: 12px; } а{ font-size: 1.2em; } h2{ font-size: 2.8em; } table td{ font-size: 0.9em; }

body{

font-size: 12px;

}

а{

font-size: 1.2em;

}

h2{

font-size: 2.8em;

}

table td{

font-size: 0.9em;

}

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

Какие плюсы это даст? Если вдруг в браузере измениться шрифт, то у всех элементов он измениться пропорционально и не будет риска, что что-то в вашей верстке сломается. Также относительный размер можно писать в процентах. Тут все тоже просто – 100% это размер шрифта родительского элемента. Соответственно, если у абзаца стоит размер 120%, а у цитат в абзаце – 150%.

Другие факторы, влияющие на текстовое содержимое

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

Font-variant: small-caps – это свойство с таким значением выводит все буквы заглавными, но немного уменьшенными по сравнению с обычными. Вот такое вот нестандартное поведение.

Text-transform: uppercase – весь текст с таким свойством будет выводиться заглавными буквами, что соответствующим образом скажется на их величине.

Text-transform: lowercase – противоположная ситуация, в таком тексте вообще не будет заглавных букв.

Font-weight: bold – тут, я думаю, вам понятно. Это свойство делает текст жирным, а в таком начертании он становится немного крупнее.

Letter-spacing: значение в пикселях – этот параметр позволяет определить расстояние между символами. На сам размер символов никак не влияет, но изменяет именно ширину текста. Можно прописывать положительные и отрицательные значения.

Итог

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Устанавливаем размер шрифта с помощью 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. Единицы измерения 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.

Размер шрифта. HTML, XHTML и CSS на 100%

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

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

Семейство шрифта Свойство font-family указывает браузеру шрифт или список шрифтов, которыми должен отображаться текст. Не надо забывать, что заданный вами шрифт может быть не установлен на машине клиента. Тогда браузер отобразит текст на экране первым шрифтом, который найдет

Стиль шрифта

Стиль шрифта Стиль шрифта задается свойством font-style, которое может принимать одно из трех значений: normal, oblique или italic. Эти значения имеют следующий смысл.• normal – определяет шрифт, который классифицируется как Normal. При отображении на экране он выглядит как обычный текст.•

Вид шрифта

Вид шрифта Свойство font-variant может принимать одно из двух значений: normal или small-caps. Если задано значение small-caps, то текст будет выведен шрифтом из малых прописных букв. Если задано значение normal, то текст отображается, как обычно.Лучше всего это понятно на примере. Применим

Ширина шрифта

Ширина шрифта Свойство font-weight определяет ширину шрифта. Значение может быть задано числом от 100 до 900 (в сотнях), где каждый номер обозначает шрифт, который темнее своего предшественника. В других случаях значение может быть следующим.• normal – текст будет отображен обычным

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

Свойства шрифта fontЗадает параметры шрифта элемента страницы.Заменяет атрибуты font-family, font-height, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке. font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight}];Значение по умолчанию — normal normal

1.5. Оформление текста (границы, абзацы, размер шрифта, гарнитуры)

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

4.2. Параметры шрифта

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

Вид шрифта

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

Размер страницы и размер кэша по умолчанию

Размер страницы и размер кэша по умолчанию При восстановлении вы можете изменить размер страницы, включив в команду переключатель -р[age_size], за которым следует целое число, задающее размер в байтах. Допустимые размеры страниц см. в табл. 38.2.В этом примере gbak восстанавливает

1.5. Оформление текста (границы, абзацы, размер шрифта, гарнитуры)

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

Стили шрифта

Стили шрифта Стиль шрифта задается перечислимым типом FontStyleType, который содержит следующие константы: fsNormal – обычный; fsBold – жирный; fsItalic – наклонный; fsBoldItalic – жирный наклонный; fsUnderline – подчеркнутый; fsBoldUnderline – жирный подчеркнутый; fsItalicUnderline – наклонный

13.6.1. Выбор шрифта

13.6.1. Выбор шрифта В вашем компьютере установлено много различных шрифтов. Шрифт по умолчанию, который используется в MS Word, — Times New Roman. Он подойдет для сухого делового документа, служебной записки. Чтобы изменить гарнитуру шрифта (далее мы просто будем говорить «изменить

13.6.2. Начертание шрифта

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

16.3.3. Размер шрифта и полноэкранный режим

16.3.3. Размер шрифта и полноэкранный режим У некоторых веб-мастеров, наверное, проблемы со зрением: одни устанавливают неприлично больпюй размер шрифта, другие, наоборот, слишком мелкий. Браузер позволяет исправить ситуацию — зачем портить себе зрение (если шрифт мелкий)?

Размер головного мозга и размер социального окружения

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

Размер текста html | Вопросы и ответы. Все о дизайне и создании сайтов

Цвет шрифта html можно определить при помощи атрибутов CSS. Часто начинающие веб-разработчики и владельцы сайтов сталкиваются с вопросом изменения размеров и цвета шрифта при работе с HTML кодом.

Для изменения шрифтов служит тэг <font> с атрибутом face. Указывать шрифты вы можете как по типу (к примеру, monospace), так и по названию (Tahoma, Arial и т.д.). Стоит отметить, что при выборе шрифта, лучше всего указывать несколько вариантов, дабы избежать ситуации, когда браузер пользователя не поддерживает какой-то из них. Рекомендуем вам забивать хотя бы один из известных и распространенных шрифтов, к примеру Arial, который поддерживается всеми браузерами. Кроме того, не стоит применять на одной странице более 2-3 разных шрифтов, это может значительно повлиять на внешний вид страницы и значительно ухудшить организацию ее структуры.

Для того, чтоб изменить размеры шрифта на HTML странице, используется атрибут size. Хочется сразу отметить, что чем крупнее шрифт вы используете, тем лучше будет восприниматься текст пользователями. Но, в тоже время, мелкий шрифт позволяет уместить в пределах одной страницы большие объемы информации. Целиком изменить размер шрифта на всей странице, вы сможете используя атрибут с тэгом <basefont>. Изменить размер шрифта отдельного фрагмента, поможет атрибут size, примененный с тегом <font>.

Как изменить цвет шрифта в html?

А придать большую привлекательность оформлению страницы, поможет использование шрифтов различного цвета. Для того, чтоб это сделать, необходимо использовать атрибут text вместе с тегом <body>. Это подходит для изменения шрифта на всей странице, а вот изменить отдельный фрагмент текста, можно используя тэг <font> с атрибутом color.

Не можете найти ответ на вопрос?

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


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

Свойство font-size устанавливает размер текста.

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

Всегда используйте правильные теги HTML, например

для заголовков и

для абзацы.

Значение размера шрифта может быть абсолютный или относительный размер.

Абсолютный размер:

  • Устанавливает указанный размер текста
  • Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)
  • Абсолютный размер полезен, когда известен физический размер вывода.

Относительный размер:

  • Устанавливает размер относительно окружающих элементов
  • Позволяет пользователю изменять размер текста в браузерах

Примечание: Если вы не укажете размер шрифта, размер по умолчанию для обычного текста, такого как абзацы, составляет 16 пикселей (16 пикселей = 1 em).


Установить размер шрифта с пикселями

Установка размера текста в пикселях дает вам полный контроль над размером текста:

Пример

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

h3 {
font-size: 30px;
}

p {
font-size: 14px;
}

Попробуй сам »

Совет: Если вы используете пиксели, вы все равно можете использовать инструмент масштабирования для изменения размера всей страницы.


Установить размер шрифта с помощью Em

Чтобы пользователи могли изменять размер текста (в меню браузера), многие разработчики используют em вместо пикселей.

1em равно текущему размеру шрифта. Размер текста по умолчанию в браузерах: 16 пикселей. Итак, размер 1em по умолчанию составляет 16 пикселей.

Размер может быть рассчитан от пикселей до em по следующей формуле: пикселей /16 = em

Пример

h2 {
font-size: 2.5em; / * 40px / 16 = 2.5em * /
}

h3 {
font-size: 1.875em; / * 30px / 16 = 1,875em * /
}

p {
font-size: 0,875em; / * 14px / 16 = 0.875em * /
}

Попробуй сам »

В приведенном выше примере размер текста в em такой же, как в предыдущем примере. в пикселях.Однако с размером em можно настроить размер текста. во всех браузерах.

К сожалению, проблема со старыми версиями все еще существует. Internet Explorer. Текст становится больше, чем должен когда он сделан больше, и меньше, чем должен, когда сделан меньше.


Используйте комбинацию процентов и Em

Решение, которое работает во всех браузерах, — установить размер шрифта по умолчанию в процент для элемента :

Пример

body {
font-size: 100%;
}

h2 {
font-size: 2.5em;
}

h3 {
font-size: 1,875em;
}

p {
font-size: 0,875em;
}

Попробуй сам »

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


Размер адаптивного шрифта

Размер текста можно установить с помощью единицы vw , что означает «ширину области просмотра».

Таким образом, размер текста будет соответствовать размеру окна браузера:

Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.

Viewport — это размер окна браузера. 1vw = 1% ширины области просмотра. Если ширина области просмотра 50 см, 1vw составляет 0,5 см.



CSS Google Fonts


Google Шрифты

Если вы не хотите использовать какие-либо стандартные шрифты в HTML, вы можете использовать Google Fonts.

Google Fonts можно использовать бесплатно, и у них есть более 1000 шрифтов на выбор.


Как использовать Google Fonts

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

Пример

Здесь мы хотим использовать шрифт «Sofia» из Google Fonts:





Результат:

Lorem ipsum dolor sit amet.

123456790

Попробуй сам »

Пример

Здесь мы хотим использовать шрифт «Trirong» из Google Fonts:





Результат:

Lorem ipsum dolor sit amet.

123456790

Попробуй сам »

Пример

Здесь мы хотим использовать шрифт «Audiowide» из Google Fonts:




Результат:

Lorem ipsum dolor sit amet.

123456790

Попробуй сам »

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

Чтобы просмотреть список всех доступных шрифтов Google, посетите наш How To — Google Fonts Tutorial.


Использовать несколько шрифтов Google

Чтобы использовать несколько шрифтов Google, просто разделите имена шрифтов вертикальной чертой. символ ( | ), например:

Пример

Запросить несколько шрифтов:





Результат:

Попробуй сам »

Примечание: Запрос нескольких шрифтов может замедлить работу ваших веб-страниц! Так что будьте осторожны с этим.



Стилизация шрифтов Google

Конечно, вы можете стилизовать шрифты Google по своему усмотрению с помощью CSS!

Пример

Стиль шрифта «Sofia»:





Результат:

Lorem ipsum dolor sit amet.

123456790

Попробуй сам »

Включение эффектов шрифта

Google также включил различные эффекты шрифтов, которые вы можете использовать.

Сначала добавьте effect = effectname в Google API, затем добавьте имя специального класса к элементу, который будет использовать специальный эффект.Имя класса всегда начинается с font-effect- . и заканчивается именем эффекта .

Пример

Добавьте огненный эффект к шрифту «София»:




тело {
семейство шрифтов: «София», без засечек;
размер шрифта: 30 пикселей;
}

София, ул. Пожар


Результат:

Попробуй сам »

Чтобы запросить несколько эффектов шрифта, просто разделите имена эффектов вертикальной чертой. ( | ), вот так:

Пример

Добавьте несколько эффектов к шрифту «Sofia»:




body {
семейство шрифтов: «София», без засечек;
размер шрифта: 30 пикселей;
}

Эффект неона


Контур Эффект


Тиснение Эффект


Множественный Эффект тени


Результат:

Попробуй сам »

: элемент Bigger Text — HTML: язык разметки гипертекста

Устарело

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

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

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

Этот элемент не имеет других атрибутов, кроме глобальных атрибутов, общих для всех элементов.

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

Использование

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

HTML
  

Это первое предложение. Все это предложение написано более крупными буквами.

Результат

Использование CSS

font-size

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

CSS
  .bigger {
  размер шрифта: крупнее;
}  
HTML
  

Это первое предложение. Все это предложение написано более крупными буквами.

Результат

Этот элемент реализует интерфейс HTMLElement .

Примечание по реализации: До Gecko 1.9.2 включительно Firefox реализует интерфейс HTMLSpanElement для этого элемента.

Таблицы BCD загружаются только в браузере

Код размера шрифта HTML

В HTML размер шрифта задается с помощью CSS (каскадных таблиц стилей). Размер шрифта указывается с помощью свойства font-size.

Фактическое значение свойства font-size можно указать по-разному. Вы можете указать размер шрифта любым из следующих способов:

  • Абсолютный размер
  • Относительный размер
  • Фиксированный размер
  • Процент

Вариант 1: Абсолютный размер

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

Вот пример установки размера шрифта с использованием абсолютных размеров:

Абсолютный размер — xx-small

Абсолютный размер — x-small

Абсолютный размер — маленький

Абсолютный размер — средний

Абсолютный размер — большой

Абсолютный размер — x-большой

Абсолютный размер — xx-большой

Вариант 2: Относительный размер

Относительный размер позволяет установить размер шрифта относительно родительского элемента.Это означает, что разный текст с одним и тем же (относительным) значением может отображаться в разных размерах — даже на одной странице. Все зависит от родительского элемента текста. Возможны два значения: «меньше» и «больше».

Размер шрифта указан с использованием относительных значений — меньше

Размер шрифта указан с использованием относительных значений — больше

Вариант 3: значение длины

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

относительные значения:

  • em (размер шрифта соответствующего шрифта)
  • пр. (Высота по оси x соответствующего шрифта)
  • пикселей (пикселей относительно устройства просмотра)

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

  • дюйм (дюйм — 1 дюйм равен 2,54 сантиметра)
  • см (сантиметры)
  • мм (миллиметры)
  • pt (точки — точки, используемые CSS2, равны 1/72 дюйма)
  • шт (пик — 1 пик равен 12 баллам)

Примеры относительных значений

Размер шрифта указан в 1.2em

Размер шрифта указан как 1,4em

Размер шрифта указан как 1,8 мкм

<час />

Размер шрифта указан 2ex

Размер шрифта указан в 3ex

Размер шрифта указан в 4ex

<час />

Размер шрифта указан как 12 пикселей

Размер шрифта указан как 14 пикселей

Размер шрифта указан как 18 пикселей

Примеры абсолютных значений

Размер шрифта указан равным 0.12 дюймов

Размер шрифта указан как 0,18 дюйма

Размер шрифта указан как 0,25 дюйма

<час />

Размер шрифта указан как 0,35 см

Размер шрифта указан как 0,45 см

Размер шрифта указан как 0,6 см

<час />

Размер шрифта указан как 3,5 мм

Размер шрифта указан как 4,5 мм

Размер шрифта указан как 6 мм

<час />

Размер шрифта указан как 10 пунктов

Размер шрифта указан как 12 пунктов

Размер шрифта указан как 16pt

<час />

Размер шрифта указан равным 0.8шт

Размер шрифта указан как 1 шт.

Размер шрифта указан как 1,2 пикселя

Вариант 4: значения в процентах

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

Меньший размер шрифта указан с использованием процентных значений — 90%

Более крупный размер шрифта указан с использованием процентных значений — 150%

Дополнительные свойства шрифта

Вот другие свойства шрифта CSS, которые вы можете использовать в своем тексте:

Вот как указать размер шрифта сегодня »

Элемент Font и его атрибуты устарели. Этот атрибут устарел и не должен использоваться.Поддержка этого атрибута браузером ограничена, и его использование может привести к неожиданным результатам. Вместо этого используйте CSS для стилизации шрифтов. Чтобы узнать больше, см. Наше руководство по шрифтам и веб-типографике.

Атрибут CSS font-size можно использовать для изменения размера любого текстового элемента. Могут использоваться абсолютные единицы, такие как точка и пиксели, а также относительные единицы, такие как проценты и ems. Относительные размеры шрифта позволяют указать размер шрифта относительно окружающего текста. Например, это правило устанавливает шрифт элементов на 180% от размера окружающего текста, делая элементов немного больше поэтапно:

  em {font-size : 180%; }  

Итак, эта строка, в которой используется

  

Это отличная идея!

Выглядит так:

.largEm {font-size: 180%; margin: 0;} Это отличная идея !

Заголовки и относительные размеры

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

,

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

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

elements:

  h2 {font-size: 150%; }  

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

на пятьдесят процентов больше. Давайте посмотрим, как это работает на практике. Возьмем, к примеру, эти три заголовка:

   

Это обычный элемент h2

Этот h2 имеет размер 150%

Этот h2 имеет размер 300%

Первоначально вы можно было ожидать, что второй h2 будет на 50% больше первого, а последний — в три раза больше первого.Однако на данном этапе вы должны знать, что этого не произойдет.

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

Адам — ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.

как установить размер шрифта или размер текста в html или css

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

Согласно последним рекомендациям W3C, лучший способ изменить размер шрифта — использовать CSS. Мы лишь для краткости не будем использовать устаревший тег font . Хотя тег font устарел, он по-прежнему поддерживается большинством браузеров.

с использованием тега шрифта

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

  это текст, размер которого будет изменен.  

Вы можете использовать обозначение + num для увеличения размера и -num для уменьшения размера шрифта. Используйте только значение num , чтобы определить размер в абсолютном выражении. Значение num может находиться в диапазоне от 1 до 7.

Как упоминалось ранее, атрибут size не поддерживается в HTML5. Итак, вместо этого мы будем использовать CSS.

с использованием CSS для определения размера шрифта

В CSS свойство font-size устанавливает размер шрифта для любого тега HTML. Опять же, у вас есть возможность определить размер шрифта в относительном или абсолютном выражении. Кроме того, существует множество различных единиц измерения (например, px, em,%), которые вы можете использовать для определения самого размера.

Общий синтаксис CSS свойства выглядит примерно так:

 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | small | large |   длина   | начальная | наследование; 

Средний размер — значение по умолчанию.Значения от xx-small до xx-large задают абсолютный размер шрифта, хотя и относительно друг друга. Значения меньше и больше задают размер относительно размера родительского элемента.

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

Как видите, есть несколько способов указать размер шрифта. Давайте посмотрим на несколько примеров. Мы будем использовать html-тег div для примера, но вы должны иметь возможность использовать для этого любые теги и CSS-селекторы.

 div.a {font-size: 15px; } 
div.b {размер шрифта: x-small; }
div.c {размер шрифта: больше; }
div.d {размер шрифта: 1.45em; }
div.e {размер шрифта: 123%; }
div.f {font-size: inherit}

Будучи CSS, вы можете использовать внешние файлы CSS для определения этих значений.Если вы хотите указать их встроенными в тег HTML, вы можете использовать атрибут тега style для определения размера шрифта.

 
это текст внутри тега

с использованием javascript

Если вы хотите установить свойство с помощью JavaScript, вы можете использовать свойство fontSize для этого. Синтаксис показан ниже, где jsobject относится к фактическому объекту, для которого вы хотите установить размер шрифта.

  jsobject .style.fontSize = "16px" 

Итак, вы можете использовать HTML, CSS или JavaScript или их комбинацию, чтобы установить размер шрифта любого текста на вашей веб-странице.

CSS Font Size Tutorial — Как изменить размер текста в HTML

Используйте свойство CSS font-size , чтобы определить размер текста.

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

Это свойство принимает несколько типов значений:

  • Ключевые слова (ключевые слова абсолютного и относительного размеров),
  • Длина (например, пиксели (пиксели) и единицы em) и
  • Процентные значения.
  .container {
    размер шрифта: xx-large;
}
  

Возникает вопрос: какой тип значения выбрать и почему?

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

Значения ключевого слова

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

Ключевые слова абсолютного размера

В приведенном ниже коде используется ключевое слово абсолютного размера small для изменения размера текста HTML.

  .childElement {
    размер шрифта: маленький;
}
  

Есть больше вариантов ключевых слов абсолютного размера на выбор:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • xxx-large

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

Ключевые слова относительного размера

Ключевые слова относительного размера — еще один вариант ключевых слов, который следует рассмотреть. У вас есть два на выбор: меньше и больше .

  .parentElement {
    размер шрифта: меньше;
}
  

Размер шрифта элемента с ключевым словом relative-size составляет относительно — больше или меньше — размера шрифта его родительского элемента.

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

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

font-size принимает несколько различных значений длины. Мы рассмотрим три из них: пиксели (px) и единицы em и rem. Несмотря на ваш выбор, значение длины, которое вы используете, должно быть положительным.

  .parentElement {
    размер шрифта: 60 ​​пикселей;
}
  

Пикселей

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

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

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

EMs

Хотя вы можете думать о пикселях как о фиксированных, думайте о значениях em как о переменных.

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

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

Давайте конкретизируем эту идею.

Скажем, для родительского элемента установлено значение 30 пикселей, а для дочернего элемента — 2em.Тогда размер визуализируемого шрифта дочернего элемента составляет 60 пикселей (2 x 30 пикселей = 60 пикселей). Вы можете увидеть этот сценарий в приведенном ниже коде.

Значения

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

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

REM

Введите значения rem, которые были созданы для решения проблемы сложения ems.

Напомним, что значения em относятся к родительскому элементу. Напротив, значения rem относятся к размеру шрифта корневого (html) элемента.

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

В этом примере используется свойство font-size со значением rem.

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

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

Элемент с процентами ссылается на свой родительский элемент для определения размера шрифта. Процентное значение должно быть положительным.

Вот пример.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *