Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега <big> увеличивает текст на одну условную единицу. Допускается применение вложенных тегов <big>, при этом размер шрифта будет больше с каждым уровнем.
На размер шрифта влияет не только заданный атрибут size тега <font>, но и выбор гарнитуры шрифта. Шрифт
Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта
Arial.
Учитывайте эту особенность при выборе шрифта и его размеров. Для более
точного управления размером текста используйте стили.
Синтаксис
<big>Текст</big>Закрывающий тег
Обязателен.
Атрибуты
Для этого тега доступны универсальные атрибуты и события.
Аналог CSS
font-size
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег BIG</title> </head> <body> <p><big><big>Lorem ipsum dolor sit amet</big></big></p> <p><big>Lorem</big> ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. <big>Ut</big> wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>
Результат данного примера показан ниже.
Рис. 1. Вид текста при использовании тега <big>
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <basefont> предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега <font>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <head> или <body>, причем несколько раз. Это позволяет изменять вид шрифта для части документа.
Синтаксис
<basefont>Закрывающий тег
Не требуется.
Атрибуты
- color
- Устанавливает цвет текста.
- face
- Определяет гарнитуру шрифта.
- size
- Задает размер шрифта в условных единицах.
Валидация
Использование этого тега осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег BASEFONT</title>
</head>
<body>
<basefont face="Arial, Helvetica, sans-serif" size="4" color="maroon">
<p>Добро пожаловать на мою страничку, которая оформлена с использованием
тега BASEFONT</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид текста в браузере Internet Explorer 8
Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег
Тег <font> используется для указания параметров шрифта конкретного участка текста в HTML документе.
С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).
Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font.
Синтаксис
<font атрибуты>текст</font>Отображение в браузере
Внимание! Это слово было выделено с помощью тега font.
Пример использования тега <font> в HTML коде
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Изменение параметров шрифта с помощью тега font</title>
</head>
<body>
<div><font size="6" color="orange" face="Times New Roman">Внимание!</font> Это слово было выделено с помощью тега font.</div>
</body>
</html>Поддержка браузерами
Атрибуты тега <font>
| Атрибут | Значение | Описание |
|---|---|---|
| color |
RGB |
Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:
|
| face |
имя семейства шрифтов |
Семейство шрифтов. Можно указать несколько шрифтов через запятую. Будет использован первый доступный на компьютере пользователя шрифт. Приоритет слева направо (если не доступен первый, проверяется второй и т.д.). |
| size |
числовое значение |
Размер шрифта. Можно указать в абсолютном и относительном форматах.
|
Тег <font> также поддерживает глобальные HTML атрибуты.
CSS тег для увеличения размера шрифта
Существует ли какой-либо метод создания тега css, который увеличивает размер шрифта? Что-то вроде:
<style>
p {
font-size: 100%;
}
lrg {
font-size: +40%;
}
</style>
<p>Hi <lrg>Tom</lrg>!</p>
В приведенном выше примере размер текста по умолчанию равен 100%, но размер текста внутри тега равен 140% (100+40).
Есть ли способ получить подобные результаты??
cssПоделиться Источник undo 13 июня 2015 в 13:08
3 ответа
- HTML тег стиля эквивалентен » размер шрифта+2″
Каков новый способ style временного увеличения размера шрифта, а затем возврата к нормальному (без использования CSS или CSS лучше?). Я хочу вставить в свой текст еврейское слово, а для начинающих шрифт на иврите слишком мал. Я всегда хочу, чтобы он был больше текущего размера шрифта, а не…
- избегайте автоматического увеличения размера шрифта c#
6
Вы можете использовать em единиц:
span {
font-size: 1.4em; /* 40% bigger than the parent */
}<p>Hi <span>Tom</span>!</p>Поделиться Oriol 13 июня 2015 в 13:13
2
Правильный способ сделать это заключается в следующем:
<style>
p {
font-size: 100%; /* This is actually redundant as it does not change the font size */
}
.lrg {
font-size: 140%; /* 40% increase */
}
</style>
Тогда используйте его вот так:
<p>Hi <spanfar fa-copy"/> Поделиться
alesc
13 июня 2015 в 13:12
1
В дополнение к другим ответам рассмотрите возможность использования font-size: larger . Однако вы не можете случайным образом изобретать свои собственные новые теги HTML. Вот для чего нужны занятия :
/* Define a CSS class that makes the font larger */
.lrg { font-size: larger; }
<!-- Use a span tag with the new class -->
<p>Hi <span>Tom</span>!</p>
Поделиться Unknown 13 июня 2015 в 13:50
Похожие вопросы:
Динамическое изменение размера контейнера при изменении размера шрифта Я показываю каждое слово в предложении в отдельном div , используя inline-block с max-width из 120px . Когда я пытаюсь увеличить размер шрифта на родительском div, мой встроенный блок div...
Jquery для увеличения размера шрифта содержимого HTML в DIV Ниже приведен javascript, который я использовал для увеличения размера шрифта всего содержимого HTML в пределах #myContent.. странная вещь здесь заключается в том, что всякий раз, когда вызывается...
JScrollPane: отрегулируйте положение прокрутки после увеличения размера шрифта внутреннего текста Я увеличиваю размер шрифта внутреннего текста. Как я могу сохранить положение прокрутки после увеличения размера шрифта?
HTML тег стиля эквивалентен " размер шрифта+2" Каков новый способ style временного увеличения размера шрифта, а затем возврата к нормальному (без использования CSS или CSS лучше?). Я хочу вставить в свой текст еврейское слово, а для начинающих...
избегайте автоматического увеличения размера шрифта c# Я использую MasterPage и использую использование CSS на главной странице. Моя проблема заключается в его содержании страницы, у меня есть окно messgage, которое появляется в некотором состоянии,...
Существуют ли какие-либо встроенные методы в Java для увеличения размера шрифта? Существуют ли какие-либо встроенные методы в Java для увеличения размера шрифта?
Привязка ключа для увеличения / уменьшения размера шрифта в emacs В моем terminal (у меня есть терминатор ) я могу использовать комбинации клавиш Ctrl + и Ctrl - для увеличения / уменьшения размера шрифта. В emacs я могу сделать следующее, Чтобы установить высоту...
CSS Особенности Размера Шрифта У меня есть несколько конкретных вопросов о размере шрифта: Стандартизирован ли pt (I.E. 12pt)? Кажется, я где-то читал, что pt = 1/72 дюйма. Однако размер шрифта 24pt в photoshop значительно...
Преобразуйте атрибут размера шрифта HTML в атрибут размера шрифта CSS Мой вопрос в значительной степени дублирует вопрос от Convert font tag (атрибут размера) до css Я вижу, что ответы есть с 2014 года. Так что я не был уверен, что буду продолжать задавать там или...
Останавливает BottomNavigationView от увеличения размера шрифта элементов по щелчку мыши Поведение по умолчанию BottomNavigationView приводит к увеличению размера шрифтов элементов при нажатии на них, что приводит к усечению некоторых более длинных заголовков. Я хотел бы избежать...
HTML-теги. Изменение размера шрифта - Инструкция по применению
В нашей системе у вас есть возможность верстать текст на страницах при помощи основных HTML-тегов.
Для этого вам понадобятся страница, созданная с модулем «Редактируемая страница», «Периодика», «Каталог товаров» (только при редактировании текстового поля «Описание раздела» или «Описание» для позиции каталога), «Анкета» (только при редактировании формы «Помощь/Информация») и начальное понимание об оформлении при помощи тегов.
Внимание! Данная возможность в нашей системе не предоставляет возможности вставлять активное содержимое на страницу и менять ее дизайн и может быть использована только для оформления контента.
HTML-теги. Изменение размера шрифта. Шаг 1
Чтобы изменить размера шрифта, войдите при редактировании в режим HTML.
HTML-теги. Изменение размера шрифта. Шаг 2
Найдите слово/словосочетание/предложение/абзац, для которого вы хотите изменить размер.
HTML-теги. Изменение размера шрифта. Шаг 3
Вставьте тег «» (где после знака «=» надо указать, на сколько шагов увеличить размер шрифта) перед словом/словосочетанием/предложением/абзацем.
Внимание! Увеличение размера идет на один размерный шаг, чтобы сильнее увеличить размер, используйте несколько тегов.
HTML-теги. Изменение размера шрифта. Шаг 4
Сразу же после слова/словосочетания/предложения/абзаца вставьте тег «».
HTML-теги. Изменение размера шрифта. Шаг 5
Подтвердите изменение размера, нажав кнопку «Сохранить».
HTML-теги. Изменение размера шрифта
Если все действия были выполнены верно, то шрифт в выбранном отрезке текста будет увеличен.
Тег увеличения шрифта. Цвет шрифта HTML
От автора: приветствуем вас на страницах блога Webformyself. В этой статье я хотел бы ответить на вопрос, как задать шрифт в html. Кое-кто все еще делает это неправильным образом, поэтому очень важно разобраться с вопросом более тщательно.
Как задавали шрифт раньше
Ранее в html использовался специальный парный тег font, который выступил как контейнер для изменения параметров шрифта, таких, как гарнитура, цвет и размер. Сегодня такой подход является в корне неверным. Почему? Веб-стандарты определяют, что внешний вид страницы не должен прописываться в html-разметке. К тому же, тег поддерживается полноценно только в очень старой версии HTML – HTML 3.
Задание шрифта в html правильным образом
Сегодня для этой цели стоит использовать исключительно возможности css. Этот язык как раз и создан для того, чтобы определять через него внешний вид. К тому же в css намного больше свойств, которые влияют на внешний вид текста. Рассмотрим понемногу каждое из них:
Font-style. Определяет начертание текста. Принимает такие значения:
Font-variant. Свойство назначает, как нужно интерпретировать написание строчных букв. Имеет всего два значения:
Normal – обычное поведение.
Small-caps – все строчные буквы преобразовываются в заглавные, а их размер немного уменьшается по сравнению с обычным шрифтом.
Font-weight. Определяет жирность текста. Значение можно задавать ключевыми словами или числовым значением. Давайте рассмотрим все варианты:
Normal – обычный текст
Bold – текст с жирным начертанием
Bolder – будет выводиться жирнее, чем он выводится у родительского элемента.
Lighter – буквы получат меньше жирности, по сравнению с родителем.
Вот так все просто. Кроме этого, есть возможность задавать значение в виде чисел от 100 до 900, где 900 – самый жирный. К примеру, значению normal соответствует 400, а bold – 700.
К сожалению, большинство браузеров не распознают этих числовых значений и могут применять всего два значения – normal и bold. Для эксперимента я создал 9 абзацев и задал каждому разную жирность текста – от 100 до 900. Потом открыл эту веб-страничку в разных браузерах и ни один не отобразил разные начертания. Вывод: лучше не применяйте числовые значения.
Font-size. Это свойство задает размер букв. Размер можно задавать в различных относительных и абсолютных величинах. Чаще всего размер задается в пикселах, относительных единицах em и процентах. Если вы хотите подробнее ознакомиться с заданием размера в css, то почитайте эту , где все описано более подробно.
Font-family. Пожалуй, самое основное свойство, которое определяет семейство или конкретное имя используемого шрифта. Если вы используете конкретное название, то нужно убедиться, что заданный шрифт найдется на компьютерах всех пользователей. Для надежности через запятую нужно прописать альтернативный вариант или целое семейство. Шрифты подразделяются на такие семейства:
Каждое семейство подходит под разные потребности. Например, с помощью fantasy часто оформляют различные заголовки, а monospace используются для вывода машинного кода и т.д. Конкретнее узнать названия шрифтов вы можете, например, в текстовом редакторе или в фотошопе.
Сокращенная запись
Все то, что мы рассмотрели выше, можно очень легко записать по сути в одну строчку с помощью замечательного свойства font, которое собирает вместе все настройки. Записывать нужно в такой последовательности:
Font: font-style | font-variant | font-weight | font-size | font-family;
Font
:
font
-
style
|
font
-
variant
|
font
-
weight
|
font
-
size
|
font
-
family
;
Если какой-то параметр вам указывать не нужно, то он просто опускается. Обязательными здесь являются только размер и семейство шрифта, все остальное указывать необязательно, если в этом нет необходимости. Использование сокращенной записи позволяет сильно сократить код в css. Пользуйтесь ею, потому что это хорошая оптимизация для работы сайта.
Как задать шрифт в html разным элементам
Так, что-то мы сильно увлеклись описанием всех свойств для шрифта. Это очень важная информация, но как вообще его правильно задавать? Используйте нужные селекторы, чтобы дотянуться до нужных элементов. Дальше я предлагаю несколько примеров:
p a{
font-family: Verdana, sans-serif;
}
Для табличных данных задается много параметров шрифт: уменьшенные прописные буквы, жирное начертание, размер и название шрифта.
Кроме использования стандартных размеров и начертаний (гарнитуры) шрифтов,
можно определять шрифты для каждого текстового фрагмента с помощью специальных
тегов. Самый простой способ - использование так называемых физических стилей :
Для каждого тега физического стиля существует соответствующий закрывающий
тег, который отменяет дальнейшее применение стиля. Например, для тега закрывающим тегом является .
Ниже приведен пример программы и внешний вид различных физических стилей:
Физические стили ТIТLЕ>НЕАD>
ПолужирныйВ>
Курсив
Подчеркнутый
Вычеркнутый
Пишущая машинкаТТ>
Полужирный курсивВ>
Полужирный курсив подчеркнутый В>
Рис. 649. Физические стили
Внутри тега заголовка можно вставить тег физического стиля, чтобы модифицировать
весь заголовок или только некоторую его часть. Например, чтобы выделить
курсивом часть текста, определенного в качестве заголовка, можно использовать
следующую конструкцию:
Физические и логические стили ТIТLЕ>
НЕАD>
Это - модифицированный заголовок 2-го уровняН2>
Рис. 650. Изменение стиля шрифта части
заголовка
С помощью специального тега можно настроить шрифт для изображения текста: задать гарнитуру, размер
и цвет. Прежде всего, вы можете установить размер основного шрифта, который
используется в документе по умолчанию. тег основного шрифта имеет формат . Размер основного
шрифта можно установить от 1 до 7. Если не использовать этот тег, то размер
основного шрифта по умолчанию устанавливается равным 3.
тег устанавливает
размер текущего шрифта для отдельных фрагментов текста. На стили этот
тег не влияет. Диапазон возможных значений - от 1 до 7. Данный тег позволяет
также управлять размером текущего шрифта относительно основного. Для этого
используются символ + (чтобы увеличить) и символ - (чтобы уменьшить) размер
шрифта на заданную величину. Например, если размер основного шрифта установлен
равным 3, то тег устанавливает
размер текущего шрифта равным 5.
Для задания гарнитуры шрифта используется тег . Например:
Если этот тег не используется в вашем документе, то браузер будет применять
шрифт, установленный в его настройке. Поэтому текст на экране пользователя
может выглядеть совсем не так, как вы его представляли. Следует также
иметь в виду, что если назначенный вами шрифт не установлен на компьютере
пользователя, то браузер будет изображать текст шрифтом, установленным
по умолчанию.
Вы можете в теге указать через
запятую перечень шрифтов. В этом случае браузер будет использовать первый
найденный шрифт. Например, можно записать тег:
FACE="Arial, Sans Serif, Courier">
Обычно в перечне задают похожие шрифты. Рекомендуется назначать наиболее
популярные шрифты. При размещении на странице текстовой информации лучше
вообще не назначать название шрифта, полагаясь на стандартные настройки
браузера. Но тогда при разработке страницы следует также использовать
стандартные настройки браузера, чтобы синхронизировать свое восприятие
текста с возможным восприятием пользователя. В конце концов, вы создаете
страницу не для себя, а для читателей.
С помощью атрибута COLOR в теге можно задать цвет шрифта:
Аргумент атрибута COLOR представляет собой шестнадцатеричную запись кода
цвета (красной, зеленой и синей составляющей, иначе говоря, RGB-составляющей).
Следующая программа демонстрирует управление шрифтом:
Установка шрифтовТIТLE/НЕАD>
Шрифт Aria АБВГДЕЖЗИК
Шрифт CourierАБВГДЕЖЗИК
Шрифт SYMBOLАБВГДЕЖЗИК
Рис. 651. Использование
различных шрифтов
Заметим, что в теге можно использовать
несколько или все его возможные атрибуты. Например:
В математических формулах, а также для подстрочных замечаний часто применяются
индексы, которые отличаются от основного текста положением (чуть выше
или ниже) и размером. Для этой цели служат теги и соответственно для верхних
и нижних индексов.
ИндексыТIТLЕ> /НЕАD>
Пример использования индексов
(5+x2)x+3
a1 + a2+ a3
Подстрочные примечания 2
Рис. 832. Использование верхних и нижних
индексов
Кроме рассмотренных выше, имеются дополнительные теги форматирования
текстов:
- - выделение адресов электронной
почты, почтовых адресов и
номеров телефонов; - - выделение цитат;
, - запись текстов
программ, символьных констант;- - ввод текстов с клавиатуры.
В последних трех стилях используется моноширинный шрифт (обычно Courier).
Например, буквы I и Ж моноширинного шрифта занимают одинаковое место.
Использование моноширинных шрифтов обусловлено простой возможностью выравнивания
текста с помощью символов «пробел».
Отметим еще один момент. В теги управления шрифтом, как и в теги логических
стилей, можно вставлять атрибут ТITLE= "строка" ,
что позволяет привязать к тексту внутри этого тега всплывающую подсказку.
Аргументом атрибута TITLE является строка
подсказки. При остановке указателя мыши на выделенном слове или фразе
около указателя появится подсказка. С помощью этого приема можно расшифровывать
аббревиатуры, давать дополнительные пояснения и рекомендации пользователю.
Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font . По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.
Тег font применяется следующим образом:
Конструктор сайтов "Нубекс"
Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font :
Конструктор сайтов "Нубекс"
Здесь задается синий цвет для слова, обрамленного тегом font .
Но помимо параметра color, тег имеет и другие атрибуты.
Атрибуты тега FONT
Тег font имеет всего три атрибута:
- color - задает цвет текста;
- size - устанавливает размер текста;
- face - задает семейство шрифтов.
Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).
Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.
Рассмотрим применение этих атрибутов на нашем примере:
Меняем цвет шрифта при помощи HTMLКонструктор сайтов "Нубекс"
Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.
Задание цвета текста при помощи CSS
Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:
Меняем цвет шрифта при помощи CSSКонструктор сайтов "Нубекс"
Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».
От автора: приветствуем вас, читатели этого блога. Размер шрифта в html наряду с его цветом являются основными характеристиками текста, которые очень сильно влияют на восприятие информации, и как следствие на удобство сайта для пользователей. Это статья о том, как задать размер шрифта в html.
Как правильно менять размер текста
Дело в том, что html представляет очень скудные возможности в плане управления размером шрифта. Например, в нем есть теги small и big. Они позволяют вывести текст в чуть большего или меньшего размера, по отношению к обычному тексту на странице. Но таких возможностей мало, так как содержимое изменяется лишь немного, да и вообще использование таких тегов осуждается.
Так как увеличить размер шрифта в html правильно? Конечно, с помощью css. И не только увеличить, но и уменьшить, поскольку это тоже бывает необходимо.
Например, неважные слова на странице, вроде даты публикации страницы или другой служебной информации, обычно стараются сделать как можно меньше. Такому тексту можно определить шрифта меньший, чем у основного текста.
Заголовки же, наоборот, должны быть как минимум в 2-3 раза больше основного содержимого. Также нужно позаботиться о правильном отображении подзаголовков. Здесь правило такое: ни в коем случае размер h4 не должен быть больше, чем у h3.
В самом же контенте, как правило, не стоит использовать увеличение букв для привлечения внимания. Лучше выделить их каким-то фоном, дать им курсивное или жирное начертание, такое выделение намного лучше подойдет основному тексту и улучшит его восприятие. Ну да ладно, это было немного теории, а теперь переходим к сути.
Используем CSS
Нам необходимо свойство font-size. Оно позволяет задать размер букв в различных единицах измерения. В сайтостроении чаще всего прописывают пиксели и относительные единицы em, но давайте подробнее рассмотрим все варианты.
Ключевые слова. В css в качестве значения этому свойству можно прописывать ключевые слова smaller и larger, которые уменьшают и увеличивают шрифт по отношению к родительскому элементу. Можно сказать, что эффект будет аналогичным использованию тегов small и big.
Абсолютный размер с помощью ключевых слов. Другая группа ключей для этого свойства – xx-small, x-small, small, medium, large, x-large и xx-large позволяют задать абсолютное значение. Хотя на самом деле точно вычислить в пикселах его не получится, потому что многое будет зависеть от настроек браузеров. Можно с уверенностью сказать, что использование таких значений точно не сделает сайт кроссбраузерным.
Абсолютный размер с помощью единиц измерений. Наиболее часто шрифт задают в пикселах (px). В целом, это хорошее решение, но скорее всего вам придется немного менять величину букв на разных разрешениях. Например, на широких экранах увеличивать шрифт. Это можно сделать с помощью медиа-запросов, с помощью которых реализовывают адаптивный дизайн.
Относительный размер. По-хорошему, относительный вариант считается наилучшим способом указать размер шрифта в html, потому что он позволяет достичь идеальной читаемости и хорошего отображения текста на любых устройствах.
Относительную величину обычно задают с помощью 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, которому можно задавать как абсолютные, так и относительные размеры. Также на это могут косвенно влиять другие свойства, которые так или иначе преобразовывают текст. На этом я на сегодня с вами прощаюсь, а вы не забывайте заглядывать на наш блог в поисках новой информации по сайтостроению.
Форматированию текста в HTML в первую очередь следует уделить внимание, так как практически на любой странице большая часть информации представлена в текстовом виде. Кроме этого, изучив эту тему, Вы познакомитесь со значительной частью HTML тегов.
Группу тегов HTML, предназначенных для работы с текстом можно разделить на две основные подгруппы: теги физического форматирования и теги логического форматирования текста .
Теги физического форматирования физически воздействуют на текст - отвечают за выделение, размещение, оформление текста, которое необходимо для его корректного и одинакового отображения в браузерах.
Теги логического форматирования в большей степени несут смысловую нагрузку, и некоторые из них в основном предназначены для удобства работы поисковых систем.
К тегам физического форматирования относятся следующие теги:
Эти теги относятся к группе логического форматирования:
Абзац в HTML. Перенос текста
Важнейшим тегом физического форматирования текста является тег
Который предназначен для разбивки текста на параграфы.
Каждый тег
Создает новый параграф. При этом текст начинается с новой строки, и между параграфами образуется промежуток.
Атрибут align
тега
Позволяет позиционировать абзац по горизонтали, размещая его слева (align=
"left"
), справа (align=
"right"
), располагая по центру (align=
"center"
) или выравнивая по ширине (align=
"justify"
) окна браузера или родительского элемента.
Текст после тега
также начинается с новой строки. Но тег
осуществляет лишь перенос строк - он не образует промежутка между ними и его можно использовать внутри тега
Тег
наоборот запрещает перенос строк. Если длина строки превысит ширину окна браузера, то появится горизонтальная полоса прокрутки. В свою очередь тег разрешает перенос строки внутри тега
.
"center"
>
Текст разбит на параграфы.
При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.
Текст разбит на параграфы.
При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.
Заголовки в HTML. Размер текста
Заголовки в HTML представлены шестью тегами
Тегом
Тегами
и
можно выделить подтемы, крупные разделы - как правило их немного на страницы. Текст в таких заголовках уже не такой крупный, как в заголовках высшего уровня.
Использование заголовков в HTML "облегчает жизнь" не только пользователям в плане удобного и быстрого ориентирования на странице, но и упрощают работу поисковым роботам, позволяя выделить главное и второстепенное, что положительно влияет на оптимизацию страниц сайта.
Теги
Имеют атрибут align
, позволяющий выравнивать заголовок по горизонтали.
Использование закрывающего тега для всех заголовков HTML, является обязательным условием их применения!
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня - мелкий шрифт!
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня - мелкий шрифт!
Как видно из примера, преобразуя фрагмент текста в заголовок, мы влияем на его размер - увеличиваем или уменьшаем в зависимости от уровня заголовка.
Размер текста продолжение...
Теги
и тоже позволяют изменить размер текста: они соответственно увеличивают и уменьшают текущий размера шрифта на одну единицу.
В HTML размер шрифта задается в условных единицах от 1
до 7
. По умолчанию текст имеет средний размер шрифта, относящийся к 3
условной единице.
Теги и предназначены для отображения текста в виде верхнего и нижнего индекса соответственно.
При этом размер шрифта уменьшается на единицу.
И наконец рассмотрим тег
. Он предназначен не только для изменения размера текста, но и для задания таких его характеристик как цвет и указания семейства шрифтов.
Атрибут size
тега
задает размер шрифта в условных единицах от 1
до 7
, атрибут color
предназначен для задания цвета (Цвет можно задать двумя способами ), и атрибут face
определяет семейство шрифтов .
Увеличение
и уменьшение текущего размера шрифта на одну условную единицу.
Индекс верхний....... и Индекс нижний....... в HTML.
Изменим характеристики текущего шрифта "Arial, Helvetica, sans-serif"
>
при помощи тега font
Увеличение и уменьшение текущего размера шрифта на одну условную единицу.
Индекс верхний....... и Индекс нижний....... в HTML.
Изменим характеристики текущего шрифта при помощи тега font
Тег
предназначен для задания тех же свойств текста, что и тег
. Отличие в том, что тег
может располагаться как в теле, так и в голове документа. При этом он определяет свойства текста для всего документа, за исключением текста, расположенного в теге
.
Тег
поддерживается только браузером Internet Explorer. Его использование не рекомендовано. Впрочем как не рекомендуется и применение тега
!
Изучайте CSS
и работайте со стилями!
Гарнитура шрифта
По начертанию шрифт может отличаться постановкой - прямой или курсив, и насыщенностью (плотностью ) - светлый и жирный.
По умолчанию в браузере Вы видите светлый текст прямой постановки. Тег позволяет отобразить текст курсивом, а тег сделать его жирным.
Изменим начертание шрифта: его постановку и насыщенность!
Изменим начертание шрифта: его постановку и насыщенность!
Моноширинный шрифт
Многие среды разработки и редакторы исходного текста программ по умолчанию настроены на моноширинные шрифты. Это сделано для удобства работы программистов: улучшается удобочитаемость кода.
Шрифты этого семейства отличаются тем, что все буквы имеют одинаковую ширину
.
В HTML несколько тегов отображают текст моноширинным шрифтом.
Один из них - тег физического форматирования текста
Кроме этого, отображает текст в браузере со всеми пробелами между словами (по умолчанию браузеры воспринимают несколько пробелов, следующих друг за другом, как один
).
Остальные теги HTML, отображающие текст моноширинным шрифтом, относятся к тегам логического форматирования текста. Другое их назначение в том, что они предоставляют разного рода информацию, для поисковых систем и других программ, о заключенном в них тексте:
Тег
- отображает текст, который является программным кодом;
Тег
- обозначает текст, который набирают на клавиатуре или для названия клавиш;
Тег
- предназначен для отображения текста, который является результатом, выдаваемым программой или скриптом.
Програмный код:
FOR i=1 TO 20
Названия клавиш:
Alt+F1
Результат скрипта:
Hello, PHP!
Все пробелы между словами:
Один Два Три - Попробуйте сами!
Програмный код: FOR i=1 TO 20
Названия клавиш: Alt+F1
Результат скрипта: Hello, PHP!
Все пробелы между словами:
Один Два Три - Попробуйте сами!
Цитаты в HTML. Подчеркивание и перечеркивание текста
Тег предназначен для подчеркивания текста, а тег
для его перечеркивания. Это теги физического форматирования текста, и, кроме визуального оформления, никакой смысловой нагрузки они не несут.
В каких случаях Вы будете использовать эти теги - решать Вам!
Подчеркнутый и
перечеркнутый
текст - Все!
Подчеркнутый и перечеркнутый текст - Все!
Оформление цитат
Возможно, в процессе создания сайта, Вам понадобится вставить цитату на страницу.
Цитата - это дословная выдержка текста из какого-либо произведения. Желательно, чтобы цитируемый текст идентифицировался читающим лицом как вставленный. Для этого цитату необходимо выделить/оформить соответствующим образом.
В HTLM для этой цели существует специальный тег -
. Текст, заключенный в этот тег, оформляется следующим образом: сверху и снизу от основного текста образуются промежутки, а слева и справа отступы (примерно по 40 пикселей ).Как сказал Г. Ламене:
Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества.
Как сказал Г. Ламене:
Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества.
Несколько логических тегов
Мы не коснулись еще 3-х тегов, относящихся к группе логического форматирования: это теги ,
и .
Теги и
похожи. Первый из них предназначен для обозначения аббревиатуры, второй - акронима.
Акроним - это таже аббревиатура, только произносится он как единое слово, а не побуквенно.
Оба сокращения при просмотре в браузере подчеркнуты пунктирной линией, и к обоим желательно добавлять всплывающую подсказку - расшифровку сокращения (при помощи атрибута title ).
Тег применяется для заключения текста в кавычки. Этот тег можно использовать при оформлении цитат или при употреблении слов и выражений, которые имеют переносный смысл.
HTML -
это аббревиатура - произносится побуквенно.
"Научно-исследовательский институт"
>
НИИ
- это акроним. Акроним применяется как самостоятельное слово.
Близнецы похожи как две капли воды
.
HTML - это аббревиатура - произносится побуквенно.
НИИ - это акроним. Акроним применяется как самостоятельное слово.
Близнецы похожи как две капли воды.
Тег размера шрифта в html и другие теги, определяющие размер
От автора: при создании веб-страниц разработчики обязаны указывать какие-то размеры. Какие возможности в этом плане дают нам HTML и CSS?
Шрифт на странице
Тег размера шрифта в html – это разве что sub, sup и strong, которые так или иначе изменяют размер букв. Но html в этом плане дает очень маленькие возможности. Был, конечно, тег font, но сегодня он давно уже устарел. Если вам действительно интересно, как более гибко изменять размер шрифта, то нужно обратиться к возможностям CSS.
CSS свойство font-size
В CSS можно задать любую величину текста и это можно сделать не только в пикселях, но и в других единицах измерения. Чаще всего ее задают все-таки в пикселях, но можно и по-другому. Например, в процентах. За 100% берется шрифт у родительского элемента.
Например, если мы задаем величину текста в процентах какому-то абзацу и он лежит в теге body, то для него 100% будет равно размеру, заданному для body. Соответственно, если у тега
задан шрифт в 12 пикселей, то чтобы задать абзацу размер в 24 пикселя, нужно написать так:Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЭто если использовать проценты. Еще одна популярная относительная величина – em или высота шрифта у родительского элемента. Прописывание относительных величин лучше тем, что при изменении размера текста все поменяется пропорционально и будет хорошо отображаться.
Также регулировать величину можно с помощью ключевых слов larger и smaller, которые устанавливают соответственно больший или меньший размер текста, чем у родительского элемента.
selector{font-size: larger}
selector{font-size: larger}
Текст в элементе с нужным селектором станет больше, чем у родителя. Html теги размера существуют, но использовать их все же не рекомендуется. Это теги big и small. Заключение текста в них позволяет немного увеличить или уменьшить размер букв по сравнению с родительским элементом. Но сегодня лучше использовать css, если вам надо задать величину.
Размер основных элементов на веб-странице
В отношении задания размеров для остальных элементов все также: нужно использовать для этой цели css, а не html. Вообще в теге можно задать такие атрибуты, как width и height, но делать это неудобно. А самое главное – это не соответствует стандартам, которые определяют, что внешний вид и структуру нужно отделять друг от друга, вынося в отдельные файлы.
По этой причине для определения ширины и высоты элемента принято использовать css-свойства width и height.
<img width = "50" height = "50"> <!-- так не нужно прописывать ширину и высоту для элемента -->
img{
width: 50px;
height: 50px
}
<!-- А так – нужно -->
<img width = "50" height = "50"> <!-- так не нужно прописывать ширину и высоту для элемента -->
img{
width: 50px;
height: 50px
}
<!-- А так – нужно -->
Поскольку html – это язык разметки гипертекста, в нем нет тегов, которые каким-то образом серьезно влияли бы на внешний вид и размер блоков. Вообще, до тех пор, пока вы создаете сайт чисто на html, он выглядит ужасно, потому что этот язык не дает никаких толковых возможностей для оформления. Не в этом его предназначение, вот и все.
HTML лишь расставляет блоки на веб-странице, но сам формат этого языка не позволяет ему выступать удобным инструментом для задания величин. Чтобы как-то визуально повлиять на блок, нужно обрамлять его определенными открывающими и закрывающими тегами, что далеко не так удобно.
Для задания внешнего вида элементов сегодня нужно использовать css-правила, потому что именно они для этого предназначены. На сегодня все, а вы не забывайте подписаться на обновления блога, чтобы иметь под рукой много полезных материалов по сайтостроению.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееPSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть HTML: тег
В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.
Описание
Тег HTML определяет размер шрифта, цвет и внешний вид текста в документе HTML. Поскольку этот тег был удален в HTML5, рекомендуется использовать свойства CSS, такие как font, font-family, font-size и color, для форматирования текста в документе. Этот тег также обычно называют элементом .
Синтаксис
В HTML синтаксис тега выглядит следующим образом: ( пример форматирует текст как красный, использует семейство шрифтов Verdana, Geneva, без засечек и имеет относительный размер +1 )
<тело>
Ваш форматированный текст помещается сюда