Как сделать шрифт больше в html: Размер текста

Содержание

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

Описание

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

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

От автора: приветствуем вас, читатели этого блога. Размер шрифта в 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 с нуля

Смотреть

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>

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

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

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

Раздел: Сайтостроение / HTML /

Шрифт (нем. Schrift от schreiben «писать») — это (согласно Википедии) графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определённого размера и рисунка.

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

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

С помощью тега <font> можно изменять стиль, цвет и размер текста. Основные атрибуты тега <font>:

color — устанавливает цвет текста.
face — изменяет шрифт в HTML (это как раз то, что нам нужно).
size — устанавливает размер букв.

С цветом, думаю, всё понятно. Также надеюсь, что вы помните, как использовать атрибуты тегов. Если нет, то см. здесь. К тому же изменять цвет текста мы уже умеем — я рассказал об этом здесь.

Теперь о том, как изменить шрифт текста в HTML. Для этого используется атрибут face. Если хотите, чтобы текст выводился одним определённым шрифтом, то сделать это можно так:


<font face="Arial">
Для этого текста установлен шрифт Arial
<font>

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

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


<p>
<font face="MyFont, Verdana, Arial">
Для этого текста установлен шрифт MyFont
<font>
</p>

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

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

На рисунке пример отображения текста несколькими шрифтами:

Примеры отображения разных шрифтов в браузере.

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

В теге <font> это можно сделать с помощью атрибута size. Размер может быть абсолютным и относительным.

Абсолютный размер устанавливается путём передачи в атрибут непосредственного значения от 1 до 7. Например, ниже мы устанавливаем для шрифта размер 3:


<font size="3">
Размер шрифта 3
<font>

Если установить атрибут size менее 1 или более 7, то браузер автоматически ограничит размер шрифта. Пример вы можете увидеть на рисунке ниже — несмотря на то, что мы попытались установить размер 8, браузер отобразил шрифт таким же размером, как и размер 7.

Примеры отображения шрифтов разных размеров в браузере.

Относительный размер устанавливается путём передачи в атрибут числа со знаком + (плюс). Например, вот такой HTML-код:


<p>
<font size="3">
Размер шрифта 3
<font>
</p>

<p>
<font size="+2">
Размер шрифта 5 (3 + 2)
<font>
</p>

<p>
<font size="5">
Размер шрифта 5
<font>
</p>

Здесь мы сначала установили шрифт размером 3. Затем увеличили этот шрифт на 2 (то есть сделали размер шрифта равным 5). Ну а далее, чтобы убедиться, что это всё правильно работает, снова установили абсолютный размер шрифта. На рисунке ниже видно, что это действительно работает так, как и задумывалось:

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

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

Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.

Как создать свой сайт

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

Fonts CSS HTML шрифты, цвет и размер текста

Свойства шрифта CSS определяют семейство шрифтов, смелость, размер и стиль текста.

Разница между засечками и шрифтами без засечек

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

В CSS существует два типа имен семейств шрифтов:

родовое семейство — группа семейств шрифтов с похожим видом (например, «засечка» или «однодисковая»)
семейство шрифтов — конкретная семья шрифтов (например, «Times New Roman» или «Arial»)

Generic family	Font family	Описание
Serif	Times New Roman Georgia	Шрифты с засечками имеют небольшие линии на концах на некоторых символах
Sans-serif	Arial Verdana	«Sans» означает без-эти шрифты не имеют линий на концах символов
Monospace	Courier New Lucida Console	Все одноместные символы имеют одинаковую ширину

Примечание: На компьютерных экранах шрифты без засечек считаются более удобными для чтения, чем шрифты с засечками.

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

Семейство шрифтов текста задается с помощью свойства font-family.

Свойство font-family должно содержать несколько имен шрифтов в качестве «резервной» системы. Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт и т. д.

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

Примечание: Если имя семейства шрифтов больше одного слова, оно должно быть в кавычках, например: «Times New Roman».

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

Пример

p {
font-family: «Times New Roman», Times, serif;
}

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

Стиль шрифта

Свойство font-style в основном используется для указания текста курсивом.

Это свойство имеет три значения:

normal — Текст отображается нормально
italic — Текст показан курсивом
oblique — Текст «опираясь» (косой очень похож на курсив, но менее поддерживается)

Пример

p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

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

Свойство font-size задает размер текста.

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

Всегда используйте правильные HTML-теги, например < h2 >-< H6 > для заголовков и < p > для абзацев.

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

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

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

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

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

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

Задать размер шрифта с пикселями

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

Пример

h2 {
font-size: 40px;
}

h3 {
font-size: 30px;
}

p {
font-size: 14px;
}

Совет: При использовании пикселов можно по-прежнему использовать инструмент «Масштаб» для изменения размера всей страницы.

Установить размер шрифта с em

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

Единица измерения размера em рекомендуется консорциумом W3C.

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

Размер можно вычислить от пикселов к 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, можно настроить размер текста во всех браузерах.

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

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

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

Пример

body {
font-size: 100%;
}

h2 {
font-size: 2.5em;
}

h3 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}

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

Вес шрифта

Свойство font-weight задает вес шрифта:

