Форматирование текста при помощи тегов html

Как в html задать шрифт: множество фишек и примеров, чтобы сделать ваш сайт удобочитаемым

Приветствую всех читателей данной статьи и подписчиков моего блога! Сегодняшнюю публикацию я хочу посвятить теме, без знаний которой ваши интернет-ресурсы не будут читабельными и привлекательными: «Как в html задать шрифт». Сама по себе тема является легкой, и я уверен, что вы быстро ее освоите.

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

Шрифты бывают разные

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

  • Helvetica;
  • Futura;
  • Garamond;
  • Bodoni;
  • Bembo;
  • Rockwell;
  • Times New Roman.

Их главные отличия состоят в отношении к определенным семействам. Существуют антиквенные (с засечками), рубленные, декоративные, курсивные и моноширинные семейства.

Также хочу подчеркнуть, что существует 5 единиц размерностей шрифтов.

Измерение Обозначение
px В пикселах
pt В пунктах
% В процентах
ex Высота конкретного символа
em Высота текущего символа

Начнем с языка html и его «творческих способностей»

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

Тег Предназначение
Задает жирное начертание буквам.
Акцентирует внимание на какой-то важной текстовой информации, выделяя текст жирным начертанием.
Задает курсивное начертание контента.
Делает акцент на какой-то важной текстовой информации, выделяя текст курсивом.
Размер выделенного фрагмента становится больше на 1 единицу.
Размер выделенного фрагмента становится меньше на 1 единицу.
Задает нижний индекс.
Задает верхний индекс.
Изменяет параметры цвета, шрифта и размера текста.

Хочу обратить ваше внимание на первые 4 единицы языка. В браузере пары b> и strong> также как i> и em> отображаются одинаково физически, но логически они не эквивалентны. Так, первые элементы пар, т.е. b> и i>, просто видоизменяют начертание шрифта. В это же время strong> и em> делают акценты на ключевых моментах текстового наполнения.

Чтобы закрепить полученные знания, я приведу пример кода, в котором использую перечисленные элементы html.

1 2 3 4 5 6 7 8 9 10 11 12
      

Название первого заголовка

Подзаголовок с красной буквы!

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

Название первого заголовка

Подзаголовок с красной буквы!

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

Напомню, что атрибут align = «center» задает отображение текста по центру.

А теперь пришел час css хвастаться своими умениями

Несмотря на целый набор разнообразных тегов, предусмотренных html, css является более удобным и гибким инструментом для оформления внешнего вида шрифтов.

Основные свойства, применяемые для форматирования контента, это font и его составляющие: text-decoration.

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

Свойство text-decoration помогает украсить текст дополнительными элементами, такими как подчеркивание (underline), зачеркивание (line-through), надчеркивание (overline), а также наследовать параметры родителя (inherit) или отменить все оформление (none).

А теперь настало время для второго примера. Я взял предыдущий код и оформил его при помощи средств css. Так, заголовок был оформлен с тенью (при помощи свойства text- shadow) и с контуром вокруг (border- color). При этом одно слово я сделал крупнее. Также мне захотелось использовать параметр opacity для задания прозрачности подзаголовку.

Пример html шрифта

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
     h1 < border-color: blue white; border-style: solid; font-family: Calibri, fantasy; color: gold; text-shadow: black 3px 0 9px; >h3 < font-size: x-large; opacity: 0.6; color: blue; text-decoration: underline; >em, strong 

Название первого заголовка

Полупрозрачный подзаголовок!

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

h1 < border-color: blue white; border-style: solid; font-family: Calibri, fantasy; color: gold; text-shadow: black 3px 0 9px; >h3 < font-size: x-large; opacity: 0.6; color: blue; text-decoration: underline; >em, strong

Название первого заголовка

Полупрозрачный подзаголовок!

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

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

Источник

HTML Tag

The tag defines the font characteristics. Size, color and typeface are defined by the size , color and face attributes.

Syntax

The tag comes in pairs. The content is written between the opening () and closing () tags.

Example of using HTML tag:

html> html> head> title>Title of the document title> head> body> p> font size="2" color="#1c87c9">Blue text font> p> p> font size="3" color="red">Red text, font size increased. font> p> p> font face="arial" color="#8ebf42">Green text, typeface changed. font> p> body> html>

Result

font tag example

CSS Styles

