Как увеличить размер шрифта?
Для увеличения или уменьшения шрифта применяется стилевое свойство font-size, значение которого определяет размер текста. В качестве единиц можно применять rem; так, 1rem соответствует размеру шрифта всей веб-страницы. Таким образом, чтобы увеличить шрифт, указываем значение больше 1, например, 1.2rem, что увеличит размер текста на 20%. Ниже показано как задать размер основного текста всей веб-страницы через CSS (пример 1).
Пример 1. Использование font-size
Аналогично определяется размер шрифта и других элементов, в частности, заголовков. В примере 2 показано как задать размер заголовка .
Пример 2. Размер заголовка
Заголовок
Пример текста
См. также
- font-size
- Единицы размера в CSS
- Размер текста
- Свойства шрифта в CSS
Текст
Кроме того, размер текста можно задавать с помощью CSS, устанавливая его в пунктах, пикселах или других единицах. Существует еще один вариант — создать текст в графической программе и добавить его на веб-страницу в виде изображения.
Теги и можно повторять несколько раз подряд, тем самым увеличивая или уменьшая текст до нужных размеров (пример 1).
Пример 1. Использование тега
Текст Используя теги для увеличения текста, можно добиться больших результатов.
Результат данного примера показан на рис. 1.
» width=»412″ height=»187″ />
Рис. 1. Вид текста, оформленного с помощью тега
Среди перечисленных в таблице тегов преимущественно применяются теги , и . Они предназначены для создания заголовков к разделам и показывают их относительную важность. Так, по умолчанию текст внутри тега отображается в жирном начертании и размером 24 пунктов. Содержимое тега уже имеет размер 18 пунктов, а — 14 пунктов (пример 2).
Пример 2. Применение тегов , и
Заголовки Заголовок 1
Заголовок 2
Заголовок 3
Результат данного примера показан на рис. 2.
Рис. 1. Заголовки разного уровня на странице
HTML-теги. Изменение размера шрифта
В нашей системе у вас есть возможность верстать текст на страницах при помощи основных HTML-тегов.
Для этого вам понадобятся страница, созданная с модулем «Редактируемая страница», «Периодика», «Каталог товаров» (только при редактировании текстового поля «Описание раздела» или «Описание» для позиции каталога), «Анкета» (только при редактировании формы «Помощь/Информация») и начальное понимание об оформлении при помощи тегов.
Внимание! Данная возможность в нашей системе не предоставляет возможности вставлять активное содержимое на страницу и менять ее дизайн и может быть использована только для оформления контента.
HTML-теги. Изменение размера шрифта. Шаг 1
HTML-теги. Изменение размера шрифта. Шаг 2
Найдите слово/словосочетание/предложение/абзац, для которого вы хотите изменить размер.
HTML-теги. Изменение размера шрифта. Шаг 3
Вставьте тег « » (где после знака «=» надо указать, на сколько шагов увеличить размер шрифта) перед словом/словосочетанием/предложением/абзацем.
Внимание! Увеличение размера идет на один размерный шаг, чтобы сильнее увеличить размер, используйте несколько тегов.
HTML-теги. Изменение размера шрифта. Шаг 4
Сразу же после слова/словосочетания/предложения/абзаца вставьте тег « ».
HTML-теги. Изменение размера шрифта. Шаг 5
Подтвердите изменение размера, нажав кнопку «Сохранить».
HTML-теги. Изменение размера шрифта
Если все действия были выполнены верно, то шрифт в выбранном отрезке текста будет увеличен.
В help приведены самые необходимые на наш взгляд варианты использования 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, потому что это более наглядно смотрится в коде страницы, и так вы избежите неприятностей, которые могут возникнуть при относительном размере.
Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.