Пример

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

Отзывчивый размер шрифта

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

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

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

Пример

<h2>Hello World</h2>

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

Шрифт вариант

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

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

Пример

p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

Другие примеры

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

Все свойства шрифта CSS

Свойство	Описание
font	Задает все свойства шрифта в одном объявлении
font-family	Задает семейство шрифтов для текста
font-size	Задает размер шрифта текста
font-style	Задает стиль шрифта для текста
font-variant	Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами
font-weight	Определяет вес шрифта

Размер шрифта 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.

Типографика. Содержание · Bootstrap. Версия v4.0.0

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

Глобальные настройки

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

Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов font-family для всех ОС и девайсов.
Для более широкой и доступной шкалы шрифтов BS4 использует шрифт браузера по умолчанию font-size (обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера.
Используйте атрибуты $font-family-base, $font-size-base и $line-height-base как типографическую базу для <body>.
Задавайте глобальные цвета ссылок через $link-color и применяйте подчеркивание ссылок только в :hover.
Используйте $body-bg для задания background-color для <body> (по умолчанию стоит #fff).

Эти стили находятся в _reboot.scss, а глобальные переменные определены в _variables.scss. Задавайте $font-size-base в rem.

Заголовки

Все HTML-заголовки (<h2>—<h6>) доступны в BS4.

Заголовок	Пример
`<h2></h2>`	h2. Заголовок bootstrap
`<h3></h3>`	h3. Заголовок bootstrap
`<h4></h4>`	h4. Заголовок bootstrap
`<h5></h5>`	h5. Заголовок bootstrap
`<h5></h5>`	h5. Заголовок bootstrap
`<h6></h6>`	h6. Заголовок bootstrap

<h2>h2. Заголовок bootstrap </h2>
<h3>h3. Заголовок bootstrap </h3>
<h4>h4. Заголовок bootstrap </h4>
<h5>h5. Заголовок bootstrap </h5>
<h5>h5. Заголовок bootstrap </h5>
<h6>h6. Заголовок bootstrap </h6>

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

h2. Заголовок bootstrap

h3. Заголовок bootstrap

h4. Заголовок bootstrap

h5. Заголовок bootstrap

h6. Заголовок bootstrap

<p>h2. Заголовок bootstrap </p>
<p>h3. Заголовок bootstrap </p>
<p>h4. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h5. Заголовок bootstrap </p>
<p>h6. Заголовок bootstrap </p>

Настройка заголовков

Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.

Заголовок отображения С выцветшим вторичным текстом

<h4>
  Заголовок отображения
  <small>С выцветшим вторичным текстом</small>
</h4>

«Заголовок дисплея»

Традиционные заголовки созданы для «работы» «в глубине» вашей страницы. Если вам необходимо выделить заголовок, используйте «заголовок дисплея» — большего размера, слегка более вычурный.

Display 1

Display 2

Display 3

Display 4

<h2>Display 1</h2>
<h2>Display 2</h2>
<h2>Display 3</h2>
<h2>Display 4</h2>

«Лид»

Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p>
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Блочные текстовые элементы

Стили для обычных блочных элементов HTML5.

Тэг-выделитель для подсветки текста.

~~Удаленный текст.~~

~~Зачеркнутый.~~

Строка — дополнение к документу.

Подчеркнутая

Мелкий шрифт (типа нижний индекс).

Жирный текст.

Курсив.

<p>Тэг-выделитель для <mark>подсветки</mark> текста.</p>
<p><del>Удаленный текст.</del></p>
<p><s>Зачеркнутый.</s></p>
<p><ins>Строка - дополнение к документу.</ins></p>
<p><u>Подчеркнутая</u></p>
<p><small>Мелкий шрифт (типа нижний индекс).</small></p>
<p><strong>Жирный текст.</strong></p>
<p><em>Курсив.</em></p>

Классы .mark и .small дают стили, одинаковые с тэгами <mark> и <small>, но помогают избежать нежелательных семантических последствий, которые могут возникнуть с тэгами.

Также, свободно пользуйтесь тэгами <b> и <i> в HTML5. <b> создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а <i> выделяет цитаты, прямую речь, термины и т.д.

Классы текстовых утилит

Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.

Сокращения

Реализация элемента <abbr> нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.

Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>

Цитаты

Для цитат с другого источника в вашем документе. Оберните любой элемент в <blockquote> для создания цитаты.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Наименование источника

Добавьте <footer> для идентификации источника. Оберните имя источника в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Source Title</cite></footer>
</blockquote>

Выравнивание

Используйте текстовые утилиты, если необходимо изменить выравнивание блока цитат.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer>
</blockquote>

Списки

Без элементов стилизации

Удаляет свойство по умолчанию list-style и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Блочные

Удаляет у элементов списка значок слева и создает небольшой отступ margin с помощью сочетания классов .list-inline и .list-inline-item.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul>
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Описание и выравнивание

Выравнивайте термины и описания по горизонтали, используя предустановленные классы сеточной системы BS4 (или семантические миксины). Для более длинных терминов вы можете добавить класс .text-truncate чтобы «усечь» текст эллипсисом.

Списки описания

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Truncated term is truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Вложенность

Список вложенных определений: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>

  <dt>Euismod</dt>
  <dd>
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt>Truncated term is truncated</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt>Nesting</dt>
  <dd>
    <dl>
      <dt>Nested definition list</dt>
      <dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Отзывчивая «типографика»

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

Вот пример. Выбирайте какие угодно font-size и медиа-запросы.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

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 см.

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

size = " font size " > …

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

Прежде всего, вы можете указать размер текста на своей веб-странице с помощью атрибута ‘size’ в коде элемента HTML font .Если размер текста на веб-странице не определен, веб-браузер будет отображать текст с размером 3.

Значение, которое вы вводите для атрибута size , представляет собой число, представляющее любой из семи различных относительных размеров. Эти цифры от 1 до 7 соответственно. Вот результаты, которые вы получите, указав атрибут size :

This is Size 1. This is Size 2. This is Size 3. This is Size 4. This is Size 5. Это размер 6. Это размер 7.

 
 Чтобы применить выбранный размер шрифта, просто введите пару атрибут-значение:  size = " размер шрифта " 
 ... в свой тег   , где   размер шрифта   равно любому числу от 1 до 7. Пример:
 
   size = "4" > Ваш видимый текст идет сюда и будет выглядеть вот так.

Альтернативы

Другой способ обозначить размер текста — ввести число от 1 до 4, которое либо добавляет, либо вычитает из вашего базового шрифта размер .При отсутствии декларации basefont по умолчанию basefont имеет размер 3. Вводя значение «+1» для атрибута size , вы указываете, что ваш текст будет отображаться на один размер больше, что приравнивается к размеру 4. . Точно так же значение «+2» соответствует размеру шрифта 5. В другом направлении значение «-1» соответствует размеру 2, а «-2» соответствует размеру 1 (размер основного шрифта 3 — 2 = размер шрифта. 1). Многие редакторы WSYIWYG создают исходный код, используя эту систему изменения размера шрифта.Это должно помочь объяснить вещи, если вы когда-либо решили взглянуть на исходный код при использовании редактора WYSIWYG и впоследствии задались вопросом, о чем идет речь обо всех этих «+2» и «-1».

Еще один способ определения размера текста на веб-странице — использовать элементы стиля шрифта big и small . Эта система работает очень похоже на систему size = ± 1 в том, что использование одного набора тегов ... соответствует на один размер больше при использовании одного набора из ... тегов соответствует на один размер меньше.

Следовательно, если вы начинали с пустой веб-страницы без применения форматирования (размер основного шрифта по умолчанию 3), следующие три примера дадут идентичные результаты:

size = "4" > То же, что и он когда-либо было …

size = "+ 1" > Как всегда …

Как всегда ...

Вложение пары тегов ... один в другой и использование этого для форматирования текста имеет тот же эффект, что и визуализация текста на два размера больше или, по сути, , используя пару size = "+ 2" значение атрибута с элементом font .

Следовательно, следующие три примера дадут идентичные результаты:

size = "5" > Тройка снова и снова.

size = "+ 2 "> Тройка снова и снова.

Тройка снова и снова.
Многие редакторы WYSIWYG также используют эту систему изменения размера шрифта большой / маленький . Это один из недостатков использования этих программ веб-разработки «мгновенного пирога». Иногда они могут создавать очень раздутый и беспорядочный исходный код. Используя одну из этих программ, когда пользователь выделяет текст, который он хочет сделать действительно большим, а затем четыре раза нажимает кнопку make-text-large (довольно часто обозначается кнопкой a + в пользовательском интерфейсе), в результате исходный код будет выглядеть так:
Ваш действительно большой текст.
Это сделать намного проще, если просто указать:
Ваш действительно большой текст.

Создается еще более нелепый сценарий, когда пользователь WYSIWYG выделяет текст, который он хотел бы увеличить, а затем, например, трижды нажимает кнопку увеличить текст , но затем меняет он думает и решает, что какой-то ранее набранный текст будет лучше в исходном размере.Затем — часто не подозревая о том, что он действительно создает за кулисами в исходном коде — он возвращается, выделяет этот текст и трижды нажимает кнопку make-text-less , создавая кучу исходного кода, представляющего собой полный пустая трата места:

    Размер не будет применяться к этому тексту ..     ... в то время как этот текст будет иметь размер 6.

Это в точности то же самое, что просто ввести:

  Размер не будет применяться к этому тексту ...    ... в то время как этот текст будет отображаться с размером 6.

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

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

Слишком мелкий текст может быть трудно, а иногда даже невозможно прочитать (Arial size = «1»).

С другой стороны, слишком большой текст может вызвать эффект «крика». Это может отвратить посетителей от вашей веб-страницы, особенно если вся страница заполнена таким текстом (Arial size = «6»).

Большинство авторов веб-страниц обычно используют диапазон размера 3–5 для нормального чтения (в зависимости от стиля шрифта), но могут увеличивать размер шрифта для заголовков и заголовков.

Теперь перейдем к изучению того, как установить стиль шрифта на своей веб-странице …

См. Также:

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

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

Например, если вы предпочитаете темно-серый цвет черному в своей цветовой схеме, вам нужно изменить цвет шрифта по умолчанию для текста.Если вы работаете в СМИ, вы можете выбрать шрифт без засечек, который считается самой простой типографикой для чтения. Но если вы занимаетесь творчеством, вы можете выбрать декоративный шрифт, такой как Morris Troy. Это всего лишь несколько причин, по которым вы можете захотеть стилизовать шрифт на своем веб-сайте.

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

Как изменить тип шрифта в HTML

Чтобы изменить тип шрифта в HTML, используйте свойство CSS font-family.Установите для него желаемое значение и поместите его в атрибут стиля. Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу диапазона.

Вот как вы используете встроенный CSS. Встроенный CSS означает, что ваш HTML и CSS будут помещены вместе в основной раздел вашего HTML-документа. Так что технически вы будете менять шрифт «в HTML».

Раньше вы могли просто использовать тег шрифта для изменения стиля текста в HTML. Допустим, вы хотите изменить шрифт на Arial, размером 20 пикселей и красивым оранжевым цветом.Вы бы написали следующую строку HTML:

  
  Ваш текст здесь.

Однако этот тег шрифта устарел еще в 1998 году, поэтому он не работает с последней версией HTML, HTML5. На смену ему пришел гораздо более эффективный способ изменить внешний вид текста, а именно CSS. Форматирование текста CSS — это более легкая и гибкая альтернатива тегу шрифта HTML, и его несложно изучить.

Давайте перепишем приведенный выше пример, используя CSS, чтобы изменить тип шрифта абзаца. Важно отметить, что я использую CodePen, который использует шрифт Times New Roman в качестве шрифта по умолчанию. Я собираюсь добавить атрибут стиля к первому элементу абзаца, что означает, что стиль будет применен только к этому абзацу. Остальной абзац и заголовки на странице останутся в формате Times New Roman.

Вот HTML со встроенным CSS:

 
  
   
 Как изменить тип шрифта в HTML [встроенный CSS] 
  
  
 Это фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
  
 
   
 Объяснение 
  
  
 Поскольку я использую редактор CodePen, шрифт по умолчанию - Times New Roman. Это означает, что изменение гарнитуры абзаца потребует от меня использования атрибута стиля, который содержит свойство CSS font-family, установленное на «Arial."Другие элементы на странице не нацелены на встроенный CSS и поэтому остаются Times New Roman.

Вот результат:

См. Pen oNBMjeB Кристины Перриконе (@hubspot) на CodePen.

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

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

Вот код CSS:

 
  
  п {
  семейство шрифтов: Arial; 
 }

Вот HTML:

 
  
   
 Как изменить тип шрифта в HTML [Внутренний CSS] 
  
  
 Это фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
  
 
   
 Объяснение 
  
  
 Поскольку я использую редактор CodePen, шрифт по умолчанию - Times New Roman. Это означает, что для изменения гарнитуры всех абзацев на странице мне потребуется использовать селектор типа CSS и установить для свойства CSS font-family значение «Arial."Заголовки на странице останутся Times New Roman.

Вот результат:

См. Pen GRrBpyQ Кристины Перриконе (@hubspot) на CodePen.

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

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

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

Чтобы продолжить переписывание первого примера, в котором использовался устаревший тег шрифта, давайте изменим размер шрифта абзаца на 20 пикселей с помощью CSS. В этом примере я все еще собираюсь использовать CodePen, но загружу на страницу Bootstrap CSS. Это означает, что в дополнение к типу шрифта по умолчанию Helvetica размер шрифта по умолчанию для абзацев будет 16 пикселей, заголовок 2 — 32 пикселя, а заголовок 3 — 28 пикселей.

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

Вот HTML со встроенным CSS:

 
  
   
 Как изменить размер шрифта в HTML [встроенный CSS] 
  
  
 Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
  
 
   
 Объяснение 
  
  
 Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для текста и абзацев составляет 16 пикселей, h3s - 32 пикселя, а h4s - 28 пикселей. Шрифт по умолчанию - также Helvetica. Это означает, что изменение размера первого абзаца потребует от меня использования атрибута стиля, который содержит свойство CSS font-size, установленное на «20 пикселей."Другие элементы на странице не нацелены на встроенный CSS и поэтому сохраняют свои размеры по умолчанию.

Вот результат:

См. Ручка «Как изменить размер шрифта в HTML [встроенный CSS]» Кристины Перриконе (@hubspot) на CodePen.

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

Вот код CSS:

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

Вот HTML:

 
  
   
 Как изменить размер шрифта в HTML [внутренний CSS] 
  
  
 Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. 
  
 
   
 Объяснение 
  
  
 Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта по умолчанию для текста и абзацев составляет 16 пикселей, h3s - 32 пикселя, а h4s - 28 пикселей. Шрифт по умолчанию также Arial. Это означает, что изменение размера всех абзацев на странице потребует от меня использования селектора типа CSS и установки свойства CSS font-size на «20 пикселей». Заголовки на странице будут иметь размер по умолчанию.

Вот результат:

См. Ручка «Как изменить размер шрифта в HTML [внутренний CSS]» Кристины Перриконе (@hubspot) на CodePen.

Изменить размер шрифта в том же абзаце

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

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

Вот HTML со встроенным CSS:

 
  
   
 Как изменить размер шрифта в том же абзаце [встроенный CSS] 
  
  
 Это фиктивный текст. Это больше фиктивный текст.  Это более крупный текст.  Это более фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.
  
 
  
   
 Объяснение 
  
  
 Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта абзацев по умолчанию составляет 16 пикселей. Чтобы изменить размер шрифта текста в абзаце, я заключу текст в теги span. Затем я добавлю атрибут стиля, который содержит свойство CSS font-size, для которого задано значение, отличное от 16 пикселей. В этом примере он установлен на 22 пикселя.

Вот результат:

См. «Ручка» Как изменить размер шрифта в том же абзаце [встроенный CSS] Кристины Перриконе (@hubspot) на CodePen.

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

Вот код CSS:

 
  
  # больше {
  размер шрифта: 18 пикселей; 
 } 
  # меньше {
  размер шрифта: 14 пикселей; 
 }