To change the text color, use the CSS color property instead of the color attribute. CSS font-family or font-face properties replace the face attribute, and instead of the size attribute, the CSS font-size property is used.

Example of changing the style of the text with CSS:

html> html> head> title>Title of the document title> head> body> p style="font-size:16px; color:#1c87c9;">Blue text. p> p style="font-size:18px; color:red;">Red text, font size increased. p> p style="font-size:18px; color:#8ebf42; font-family:arial;">Green text, typeface changed. p> body> html>

Attributes

Attribute Value Description
color rgb (x, x, x)
#xxxxxx
colorname
Sets the color of the text.
face font_family Sets the typeface.
size number Sets the size of the text.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
  • CSS font-size property sets the size of the font.
  • CSS font-weight property defines whether the font should be bold or thick.
  • CSS text-transform property controls text case and capitalization.
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

  • CSS color property describes the color of the text content and text decorations.
  • CSS background-color property sets the background color of an element.

Text layout styles for tag:

  • CSS text-indent property specifies the indentation of the first line in a text block.
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
  • CSS white-space property specifies how white-space inside an element is handled.
  • CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

  • CSS text-shadow property adds shadow to text.
  • CSS text-align-last property sets the alignment of the last line of the text.
  • CSS line-height property specifies the height of a line.
  • CSS letter-spacing property defines the spaces between letters/characters in a text.
  • CSS word-spacing property sets the spacing between words.

Источник

Теги управления шрифтом в HTML

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

Стиль Тэг
Полужирный (Bold)
Курсив (Italic)
Подчеркнутый (Underscore)
Вычеркнутый (Strike )
Пишущая машинка (Typewriter)
Мерцающий (только для браузера Netscape Navigator)

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

Рис. 649. Физические стили

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

Рис. 650. Изменение стиля шрифта части заголовка

С помощью специального тега можно настроить шрифт для изображения текста: задать гарнитуру, размер и цвет. Прежде всего, вы можете установить размер основного шрифта, который используется в документе по умолчанию. тег основного шрифта имеет формат . Размер основного шрифта можно установить от 1 до 7. Если не использовать этот тег, то размер основного шрифта по умолчанию устанавливается равным 3.
тег устанавливает размер текущего шрифта для отдельных фрагментов текста. На стили этот тег не влияет. Диапазон возможных значений — от 1 до 7. Данный тег позволяет также управлять размером текущего шрифта относительно основного. Для этого используются символ + (чтобы увеличить) и символ — (чтобы уменьшить) размер шрифта на заданную величину. Например, если размер основного шрифта установлен равным 3, то тег устанавливает размер текущего шрифта равным 5.
Для задания гарнитуры шрифта используется тег . Например:

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

FACE=»Arial, Sans Serif, Courier»>

Обычно в перечне задают похожие шрифты. Рекомендуется назначать наиболее популярные шрифты. При размещении на странице текстовой информации лучше вообще не назначать название шрифта, полагаясь на стандартные настройки браузера. Но тогда при разработке страницы следует также использовать стандартные настройки браузера, чтобы синхронизировать свое восприятие текста с возможным восприятием пользователя. В конце концов, вы создаете страницу не для себя, а для читателей.
С помощью атрибута COLOR в теге можно задать цвет шрифта:

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

Рис. 651. Использование различных шрифтов

Заметим, что в теге можно использовать несколько или все его возможные атрибуты. Например:

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

Рис. 832. Использование верхних и нижних индексов

  • — выделение адресов электронной почты, почтовых адресов и
    номеров телефонов;
  • — выделение цитат;
  • , — запись текстов программ, символьных констант;
  • — ввод текстов с клавиатуры.

В последних трех стилях используется моноширинный шрифт (обычно Courier). Например, буквы I и Ж моноширинного шрифта занимают одинаковое место. Использование моноширинных шрифтов обусловлено простой возможностью выравнивания текста с помощью символов «пробел».
Отметим еще один момент. В теги управления шрифтом, как и в теги логических стилей, можно вставлять атрибут ТITLE= «строка», что позволяет привязать к тексту внутри этого тега всплывающую подсказку. Аргументом атрибута TITLE является строка подсказки. При остановке указателя мыши на выделенном слове или фразе около указателя появится подсказка. С помощью этого приема можно расшифровывать аббревиатуры, давать дополнительные пояснения и рекомендации пользователю.

Источник

Читайте также:  METANIT.COM
Оцените статью