Как поменять шрифт текста в css

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

Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

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

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

Конструктор сайтов "Нубекс"

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

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

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

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

   .nubex 
Шрифты HTML-блока div класса nubex получают размер 14px при помощи свойства font size.
  

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

• large, small, medium — задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
• larger, smaller — задают относительный размер (меньше или больше относительно родительского элемента).
• 100% — задается относительный размер (в процентах относительно родительского). Например:

• 5ex — означает, что размер составит 5 высот буквы x от базового шрифта;
• 14pt — 14 пунктов;
• 22px — 22 пикселя;
• 1vw — 1% от ширины окна браузера;
• 1vh — 1% от высоты окна браузера;

Смотрите также:

• Курсив CSS
• Жирный текст CSS
• Тень текста
• Зачеркнутый текст HTML
• Подчеркнутый текст HTML
• Цвет шрифта HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

size=»3″> Размер шрифта 3

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

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

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

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

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

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

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

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

Типографика

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

На этой странице

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

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

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

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

Заголовки

Доступны все HTML-заголовки от до .

Заголовок	Пример
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading

h1>h1. Bootstrap headingh1> h2>h2. Bootstrap headingh2> h3>h3. Bootstrap headingh3> h4>h4. Bootstrap headingh4> h5>h5. Bootstrap headingh5> h6>h6. Bootstrap headingh6>

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

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

p class="h1">h1. Bootstrap headingp> p class="h2">h2. Bootstrap headingp> p class="h3">h3. Bootstrap headingp> p class="h4">h4. Bootstrap headingp> p class="h5">h5. Bootstrap headingp> p class="h6">h6. Bootstrap headingp>

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

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

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

h3> Заголовок отображения small class="text-muted">С выцветшим "второстепенным" текстомsmall> h3>

Отображение заголовков

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

Отображение 1
Отображение 2
Отображение 3
Отображение 4
Отображение 5
Отображение 6

h1 class="display-1">Отображение 1h1> h1 class="display-2">Отображение 2h1> h1 class="display-3">Отображение 3h1> h1 class="display-4">Отображение 4h1> h1 class="display-5">Отображение 5h1> h1 class="display-6">Отображение 6h1> 

Отображаемые заголовки настраиваются с помощью карты Sass $display-font-sizes и двух переменных: $display-font-weight и $display-line-height .

$display-font-sizes: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: 2.5rem ); $display-font-weight: 300; $display-line-height: $headings-line-height; 

«Лид»

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

Это ведущий абзац. Он выделяется из обычных абзацев.

p class="lead"> Это ведущий абзац. Он выделяется из обычных абзацев. 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 будут применять те же стили, что и .
• .text-decoration-underline будут применять те же стили, что и .
• .text-decoration-line-through будут применять те же стили, что и .

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

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

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

Сокращения

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

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

p>abbr title="attribute">attrabbr>p> p>abbr title="HyperText Markup Language" class="initialism">HTMLabbr>p>

Цитаты

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

A well-known quote, contained in a blockquote element.

blockquote class="blockquote"> p>A well-known quote, contained in a blockquote element.p> blockquote>

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

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

) с классом .blockquote-footer . Не забудьте также обернуть название исходной работы в .

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

figure> blockquote class="blockquote"> p>A well-known quote, contained in a blockquote element.p> blockquote> figcaption class="blockquote-footer"> Someone famous in cite title="Source Title">Source Titlecite> figcaption> figure>

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

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

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

figure class="text-center"> blockquote class="blockquote"> p>A well-known quote, contained in a blockquote element.p> blockquote> figcaption class="blockquote-footer"> Someone famous in cite title="Source Title">Source Titlecite> figcaption> figure>

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

figure class="text-end"> blockquote class="blockquote"> p>A well-known quote, contained in a blockquote element.p> blockquote> figcaption class="blockquote-footer"> Someone famous in cite title="Source Title">Source Titlecite> figcaption> figure>

Списки

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

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

• This is a list.
• It appears completely unstyled.
• Structurally, it’s still a list.
• However, this style only applies to immediate child elements.
• Nested lists:
  • are unaffected by this style
  • will still show a bullet
  • and have appropriate left margin

  ul class="list-unstyled"> li>This is a list.li> li>It appears completely unstyled.li> li>Structurally, it's still a list.li> li>However, this style only applies to immediate child elements.li> li>Nested lists: ul> li>are unaffected by this styleli> li>will still show a bulletli> li>and have appropriate left marginli> ul> li> li>This may still come in handy in some situations.li> ul>

  В линию

  Удалены маркеры из списка и левый марджин margin с комбинацией двух классов: .list-inline и .list-inline-item .

  • This is a list item.
  • And another one.
  • But they’re displayed inline.

  ul class="list-inline"> li class="list-inline-item">This is a list item.li> li class="list-inline-item">And another one.li> li class="list-inline-item">But they're displayed inline.li> ul>

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

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

  Списки описаний Список описаний идеально подходит для определения терминов. Термин

  И еще немного текста определения заполнителя.

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

  dl class="row"> dt class="col-sm-3">Списки описанийdt> dd class="col-sm-9">Список описаний идеально подходит для определения терминов.dd> dt class="col-sm-3">Терминdt> dd class="col-sm-9"> p>Определение термина.p> p>И еще немного текста определения заполнителя.p> dd> dt class="col-sm-3">Другой терминdt> dd class="col-sm-9">Это определение короткое, поэтому никаких лишних абзацев или чего-либо еще.dd> dt class="col-sm-3 text-truncate">Усеченный термин усеченdt> dd class="col-sm-9">Это может быть полезно, когда места мало. Добавляет многоточие в конце.dd> dt class="col-sm-3">Вложенностьdt> dd class="col-sm-9"> dl class="row"> dt class="col-sm-4">Список вложенных определенийdt> dd class="col-sm-8">Я слышал, Вам нравятся списки определений. Позвольте мне поместить список определений в Ваш список определений.dd> dl> dd> dl>

  Адаптивные размеры шрифта

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

  Sass

  Переменные

  В заголовках есть несколько переменных, определяющих размер и интервал.

  $headings-margin-bottom: $spacer * .5; $headings-font-family: null; $headings-font-style: null; $headings-font-weight: 500; $headings-line-height: 1.2; $headings-color: null; 

  Различные элементы типографики, описанные здесь и в Reboot, также имеют специальные переменные.

  $lead-font-size: $font-size-base * 1.25; $lead-font-weight: 300; $small-font-size: .875em; $sub-sup-font-size: .75em; $text-muted: $gray-600; $initialism-font-size: $small-font-size; $blockquote-margin-y: $spacer; $blockquote-font-size: $font-size-base * 1.25; $blockquote-footer-color: $gray-600; $blockquote-footer-font-size: $small-font-size; $hr-margin-y: $spacer; $hr-color: inherit; $hr-height: $border-width; $hr-opacity: .25; $legend-margin-bottom: .5rem; $legend-font-size: 1.5rem; $legend-font-weight: null; $mark-padding: .2em; $dt-font-weight: $font-weight-bold; $nested-kbd-font-weight: $font-weight-bold; $list-inline-padding: .5rem; $mark-bg: #fcf8e3; 

  Миксины

  Специальных миксинов для типографики нет, но Bootstrap действительно использует Адаптивный размер шрифта (RFS).

  Размер шрифта в CSS. Единицы измерения px, %, em

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

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

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

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

  font-size: 24px;

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

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

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

  Если же в этом случае задать размер шрифта 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.

  Читать:

  Как объединить несколько столбцов в один sql