Вот HTML:

 
  
   
 Как изменить размер шрифта в том же абзаце [внутренний CSS] 
  
  
 Это фиктивный текст.Это больше фиктивный текст.  Это меньший текст.  Это более фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
  
 
  
   
 Объяснение 
  
  
 Я использую редактор CodePen, но загружаю BootstrapCDN, поэтому размер шрифта абзацев по умолчанию составляет 16 пикселей. Чтобы изменить размер шрифта абзаца и текста внутри абзаца, я заключу текст в теги span и добавлю атрибуты ID как к абзацу, так и к элементу span.Затем я воспользуюсь селекторами идентификаторов и установлю для них разные размеры шрифта в разделе заголовка страницы.

Вот результат:

См. «Перо для изменения размера шрифта в том же абзаце» [внутренний CSS] от Кристины Перриконе (@hubspot) на CodePen.

Более подробно о свойствах и значениях, которые вы можете использовать для изменения размера текста, читайте в статье «Как изменить размер шрифта в CSS».

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

Чтобы изменить цвет шрифта в HTML, используйте свойство цвета CSS.Установите для него желаемое значение и поместите его в атрибут стиля. Затем добавьте этот атрибут стиля к элементу HTML, например к абзацу, заголовку, кнопке или тегу диапазона.

