Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег
Рейтинг: 3 из 5, голосов 12
14 октября 2019 г.
Тег <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>
</div>Поддержка браузерами
| Тег | |||||
| <font> | Да | Да | Да | Да | Да |
Атрибуты тега <font>
| Атрибут | Значение | Описание |
|---|---|---|
| color |
HTML hex colorname |
Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:
|
| face |
имя семейства шрифтов |
Семейство шрифтов. Можно указать несколько шрифтов через запятую. Будет использован первый доступный на компьютере пользователя шрифт. Приоритет слева направо (если не доступен первый, проверяется второй и т.д.). |
| size |
числовое значение |
Размер шрифта. Можно указать в абсолютном и относительном форматах.
|
Тег <font> также поддерживает глобальные HTML атрибуты.
by Lebedev
HTML — Справочник шрифтов — CoderLessons.com
Шрифты специфичны для платформы. У вас будет разный вид веб-страницы на разных компьютерах, работающих под управлением разных операционных систем, таких как Windows, Linux или Mac iOS. Здесь мы даем список шрифтов, которые доступны в различных операционных системах.
HTML тег <font> устарел в версии 4.0 и далее, и теперь все шрифты устанавливаются с использованием CSS. Вот простой синтаксис установки шрифта тела веб-страницы.
body {
font-family: "new century schoolbook";
}
or
<body style = "font-family:new century schoolbook;">
пример
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>Font Setting Using CSS</title>
</head>
<body>
<p>Change any of the style and try it.</p>
<div style = "font-family:verdana;">This is demo for font family</div>
<br />
<div style = "font-size:120%;">This is demo for font size</div>
<br />
<div style = "font-size:14pt;">This is demo for font size</div>
</body>
</html>Это даст следующий результат —
Шрифты для систем Microsoft
| Шрифт | Шрифт | Шрифт |
|---|---|---|
| Андале Моно | Arial | Arial Bold |
| Курсив Arial | Arial Bold Italic | Arial Black |
| Comic Sans MS | Comic Sans MS Bold | Новый Курьер |
| Курьер Нью Болд | Курьер Новый Курсив | Курьер New Bold Italic |
| Грузия | Грузия жирный | Грузия Курсив |
| Грузия полужирный курсив | Влияние | Lucida Console |
| Lucida Sans Unicode | Марля | Minion Web |
| Условное обозначение | Times New Roman | Times New Roman Bold |
| Times New Roman Italic | Times New Roman Жирный Курсив | Tahoma |
Требушет М. С. | Требушет М.С. Болд | Требушет М.С. Курсив |
| Требушет М.С. Полужирный курсив | Verdana | Вердана Болд |
| Вердана Курсив | Вердана Полужирный Курсив | Webdings |
Вы можете проверить примеры шрифтов здесь — Примеры шрифтов Microsoft
Шрифты для Macintosh Systems
Ниже приведен список шрифтов, поддерживаемых Macintosh System 7 и более поздними версиями.
| Шрифт | Шрифт | Шрифт |
|---|---|---|
| Американская машинка | Андале Моно | Apple Chancery |
| Arial | Arial Black | Кисть скрипт |
| Баскервиль | Большой Каслон | Comic Sans MS |
| Медная тарелка | Новый Курьер | Джилл Санс |
| Futura | Herculanum | Влияние |
| Люсида Гранде | Маркер Войлок | Optima |
Требушет М. | Verdana | Webdings |
| Palatino | Условное обозначение | раз |
| Osaka | Папирус | Times New Roman |
| текстильный | Цапф Дингбатс | Zapfino |
| Техно | Hoefler Text | Skia |
| Текстовые украшения Hoefler | столицы | Уголь |
| приспособление | песок |
Вы можете посмотреть примеры шрифтов здесь — Примеры шрифтов Mac
Шрифты для Unix систем
Ниже приведен список шрифтов, поддерживаемых большинством вариантов Unix System.
| Шрифт | Шрифт | Шрифт |
|---|---|---|
| чартер | чистый | курьер |
| Исправлена | Helvetica | Lucida |
| Люцида Яркая | Люсида Пишущая машинка | Учебник нового века |
| Условное обозначение | Терминал | раз |
| утопия |
Вы можете проверить примеры шрифтов здесь — Примеры шрифтов Unix
HTML ASCII коды
Существует 2 7
Другой набор символов не для представления HTML, но они предназначены для управления оборудованием.В следующих таблицах перечислены все 7-битные коды ASCII и их эквивалентные коды HTML-сущностей.
Если вы хотите увидеть эквивалентный HEX, OCT и расширенный набор кодов ASCII, обратитесь к следующей главе.
Метка | изменить размер, шрифт и цвет текста
Путь // www.yourhtmlsource.com → Текст → ТЕГ
Росс Шеннон
изменить размер, шрифт и цвет их текста. Он продолжал приносить больше вреда, чем пользы — по разным причинам — но главным образом потому, что это чрезвычайно неэффективный способ форматирования текста. Форматирование текста в CSS намного лучше, но знание этих устаревших методов все еще полезно.
Навигация по страницам:
Размер шрифта
| Лицо шрифта
· Ограничения по шрифтам
· Общие шрифты
| Цвет шрифта
Эта страница последний раз обновлялась 21 августа 2012 г.
Будущее:
С момента выхода HTML 4.
01 в 1998 году тег устарел. Это означает, что он больше не должен использоваться , поскольку в нашем распоряжении есть значительно превосходящие
К сожалению, с тех пор, так много лет назад, использование тега почти не уменьшилось. С этой целью Я настоятельно не рекомендую вам использовать тег вообще в вашем HTML . Он имеет очень строгие ограничения и может добавить несколько килобайт к размерам файлов каждого из ваших HTML-файлов. Более того, это просто не нужно.
CSS, с другой стороны, дает вам гораздо больший контроль над тем, как выглядит ваш текст, и почти ничего не увеличивает время загрузки. Если вам еще не приходилось иметь дело с таблицами стилей, не бойтесь — с ними действительно не так уж сложно разобраться. Прочитайте введение в таблицы стилей, а затем CSS и текст, и вы никогда не оглянетесь назад.
Дальнейшее чтение:
- » Уберите уже тег FONT!
- » Что не так с FONT FACE
- » За тегом FONT
Остальная часть этой страницы представляет собой просто описание того, как раньше работал тег .
Поскольку вы не будете его использовать, конечно, вы должны прочитать это чисто из интереса.
Размер шрифта
У вас есть два варианта установки размера текста: установить размер абсолютно или относительно . Абсолютные размеры находятся в диапазоне 1 и 7 и устанавливаются следующим образом:
size ="2">text
Размер шрифта по умолчанию для большинства браузеров установлен как 98 3
8. На большинстве сайтов размер текста будет примерно
2 или 3 .
Относительный размер означает, что размер текста будет изменяться относительно размера пользователя по умолчанию . Это лучше, потому что адаптируется к предпочтениям ваших пользователей — если они специально настроили свои браузеры для отображения текста большего размера, чем обычно, ваш текст будет увеличиваться пропорционально. У вас есть диапазон между +6 до +1 и -1 до -6 .
Плюс 1 и минус 1 будут теми, которые вы будете использовать чаще всего. В качестве ярлыков для этих двух размеров есть теги и , которые помогают.
Текст на один размер больше размера браузера по умолчанию.
Держитесь подальше от очень мелкого текста, так как его всегда трудно читать. Большой текст может загромождать страницу и вызывать слишком много прокрутки. В конце концов, ваш выбор размера шрифта будет во многом зависеть от того, сколько текста будет находиться на странице за раз. Это также связано с вашим выбором шрифта, о котором мы поговорим далее.
Font Face
Во-первых, если вы вообще не вносите никаких изменений, ваш текст, вероятно, будет выглядеть так: чтение с бумаги, а не с экрана компьютера. Итак, вы захотите изменить его на что-то более читабельное и красивое.
Посмотрите в папке со шрифтами (на ПК это C:\windows\fonts ).
У вас должно быть несколько десятков разных шрифтов. Некоторые из них подойдут для использования в Интернете, а другие вы будете использовать снова и снова. Одним из наиболее распространенных шрифтов, используемых в сети, является 9.0021 Arial (вариант Helvetica для Mac). Чтобы изменить текст на Arial или любой другой шрифт, используйте следующие теги:
face ="Arial">Ваш текст здесь.
Атрибут face был назван так из-за дизайна шрифта. более точно известны как гарнитуры .
Ограничения по шрифтам
Определенный шрифт будет отображаться на экране компьютера читателя только в том случае, если этот шрифт установлен на его компьютере. Итак, если у вас вся страница определена в Digital (» скачать) или что-то в этом роде, множество ваших зрителей просто получат страницу со скучным старым шрифтом Times New Roman. Чтобы обойти это, лучшая идея, конечно, использовать общие шрифты .
Существует набор распространенных шрифтов, которые, как вы можете быть более или менее уверены, появятся во всех системах ваших читателей. Атрибут face позволяет указать список шрифтов одновременно. Хорошей практикой является указание резервных шрифтов на случай, если что-то пойдет не так. Часы:
text
Смотрите — у вас есть пара шансов найти хороший шрифт, разделенный запятыми. Если первый недоступен, будет использован второй вариант и так далее. Вы можете продолжать длинный список, но на самом деле вам следует остановиться примерно после 3, потому что в противном случае вы тратите свое время впустую. Старайтесь, чтобы шрифты были похожи на , и попробуйте закончить их общим шрифтом , чтобы держаться подальше от Times.
Все шрифты принадлежат к определенному семейству шрифтов. Например, Arial относится к типу «без засечек».
Если все ваши варианты исчерпаны, а соответствия не найдено, последним средством является указание семейства шрифтов. Если до этого дойдет, будет использовано значение по умолчанию для этого семейства. Вы можете узнать все о семействах шрифтов и различиях между ними в веб-типографике.
Даже в этом случае большинство людей не увидят ваш крутой шрифт, поэтому, если вы хотите, чтобы этот шрифт использовался, сделайте его graphic в графическом редакторе и поместите графику на страницу в нужное место. Это осуждается в правильном веб-дизайне, но если вы только начинаете, это приемлемо, пока вы не научитесь правильно его обходить. Помните, конечно, что если у кого-то отключены изображения, он вообще не сможет прочитать этот текст. Убедитесь, что это не слишком важно, и всегда используйте атрибут alt.
исходная подсказка: если у вас есть текстовый процессор, такой как Word, попробуйте в нем пару шрифтов. Гораздо быстрее найти того, кого вы хотите.
Общие шрифты
Для вашего удобства вот группа списков самых популярных и распространенных шрифтов:
- Arial, Helvetica, без засечек
- Требушет MS, Arial, Helvetica, без засечек
- Вердана, Женева, без засечек
- Times New Roman, Times, с засечками
- Грузия, Гарамонд, Палатино, с засечками
- Courier New, Courier, моноширинный
Цвет шрифта
Для изменения цвета текста на странице для всю страницу , вы можете определить ее в теге . У меня есть полный учебник по телу здесь.
Чтобы изменить цвет небольшого блока текста или отдельного слова, вы должны снова использовать старый тег шрифта . Формат:
color ="#ff0000">text
Цвета в HTML должны быть определены как HEX-коды, которые представляют собой 6-значные коды, представляющие количество красного, зеленого и синий (RGB) в цвете.
Чтобы увидеть полную таблицу этих кодов, чтобы вы могли выбрать те, которые вам нравятся, см. Цветовую таблицу HEX.
текст
Более новые браузеры позволяют вместо этого дать цвету имя , как указано выше, но ваш выбор более ограничен. Чтобы увидеть диаграмму этих цветов, посмотрите на эту диаграмму.
HTML-тег шрифта — использование, синтаксис, примеры
❮ Пред. Следующий ❯
Тег определяет характеристики шрифта. Размер, цвет и шрифт определяются атрибутами размера, цвета и шрифта.
Тег является устаревшим тегом HTML. Вместо него используйте стили CSS (см. пример ниже).
Тег идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.
Пример использования тега HTML
:
<голова>
Название документа
<тело>
<размер шрифта="2" цвет="#1c87c9">Синий текст
Красный текст, размер шрифта увеличен.
Зеленый текст, шрифт изменен.
Попробуй сам »
Результат
Чтобы изменить цвет текста, используйте свойство цвета CSS вместо атрибута цвета. Свойства CSS font-family или font-face заменяют атрибут face, а вместо атрибута size используется свойство CSS font-size.
Пример изменения стиля текста с помощью CSS:
<голова>
Название документа
<тело>
Синий текст.
Красный текст, размер шрифта увеличен.
Зеленый текст, шрифт изменен.
Попробуй сам »
Как оформить тег
?Общие свойства для изменения визуального веса/выделения/размера текста в теге
:- Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
- Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
- Свойство CSS font-size устанавливает размер шрифта.
- Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
- Свойство CSS text-transform управляет регистром текста и регистром символов.
- Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Окрашивание текста в теге
:- Свойство CSS color описывает цвет текстового содержимого и оформления текста.
- Свойство CSS background-color устанавливает цвет фона элемента.
Стили макета текста для тега
:- Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
- Свойство CSS text-overflow указывает, как пользователь должен сигнализировать о переполненном содержимом, которое не отображается.
- Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