Используя тот же пример, что и выше, давайте теперь изменим цвет шрифта абзаца на оранжевый Lorax (шестнадцатеричный код цвета # FF7A59) с помощью CSS. В этом примере я собираюсь использовать редактор CodePen и не загружать Bootstrap CSS. Но если вы действительно хотите использовать эту структуру, цвет шрифта по умолчанию будет таким же (например, черный), как и сам процесс.

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

Вот HTML со встроенным CSS:

 
  
   
 Как изменить цвет шрифта в HTML [встроенный CSS] 
  
  
 Это фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
  
 
   
 Объяснение 
  
  
 Поскольку я использую редактор CodePen Editor, по умолчанию используется черный цвет шрифта. (Обычно это происходит независимо от того, какой инструмент или фреймворк вы используете для создания своих веб-проектов.) Это означает, что изменение цвета абзаца потребует от меня использования атрибута стиля, который содержит свойство цвета CSS, установленное на шестнадцатеричный цвет. код № FF7A59.Другие элементы на странице не предназначены для встроенного CSS и поэтому остаются черными.

Вот результат:

См. Ручка «Как изменить цвет шрифта в HTML» [встроенный CSS] Кристины Перриконе (@hubspot) на CodePen.

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

Вот код CSS:

 
  
  п {
  цвет: # FF7A59; 
 }

Вот HTML:

 
  
   
 Как изменить цвет шрифта в HTML [Внутренний CSS] 
  
  
 Это фиктивный текст.Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. 
  
 
   
 Объяснение 
  
  
 Поскольку я использую редактор CodePen Editor, по умолчанию используется черный цвет шрифта. Это означает, что изменение цвета всех абзацев на странице потребует от меня использования селектора типа CSS и установки свойства цвета CSS на шестнадцатеричный код цвета для оранжевого (# FF7A59).Заголовки на странице останутся черными.

Вот результат:

См. Ручка «Как изменить цвет шрифта в HTML» [внутренний CSS], автор — Кристина Перриконе (@hubspot) на CodePen.

Чтобы узнать, как изменить цвет фона текста, прочтите статью «Как изменить цвет текста и фона в CSS».

Как изменить шрифт в Div в HTML

Изменение шрифта в div ничем не отличается от изменения шрифта в элементе абзаца или диапазона.

«Div» в HTML — это просто элемент, который может разделить вашу веб-страницу на разделы, чтобы вы могли настроить таргетинг на них с помощью уникальных свойств CSS.

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

Вот код CSS:

 
  
  #example {
  семейство шрифтов: Arial; 
  размер шрифта: 20 пикселей; 
  цвет: # FF7A59; 
 }

Вот HTML:

 
  
   
 Как изменить шрифт в Div в HTML [Внутренний CSS] 
  
  
  
 Это фиктивный текст.Это больше фиктивный текст. Это текст меньшего размера, это скорее фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это больше фиктивный текст. Это скорее фиктивный текст. 
 
  
   
 Объяснение 
  
  
 Я использую редактор CodePen, поэтому тип, размер и цвет шрифта по умолчанию - Times New Roman, 16 пикселей и черный. Чтобы изменить все эти свойства раздела текста, я мог бы обернуть текст в div и добавить к элементу атрибут ID.Затем я могу использовать селектор идентификаторов и установить свойства font-family, font-size и font-color в разделе head страницы.

Вот результат:

См. Pen Как изменить шрифт в Div в HTML [Internal CSS] Кристины Перриконе (@hubspot) на CodePen.

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

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

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

: элемент 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 загружаются только в браузер

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

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

Атрибут font-size CSS может использоваться для изменения размера любого текстового элемента. Могут использоваться абсолютные единицы, такие как точка и пиксели, а также относительные единицы, такие как проценты и 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
В HTML мы можем изменить размер любого текста следующими способами:
Использование тега HTML
Использование встроенного атрибута стиля
Использование внутреннего CSS
Использование тега HTML
Примечание. HTML 5 не поддерживает атрибут Size шрифта, поэтому мы должны использовать атрибут встроенного стиля и внутренние параметры CSS для изменения размера текста.
Если мы хотим изменить размер текста с помощью тега Html, который должен отображаться на веб-странице, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко изменить размер любого текста:
Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать тег Html для изменения размера шрифта.
<Голова> <Название> Изменить размер текста с помощью тега HTML <Тело> JavaTpoint
Учебное пособие по HTML
Как изменить размер шрифта в HTML
Шаг 2: Теперь переместите курсор в начало текста, размер которого мы хотим изменить.Затем введите в этой позиции тег Html .
Однострочный текст и инструкции
Шаг 3: Затем мы должны закрыть тег шрифта в конце текста, размер которого мы хотим изменить.
Однострочный текст и утверждения
Шаг 4: Теперь нам нужно добавить атрибут тега шрифта с именем «size» . Итак, введите атрибут Size в начальный тег .И затем мы должны указать размер, который мы хотим использовать для текста. Мы можем указать значение размера от 1 до 7. Итак, введите число в атрибута размера , как описано в следующем блоке.
<Голова> <Название> Изменить размер текста с помощью тега HTML <Тело> JavaTpoint
Учебное пособие по HTML
Как к Изменять в Размер шрифта.
Шаг 5: И, наконец, нам нужно сохранить код Html в текстовом редакторе и запустить код. После выполнения мы увидим результат в браузере. На следующем снимке экрана показан вывод вышеуказанного HTML-кода:
.
Использование встроенного атрибута стиля
Если мы хотим изменить размер текста с помощью встроенного атрибута стиля, который должен отображаться на веб-странице, мы должны выполнить шаги, указанные ниже.Используя эти шаги, мы можем легко изменить размер текста.
Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать атрибут стиля для изменения размера текста.
<Голова> <Название> Изменить размер с помощью атрибута стиля <Тело> Эта страница поможет вам понять, как изменить размер текста / шрифта.И этот раздел поможет вам понять, как изменить размер текста или шрифта с помощью атрибута стиля.
Шаг 2: Теперь поместите курсор в начало текста, размер которого мы хотим изменить. Затем введите атрибут встроенного стиля в любом элементе. Здесь мы используем тег
(абзац):
Любой текст, шрифт которого мы хотим изменить
Шаг 3: На этом шаге мы должны указать размер.Итак, введите размер в свойстве font-size атрибута style.
Любой текст, шрифт которого мы хотим изменить
Шаг 4: Затем мы должны закрыть элемент в конце текста, размер которого мы хотим изменить.
Любой текст, шрифт которого мы хотим изменить
Шаг 5: И, наконец, сохраните код Html, который изменяет размер текста / шрифта с помощью атрибута стиля CSS.
<Голова> <Название> Изменить размер с помощью атрибута стиля <Тело> Эта страница поможет вам понять, как изменить размер текста / шрифта.
И этот раздел поможет вам понять, как изменить размер текста или шрифта с помощью атрибута стиля.
Проверить это сейчас
Вывод вышеуказанного кода показан на следующем снимке экрана:
Использование внутреннего CSS
Если мы хотим изменить размер текста или шрифта с помощью внутренней каскадной таблицы стилей, которая должна отображаться на веб-странице, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко изменить размер любого текста.
Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать внутренний CSS для изменения размера текста.
<Голова> <Название> Изменить размер с помощью внутреннего CSS <Тело> Эта страница поможет вам понять, как изменить размер текста или шрифта. В этом разделе мы использовали внутренний CSS для изменения размера текста.
Шаг 2: Теперь мы должны поместить курсор в тег заголовка документа Html, а затем определить стили внутри тега
Шаг 3: Теперь мы должны ввести определенный селектор элемента перед текстом, размер которого мы хотим изменить.
<Голова> <Название> Изменить размер с помощью внутреннего CSS <стиль> Тело { размер шрифта: 20 пикселей; } п { размер шрифта: xx-large; } <Тело> Эта страница поможет вам понять, как изменить размер текста или шрифта.
В этом разделе мы использовали внутренний CSS для изменения размера текста.
Проверить это сейчас
Вывод вышеуказанного кода показан на следующем снимке экрана:
Как изменить размер шрифта в CSS
Есть разные способы привлечь внимание к тексту на веб-странице. Вы можете сделать его, например, оранжевым. Вы можете полужирным шрифтом или подчеркнуть . Вы можете выделить одну фразу в предложении.
В дополнение к этим параметрам форматирования вы также можете изменить размер шрифта текста, чтобы привлечь внимание читателя и установить визуальную иерархию. В этом сообщении блога вы заметите, что заголовок (
) имеет самый большой размер шрифта. Далее идут мои элементы заголовка (
,
и
), все они больше, чем элементы
под ними. Таким образом, посетитель (вы) знает, где начинаются разные разделы.
Заголовки
HTML — не единственный способ изменить размер шрифта на вашем сайте. Допустим, вы хотите уменьшить или увеличить размер заголовка по умолчанию или изменить размер шрифта других элементов на странице. В этом случае вы можете изменить размер шрифта в CSS. Давайте рассмотрим процесс ниже.
Как изменить размер шрифта в CSS
font-size — это свойство CSS, которое управляет размером шрифта на веб-странице. Есть несколько различных значений, которые вы можете использовать для определения свойства font-size .Взгляните на приведенный ниже пример, который включает различные значения и единицы измерения, которые вы можете использовать в CSS.
См. Pen font-size: different values от Кристины Перриконе (@hubspot) на CodePen.
Эти значения предлагают разные подходы к установке размера шрифта на вашей веб-странице. Тот, который вы выберете, будет зависеть от потребностей и целей вашего сайта. Давайте подробнее рассмотрим эти значения, взвесив все за и против каждого.
Значения свойства Font-size для уменьшения и увеличения размера шрифта
В CSS размер шрифта можно указать с любым из следующих значений.Для каждого значения свойства я приведу пример его синтаксиса и краткое описание.
Ключевое слово абсолютного размера
элемент {font-size: small; }
Ключевые слова абсолютного размера основаны на размере шрифта по умолчанию. Чаще всего размер шрифта по умолчанию — средний (что соответствует 16 пикселям или 1em), хотя он может отличаться в зависимости от браузера и семейства шрифтов. Обратите внимание, что в HTML размер шрифта по умолчанию составляет 16 пикселей.
Ключевые слова абсолютного размера:
xx малый
x малый
малый
средний
большой
x большой
хх большой
xxx большой
Вот как каждый выглядит в браузере:
См. Pen font-size: absolute size от Кристины Перриконе (@hubspot) на CodePen.
Ключевые слова абсолютного размера позволяют легко установить текст определенного размера и создать иерархию шрифтов для вашей страницы. Однако они не позволяют пользователю изменять размер текста во всех браузерах, что делает его плохим выбором для доступного дизайна. Чтобы охватить всех пользователей, попробуйте ключевые слова относительного размера.
Ключевое слово относительного размера
элемент {размер шрифта: больше; }
Ключевые слова относительного размера устанавливают шрифт больше или меньше по отношению к размеру шрифта родительского элемента.Эти относительные размеры примерно основаны на соотношении ключевых слов абсолютного размера, описанных выше.
Итак, если родительский элемент имеет размер шрифта , большой , дочерний элемент с определенным относительным размером , меньший будет иметь размер шрифта , средний . Давайте посмотрим на код этого гипотетического.
См. Pen font-size: relative size Кристины Перриконе (@hubspot) на CodePen.
Обратите внимание, что я использовал селектор классов «.relative» для нацеливания на один h3 вместо того, чтобы использовать селектор типа, который был бы нацелен на оба h3.Вы можете узнать больше о селекторах CSS в нашем объяснении.
Ключевые слова относительного размера позволяют легко установить размер текста относительно окружающих элементов. Их преимущество перед ключевыми словами абсолютного размера состоит в том, что они позволяют пользователям изменять размер текста во всех браузерах, что делает его хорошим выбором для доступности.
Длина
Есть несколько значений длины, которые могут определять свойство font-size в CSS. Здесь мы сосредоточимся на трех наиболее распространенных: пикселях, em и rem.
Пикселей
элемент {font-size: 32px; }
Использование пикселей (пикселей) в качестве значения длины позволит вам точно установить размер шрифта, независимо от браузера, который использует посетитель. Вы можете точно указать количество пикселей по высоте, которое вы хотите, чтобы браузер отображал ваш текст (хотя результаты могут незначительно отличаться в зависимости от алгоритмов, используемых браузерами).
См. Pen font-size: px от Кристины Перриконе (@hubspot) на CodePen.
Однако фиксированный характер пикселей также является недостатком. Они не оптимизированы для всех устройств — CSS-Tricks обнаружил, что веб-сайты на iPad mini отображаются так же, как, например, веб-сайты на iPad, — и их длина недоступна. Поскольку пользователи не могут изменять размер шрифта в некоторых браузерах, вы можете использовать более инклюзивные и гибкие параметры.
Ems
элемент {font-size: 2em; }
Единица em устанавливает размер шрифта относительно размера шрифта родительского элемента.Таким образом, если задать для текста размер шрифта из 2em , размер этого текста будет вдвое больше размера окружающего его текста.
Установка размера шрифта в em-единицах идеально подходит для инклюзивного дизайна. Поскольку em — это относительная единица, пользователи могут изменять размер текста во всех браузерах.
Единственный недостаток — соединение ЭМС. Итак, скажем, элемент с размером шрифта 2em содержит еще один элемент . Этот вложенный элемент будет вдвое больше, или 4em.См. Код ниже.
См. Pen font-size: em Кристины Перриконе (@hubspot) на CodePen.
Рем
элемент {font-size: 2rem; }
Ремов — это относительная единица, как и ЭМС, но они не складываются. Это связано с тем, что em — единицы измерения относительно шрифта, то есть размер шрифта зависит от размера шрифта родительского элемента, в то время как rem основывается на корне. Это означает, что размер шрифта зависит от размера шрифта, используемого корневым элементом, или элемента в верхней части документа.
Скажем, я установил размер шрифта корневого элемента на 12 пикселей , чтобы любой текст в документе, не измененный CSS, имел размер 12 пикселей. Но я также хочу изменить размер шрифта элемента
, который похож на тот, который упомянут в примере выше. Давайте посмотрим на код ниже.
Обратите внимание, что вложенный элемент имеет тот же размер шрифта, что и другой элемент .
См. Pen font-size: rem Кристины Перриконе (@hubspot) на CodePen.
Процент
элемент {размер шрифта: 110%; }
Процентное значение устанавливает размер шрифта элемента относительно размера шрифта родительского элемента.
Скажем, элемент
, для которого установлено значение 36px , содержит элемент
и два элемента . Размер шрифта для элементов установлен на 50% и 200% соответственно.Тогда элемент со значением 50% будет иметь размер 18 пикселей, а элемент со значением 200% будет иметь значение 27px . Вот как этот код выглядит в действии:
См. Размер шрифта Pen: в процентах от Кристины Перриконе (@hubspot) на CodePen.
Размер адаптивного шрифта в CSS
Все значения свойств, описанные выше, имеют одну общую черту: они не реагируют. Если вы хотите, чтобы размер шрифта соответствовал требованиям для всех устройств и дисплеев, вы можете использовать единицу ширины области просмотра, сокращенную до vw.
элемент {размер шрифта: 10vw; }
Единица vw — другая относительная единица. Он не относительно родительского или корневого элемента, а относительно ширины области просмотра, а именно 1% области просмотра. Это означает, что если ширина окна просмотра составляет 100 см, 1vw = 1 см. Если ширина области просмотра 50 см, 1vw = 0,5 см и так далее.
Допустим, я хочу, чтобы размер шрифта моего абзаца составлял 10% от ширины окна браузера. Вот как выглядит код:
См. Размер шрифта Pen: vw от Кристины Перриконе (@hubspot) на CodePen.
А вот как выглядит текст при изменении размера области просмотра:
Максимальный размер шрифта в CSS
Устанавливая размер шрифта в виртуальных единицах, следите за тем, чтобы текст не стал слишком большим на больших экранах. К сожалению, в CSS нет свойства max-font-size, но вы можете предотвратить увеличение размера шрифта с помощью медиа-запросов.
Вам просто нужно использовать медиа-запрос в точке останова для определенного размера экрана и вернуть размер шрифта к заданному значению в пикселях.Скажем, я хочу вернуть размер шрифта к 30 пикселям, когда область просмотра превышает 1000 пикселей. Вот как выглядит код:
См. Pen font-size: vw с медиа-запросом Кристины Перриконе (@hubspot) на CodePen.
Категории: Разное

Как сделать шрифт больше в html: Размер текста | htmlbook.ru

font-size | htmlbook.ru

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

Версии CSS

Описание

Синтаксис

Значения

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

Браузеры

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

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

Используем CSS

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

Итог

PSD to HTML

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

Стиль шрифта

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

Пиксели

Проценты

EM

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

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

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

Fonts CSS HTML шрифты, цвет и размер текста

Разница между засечками и шрифтами без засечек

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

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

Пример

Стиль шрифта

Пример

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

Задать размер шрифта с пикселями

Пример

Установить размер шрифта с em

Пример

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

Пример

Вес шрифта

Пример

Отзывчивый размер шрифта

Пример

Шрифт вариант

Пример

Другие примеры

Все свойства шрифта CSS

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

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

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

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

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

Завершение

Типографика. Содержание · Bootstrap. Версия v4.0.0

Глобальные настройки

Заголовки

Настройка заголовков

«Заголовок дисплея»

«Лид»

Блочные текстовые элементы

Классы текстовых утилит

Сокращения

Цитаты

Наименование источника

Выравнивание

Списки

Без элементов стилизации

Блочные

Описание и выравнивание

Отзывчивая «типографика»

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

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

—

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

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

Пример

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

Пример

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

Пример

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