Коды html шрифтов – Font-family, font-size, color и другие свойства css для задания параметров шрифта : WEBCodius — Вебджем.рф

Содержание

Шрифты, HTML-коды / примеры с кодами

Автор — РИМИДАЛ. Это цитата этого сообщения

Автор — О_себе_-_Молчу.

Шрифты, HTML-коды / примеры с кодами
В своих постах мы иногда используем разные шрифты (в панели спецкодов их 4),
некоторые используют до десятка-полутора шрифтов, но их намного-намного больше.
Дам вам СПИСОК ШРИФТОВ, где их более 100 и дам коды некоторых примеров.
_ШРИФТЫ + КОДЫ_
Monotype Corsiva
ВАШ ТЕКСТ
Georgia
ВАШ ТЕКСТ
MS Mincho
ВАШ ТЕКСТ
Comic Sans MS
ВАШ ТЕКСТ
Garamond
ВАШ ТЕКСТ
Wingding
ВАШ ТЕКСТ
Times New Roman
ВАШ ТЕКСТ
Courier New
ВАШ ТЕКСТ
_ОБЩИЙ ПРИНЦИП_
Задать размер текста можно двумя способами:
отличный от обычного (±1, ±2,..) или размер текста в рх
Код цвета можно задавать:
буквенным написанием или кодом-HTML

 ВАШ ТЕКСТ
ВАШ ТЕКСТ
Выбрать ШРИФТ можете из таблицы ниже.
Скопировав его, вставьте в код вместо слов «выбранный ШРИФТ».
__Список шрифтов для использования в__
__HTML-коде__
Большинство браузеров предпочитают, чтобы
имена шрифтов были написаны в нижнем регистре.

HTML шрифты. Работаем со шрифтами в HTML: гарнитура, размер, цвет

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы много говорили о том, что информация на сайте должна быть удобной, доступной, читабельной. Мы рассмотрели несколько HTML тэгов, позволяющих изменять структуру отображения текста HTML страницы в браузере. Теперь мы поговорим про работу со шрифтами в HTML. Замечу, что эта информация в большей степени ознакомительная, так как на данный момент для изменения параметров шрифтов в HTML следует использовать CSS.

HTML шрифты: работаем со шрифтами в HTML

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

Что может делать HTML со шрифтами?

Содержание статьи:

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

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

В любом HTML документе у шрифта есть три характеристики:

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

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

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

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

HTML тэги для работы со шрифтами

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

Второй тэг используется для изменения характеристик шрифта на определенном участке HTML документа. Тэг относится к парным HTML тэгам, а элемент FONT относится к строчным HTML элементам.

HTML атрибуты для работы со шрифтами

Оба тэга для работы со шрифтами в HTML имеют одинаковый набор HTML атрибутов: для них доступны все универсальные HTML атрибуты и атрибуты событий. Также у этих тэгов есть три уникальных атрибута:

Атрибут face. Данный атрибут позволяет изменить гарнитуру шрифта.
Атрибут color. Изменяет цвет шрифта в HTML документе.
Атрибут size. Позволяет изменить размер шрифта в документе.

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

Изменяем размер шрифта в HTML

Давайте попрактикуемся в изменение размеров шрифта в HTML. Отметим, что атрибут size может принимать семь значений в виде целых чисел от ноля до семи. Размер шрифта по умолчанию в HTML для любого браузера равен трем. Шрифт, для которого HTML атрибут size имеет значение равное единицы, является самым маленьким, семерки – самым большим. Давайте посмотрим это всё на примере, откройте любой удобный для вас редактор, например бесплатный редактор с подсветкой синтаксиса Notepad++ и создайте документ с кодом:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Изменяем размер шрифта в HTML</h2> font size=»1″ font size=»2″ font size=»3″ font size=»4″ font size=»5″ font size=»6″ font size=»7″ </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Изменяем размер шрифта в HTML</h2>

font size=»1″

font size=»2″

font size=»3″

font size=»4″

font size=»5″

font size=»6″

font size=»7″

</body>

</html>

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

Пример изменения размера шрифта в HTML

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

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Относительные размеры шрифта в HTML</h2> font size=»1″ font size=»-2″ font size=»2″ font size=»-1″ font size=»4″ font size=»+3″ font size=»6″ font size=»7″ font size=»+4 </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Относительные размеры шрифта в HTML</h2>

font size=»1″

font size=»-2″

font size=»2″

font size=»-1″

font size=»4″

font size=»+3″

font size=»6″

font size=»7″

font size=»+4

</body>

</html>

Этот документ ничем не отличается от предыдущего, мы точно так же использовали HTML абзацы, чтобы осуществлять перенос строки (хотя могли бы и использовать тэг , о котором мы говорили, когда разбирались с пробельными символами в HTML), изменился текст HTML заголовка, но это не главное, главное то, что мы изменили значение атрибута size и в браузере получили вот такую картину:

Пример изменения размера шрифта в HTML в относительных единицах

Мы видим, что шрифты в документе идут парами, это сделано специально, чтобы продемонстрировать, что значение size=”1” и size=”-2” дадут шрифт одинакового размера и так далее.

Изменяем цвет шрифта средствами HTML

Теперь поработаем с цветом шрифта средствами HTML. Сразу отметим, что HTML не позволяет использовать модель HSV для изменения цвета, поэтому у нас остается только модель RGB, либо использование имени цвета в HTML. Естественно, изменять цвет HTML шрифта мы будем при помощи атрибута color. Откройте удобный для себя редактор, например, JavaScript редактор Sublime Text 3:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Изменяем цвет шрифта в HTML</h2> <ul> <li>color=»red»</li> <li>color=»green»</li> <li>color=»blue»</li> <li>color=»blue»</li> <li>color=»blue»</li> </ul> </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Изменяем цвет шрифта в HTML</h2>

<ul>

<li>color=»red»</li>

<li>color=»green»</li>

<li>color=»blue»</li>

<li>color=»blue»</li>

<li>color=»blue»</li>

</ul>

</body>

</html>

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

Пример изменения цвета шрифта в HTML

Из примера видно, что цвет шрифта в HTML нам позволяет изменять атрибут color, для которого можно задавать значения либо при помощи модели RGB, либо при помощи имени цвета. Первый способ предпочтительней, так как за каждым именем скрывается определенный код модели RGB, в каждом браузере цвет, заданный по имени, может отображаться по-разному.

Изменяем гарнитуру шрифт в HTML

И наконец, HTML позволяет нам изменять гарнитуру шрифта при помощи специального атрибута face. Перечислять все доступные гарнитуры нет смысла, а, самое главное, нет возможности. Ниже мы приведем самые распространенные гарнитуры для самых популярных ОС. Отметим, что многие люди, говоря шрифт, имеют ввиду гарнитуру шрифта, в принципе они не далеки от истины, поскольку гарнитура – это самая сложная характеристика шрифта. Создайте документ в любом редакторе, рекомендую вам попробовать IDE NetBeans версии PHP:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <h2>Изменяем гарнитуру шрифта в HTML</h2> <ul> <li>face=»Arial»</li> <li>color=»green»</li> <li>color=»blue»</li> <li>face=»MS Comic Sans»</li> <li>face=»Tahoma»</li> <li> face=»Comic Sans MS, Tahoma, Arial»</li> </ul> </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Изменяем гарнитуру шрифта в HTML</h2>

<ul>

<li>face=»Arial»</li>

<li>color=»green»</li>

<li>color=»blue»</li>

<li>face=»MS Comic Sans»</li>

<li>face=»Tahoma»</li>

<li>

face=»Comic Sans MS, Tahoma, Arial»</li>

</ul>

</body>

</html>

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

Пример изменения гарнитуры шрифта в HTML

Обратите внимание на последний элемент списка. В HTML мы можем задать сразу несколько гарнитур для шрифта. Шрифт в документе будет принимать ту гарнитуру, которая указана первой в атрибуте face, если ОС или браузер не могут отобразить шрифт с указанной гарнитурой, то будет попытка отображения шрифта со второй гарнитурой и так далее. Если ни одной из гарнитур нет, то браузер отобразит текст с гарнитурой шрифта, заданной в настройках по умолчанию. И это всё работает до тех пор, пока пользователь не настроит свой браузер так, чтобы он отображал шрифт со своей собственной гарнитурой, не используя те значения, которые указаны в HTML или CSS.

Приоритет тэгов <basefont> и

Мы очень подробно рассмотрели тэг и коротко поговорим про <basefont> и приоритеты между этими тэгами. Отметим, что ни один современный браузер уже не понимают тэг <basefont>, поэтому пример, приведенный здесь, будет не информативным и для его работы вам необходимо будет найти старый браузер:

<!DOCTYPE html> <html lang=»ru-RU»> <head> <meta charset=»UTF-8″> <title>Шрифты в HTML</title> <link rel=»stylesheet» type=»text/css» href=»style.css» /> </head> <body> <basefont face=»Times New Roman» size=»7″ color=»Black»> <h2>Приоритет basefont и font</h2> <ul> <li>face=»Times New Roman» size=»1″ color=»Black»</li> <li> face=»Arial» color=»red» size=»5″</li> <li> face=»Times New Roman» color=»green» size=»5″</li> <li> face=»Verdana» color=»blue» size=»5″</li> <li> face=»Comic Sans MS» color=»#AAA» size=»5″</li> <li> face=»Tahoma» color=»#FF00FF» size=»5″</li> <li> face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″</li> </ul> </body> </html>

<!DOCTYPE html>

<head>

<title>Шрифты в HTML</title>

</head>

<body>

<h2>Приоритет basefont и font</h2>

<ul>

<li>face=»Times New Roman» size=»1″ color=»Black»</li>

<li>

face=»Arial» color=»red» size=»5″</li>

<li>

face=»Times New Roman» color=»green» size=»5″</li>

<li>

face=»Verdana» color=»blue» size=»5″</li>

<li>

face=»Comic Sans MS» color=»#AAA» size=»5″</li>

<li>

face=»Tahoma» color=»#FF00FF» size=»5″</li>

<li>

face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″</li>

</ul>

</body>

</html>

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

Далее мы приведем список шрифтов (приведем в виде HTML таблицы), которые доступны в самых популярных операционных системах.

HTML шрифты для Microsoft Windows

Эти шрифты поддерживают все компьютеры с операционной системой Windows

Имя гарнитуры	Имя гарнитуры	Имя гарнитуры
Andale Mono	Arial	Arial Bold
Arial Italic	Arial Bold Italic	Arial Black
Comic Sans MS	Comic Sans MS Bold	Courier New
Courier New Bold	Courier New Italic	Courier New Bold Italic
Georgia	Georgia Bold	Georgia Italic
Georgia Bold Italic	Impact	Lucida Console
Lucida Sans Unicode	Marlett	Minion Web
Symbol	Times New Roman	Times New Roman Bold
Times New Roman Italic	Times New Roman Bold Italic	Tahoma
Trebuchet MS	Trebuchet MS Bold	Trebuchet MS Italic
Trebuchet MS Bold Italic	Verdana	Verdana Bold
Verdana Italic	Verdana Bold Italic	Webdings

HTML шрифты для UNIX систем

Эти шрифты поддерживают все машины под управлением UNIX подобных ОС:

Имя гарнитуры	Имя гарнитуры	Имя гарнитуры
Charter	Clean	Courier
Fixed	Helvetica	Lucida
Lucida bright	Lucida Typewriter	New Century Schoolbook
Symbol	Terminal	Times
Utopia

HTML шрифты для Mac OS

Шрифты ниже поддерживаются всеми машинами, на которых установлена ОС Mac седьмой версии и выше.

Имя гарнитуры	Имя гарнитуры	Имя гарнитуры
American Typewriter	Andale Mono	Apple Chancery
Arial	Arial Black	Brush Script
Baskerville	Big Caslon	Comic Sans MS
Copperplate	Courier New	Gill Sans
Futura	Herculanum	Impact
Lucida Grande	Marker Felt	Optima
Trebuchet MS	Verdana	Webdings
Palatino	Symbol	Times
Osaka	Papyrus	Times New Roman
Textile	Zapf Dingbats	Zapfino
Techno	Hoefler Text	Skia
Hoefler Text Ornaments	Capitals	Charcoal
Gadget	Sand

CSS: шрифты

Смотрите также указатель всех приёмов работы.

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

Семейства шрифтов

После цвета шрифт — возможно, важнейшее свойство страницы. На этой странице я не буду демонстрировать никаких «трюков», но покажу ряд вариаций шрифтов, допустимых в CSS.

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов: serif, sans-serif, monospace, cursive и fantasy.

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


‘sans-serif’: обычные шрифты без засечек
`Arial, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Helvetica, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Verdana, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Trebuchet MS, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Gill Sans, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Noto Sans, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Arial Narrow, sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`sans-serif`	Съешь же ещё этих мягких французских булок да выпей чаю
‘serif’: обычные шрифты с засечками
`Times, Times New Roman, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Georgia, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Palatino, URW Palladio L, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`Bookman, URW Bookman L, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`New Century Schoolbook, TeX Gyre Schola, serif`	Съешь же ещё этих мягких французских булок да выпей чаю
`serif`	Съешь же ещё этих мягких французских булок да выпей чаю
‘monospace’: шрифты фиксированной ширины
`Andale Mono, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`Courier New, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`Courier, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`FreeMono, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`DejaVu Sans Mono, monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
`monospace`	Съешь же ещё этих мягких французских булок да выпей чаю
‘cursive’: шрифты, имитирующие почерк
`Comic Sans MS, Comic Sans, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`Bradley Hand, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`Brush Script MT, Brush Script Std, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`Snell Roundhand, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`URW Chancery L, cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
`cursive`	Съешь же ещё этих мягких французских булок да выпей чаю
‘fantasy’: декоративные шрифты, для названий и т.д..
`Impact, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`Luminari, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`Marker Felt, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`Trattatello, fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю
`fantasy`	Съешь же ещё этих мягких французских булок да выпей чаю

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

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

правило	serif	sans-serif
Стили
`font-style: normal`	Съешь же…	Съешь же…
`font-style: italic`	Съешь же…	Съешь же…
`font-style: oblique`	Съешь же…	Съешь же…
Насыщенность шрифта
`font-weight: 100`	Съешь же…	Съешь же…
`font-weight: 200`	Съешь же…	Съешь же…
`font-weight: 300`	Съешь же…	Съешь же…
`font-weight: normal`	Съешь же…	Съешь же…
`font-weight: 500`	Съешь же…	Съешь же…
`font-weight: 600`	Съешь же…	Съешь же…
`font-weight: bold`	Съешь же…	Съешь же…
`font-weight: 800`	Съешь же…	Съешь же…
`font-weight: 900`	Съешь же…	Съешь же…
Варианты
`font-variant: normal`	Съешь же…	Съешь же…
`font-variant: small-caps`	Съешь же…	Съешь же…
Растяжение
`font-stretch: ultra-condensed`	Съешь же…	Съешь же…
`font-stretch: extra-condensed`	Съешь же…	Съешь же…
`font-stretch: condensed`	Съешь же…	Съешь же…
`font-stretch: semi-condensed`	Съешь же…	Съешь же…
`font-stretch: normal`	Съешь же…	Съешь же…
`font-stretch: semi-expanded`	Съешь же…	Съешь же…
`font-stretch: expanded`	Съешь же…	Съешь же…
`font-stretch: extra-expanded`	Съешь же…	Съешь же…
`font-stretch: ultra-expanded`	Съешь же…	Съешь же…

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

CSS-шрифты

Шрифт в CSS — это ресурс, содержащий визуальное представление символов. На самом простом уровне он содержит информацию, которая сопоставляет коды символов с фигурами (называемые глифами), представляющие эти символы.

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

Ресурсы шрифтов могут быть установлены локально на устройстве, в котором работает браузер. Для локальных ресурсов шрифта описательная информация может быть получена непосредственно из ресурса шрифта (например, из файла arial.ttf). Для загружаемых ресурсов шрифтов, также называемых веб-шрифтами, описательная информация включена со ссылкой на ресурс шрифта (например, для шрифта Poiret One).

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

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

Базовые свойства CSS-шрифтов

1. Семейство шрифтов: свойство font-family

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

Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.

Свойство наследуется.

font-family
Значения:
family-name	Название (имя) семейства шрифтов, например, `Times`, `Courier`, `Arial`. Рекомендуется указывать вместе с базовым семейством.
generic-family	Базовое семейство. CSS определяет пять базовых семейств шрифтов: Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia) Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono) Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Аллегорические шрифты (Western, Woodblock, Klingon)
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-family: "Times New Roman", Georgia, Serif;
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: inherit;
font-family: initial;

2. Насыщенность шрифта: свойство font-weight

Свойство font-weight задаёт насыщенность шрифта.

Свойство наследуется.

font-weight
Значения:
`normal`	Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400.
`bold`	Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700.
`bolder`	Насыщенность шрифта будет больше, чем у предка.
`lighter`	Насыщенность шрифта будет меньше, чем у предка.
`100, 200, 300, 400, 500, 600, 700, 800, 900`	Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: inherit;
font-weight: initial;

Рис. 1. Свойство font-weight

3. Ширина шрифта: свойство font-stretch

Свойство font-stretch выбирает нормальное, сжатое или расширенное начертание символа из семейства шрифтов.

Свойство наследуется.

Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого до самого широкого:

font-stretch
Значения:
`ultra-condensed`	Указывает на наиболее сжатый шрифт.
`extra-condensed`	Указывает на второй по сжатости шрифт.
`condensed`	Указывает на сжатый шрифт.
`semi-condensed`	Указывает на немного сжатый шрифт.
`normal`	Значение по умолчанию.
`semi-expanded`	Слегка расширенный шрифт.
`expanded`	Расширенный шрифт.
`extra-expanded`	Второй по расширенности шрифт.
`ultra-expanded`	Максимально расширенный шрифт.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: inherit;
font-stretch: initial;

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

Рис. 2. Свойство font-stretch

4. Начертание шрифта: свойство font-style

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

Свойство наследуется.

font-style
Значения:
`normal`	Значение по умолчанию, устанавливает для текста обычное начертание шрифта.
`italic`	Выделяет текст курсивом.
`oblique`	Устанавливает наклонное начертание шрифта.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: inherit;
font-style: initial;

Рис. 3. Свойство font-style

5. Размер шрифта: свойство font-size

Свойство font-size указывает желаемую высоту глифов из шрифта.

Свойство наследуется.

font-size
Значения:
absolute-size	`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`. В качестве стандартного размера принимается `medium`. В CSS1 предложенный коэффициент масштабирования между соседними индексами составлял 1.5, что для пользователя оказалось слишком большим. В CSS2 предложенный коэффициент масштабирования для экрана компьютера между смежными индексами составлял 1.2, что все еще создавало проблемы для небольших размеров. Новый коэффициент масштабирования варьируется между каждым индексом, чтобы обеспечить лучшую читаемость.
relative-size	`smaller`, `larger`. Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для `xx-small` и `xx-large`.
длина	Размер шрифта устанавливается с помощью положительных значений единиц длины, например, `px`, `em`, как целых, так и дробных.
`%`	Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью `em` эквивалентно процентному значению.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
font-size: 14px;
font-size: 0.8em;
font-size: 80%;
font-size: inherit;
font-size: initial;

Значения absolute-size
`xx-small`	`x-small`	`small`	`medium`	`large`	`x-large`	`xx-large`
Коэффициент масштабирования
3/5	3/4	8/9	1	6/5	3/2	2/1	3/1
HTML заголовки
h6		h5	h5	h4	h3	h2
HTML размер шрифта
1		2	3	4	5	6	7

6. Относительный размер шрифта: свойство font-size-adjust

Для любого заданного размера шрифта явный размер и четкость текста варьируется в зависимости от шрифта. Для таких шрифтов, как латиница или кириллица, которые различают прописные и строчные буквы, относительная высота строчных букв по сравнению с их прописными аналогами является определяющим фактором удобочитаемости. Это обычно называют значением аспекта. Точно определенный, он равен x-height шрифта, разделенной на размер шрифта.

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

Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.

Свойство наследуется.

Рис. 4. Термины в типографике

font-size-adjust
Значения:
`none`	Не сохраняет `x-height` шрифта.
число	Задает значение аспекта, используемое в приведенных ниже расчетах для расчета скорректированного размера шрифта: `c = (a / a ') s` где: `s` = значение размера шрифта `a` = значение аспекта, указанное в свойстве `font-size-adjust` `a '` = значение аспекта фактического шрифта `c` = скорректированный размер шрифта для использования Отрицательные значения недействительны.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис:

font-size-adjust: none;
font-size-adjust: 0.7;
font-size-adjust: inherit;
font-size-adjust: initial;

Как отображается текст в каждом из этих сравниваемых шрифтов, показано ниже, столбцы показывают текст, отображаемый в Verdana, Futura и Times. Одно и то же значение размера шрифта используется для ячеек в каждой строке, и для отображения различий по x-height включены красные линии. В верхней половине каждая строка отображается в том же значении размера шрифта. То же самое верно и для нижней половины, но в этой половине также устанавливается свойство font-size-adjust, чтобы фактический размер шрифта регулировался таким образом, чтобы сохранить x-height для каждой строки. Обратите внимание, что небольшой текст остается относительно разборчивым в каждой строке в нижней половине.

Рис. 5. Текст с использованием и без использования font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

Свойство font за исключением описанного ниже, является сокращенным свойством для установки font-style, font-variant, font-weight, font-stretch, font-size/line-height, font-family. Также могут быть включены значения для свойства font-variant, которые поддерживаются CSS 2.1 — normal или small-caps.

Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust, font-kerning, все подсвойства font-variant и настройки шрифтов, за исключением font-synthesis. Затем этим свойствам присваиваются те значения, которые указаны в свойстве font. Для свойства font-size-adjust невозможно установить значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуальное свойство. Если явное значение какого-либо свойства не нужно, то оно опускается.

Свойство наследуется.

Синтаксис

font: 12pt/14pt sans-serif;
font: 80% sans-serif;
font: x-large/110% "new century schoolbook", serif;
font: bold italic large Palatino, serif;
font: normal small-caps 120%/120% fantasy;
font: condensed oblique 12pt "Helvetica Neue", serif;

Следующие значения относятся к системным шрифтам:
caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
icon — шрифт, используемый для обозначения значков.
menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
message-box — шрифт, используемый в диалоговых окнах.
small-caption — шрифт, используемый для маркировки подписи элементов управления.
status-bar — шрифт, используемый в строке состояния окна.

Системные шрифты могут быть установлены только целиком; то есть семейство шрифтов, размер, вес, стиль и т.д. задаются одновременно. Эти значения затем могут быть изменены индивидуально, если это необходимо. Ключевые слова, используемые для системных шрифтов, перечисленных выше, обрабатываются как ключевые слова только в том случае, если они находятся в начальной позиции, в других позициях эта же строка обрабатывается как часть имени семейства шрифтов. Системные шрифты могут быть указаны только с этим свойством, но не с самим font-family.

font: menu;        /* используются настройки шрифта для системных меню */
font: large menu;  /* используется семейство шрифтов под названием "menu" */

8. Управление синтезом шрифтов: свойство font-synthesis

Свойство font-synthesis определяет, разрешено ли пользовательским агентам (браузерам) синтезировать полужирное или наклонное начертание шрифтов, когда они отсутствуют в семействе шрифтов. Если weight не указан, пользовательские агенты не должны синтезировать полужирное начертание, а если style не указан, пользовательские агенты не должны синтезировать курсив.

Свойство наследуется.

font-synthesis
Значения:
`none`	Запрещает синтез начертаний.
`weight` и/или `style`	По умолчанию свойство принимает значение `font-synthesis: weight style;`. Если указано только `weight`, это говорит браузеру, что жирный шрифт может быть синтезирован при необходимости. Если только `style` — синтезируется только курсив.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;
font-synthesis: initial;
font-synthesis: inherit;

По материалам CSS Fonts Module Level 3

Список HTML шрифтов — OLDESIGN.RU

Визуализация стандартных шрифтов

Опытные дизайнеры и веб-мастера знают, что нужно использовать те шрифты, которые установлены на компьютере или мобильном устройстве у посетителей сайта. Каждый владелец устройства может иметь набор разных шрифтов, поэтому на сайтах можно использовать стандартные шрифты, либо загружать нестандартные вместе с сайтом. Браузеры используют ограниченное количество стандартных шрифтов, таких как Arial, Arial Black, Comic Sans MS, Courier New, Helvetica, Garamond, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif, Tahoma, Times New Roman, Trebuchet MS, Verdana, Webdings. Загрузка шрифтов вместе с сайтом требует особых приёмов.

Посмотреть, какие наиболее распространённые шрифты установлены на вашем устройстве можно в таблице ниже. Если шрифт не установлен на вашем устройстве, то соответствующий текст в списке будет отображён стандартными системным шрифтом (обычно из того же семейства шрифтов).

Основные разновидности шрифтов

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

По стилю различают шрифт: Прямой (Roman), Курсивный (Italic), Полужирный (Bold), Нормальный (Regular, отличается от прямого меньшей толщиной штриха), Узкий (Narrow), Широкий (Wide).

Дополнительные параметры форматирования символов: подчеркивание различными типами линий (Подчеркнутый, Underline), изменение вида значков (зачёркнутый, надстрочный, подстрочный, с тенью, контур, все прописные), изменение расстояний между символами (межсимвольный интервал — обычный, разреженный или уплотнённый).

По ширине символов шрифты делят на моноширинные (как на старой печатной машинке) и пропорциональные. Например, буква «I» будет намного уже, чем «W». В CSS — моноширинный шрифт выбирается или с помощью конструкции font-family: monospace, и/или указанием названия конкретного моно-шрифта. Например:
{ font-family: Lucida Console, Courier New, Courier, monospace; }

Значения ширины шрифтов (font-weight) задаются по цифровой шкале, где значение «400» соответствует «Normal» данного семейства шрифтов. Названия веса, ассоциированные с такой шириной, обычно: Book, Regular, Roman, Normal, Medium. «Bold» соответствует весовому значению «700», Heavy — «800», Black — «900».

Стандартные шрифты для разных версий Windows

Название шрифта	Win 2000	Win XP	Vista	Win 7	Win 8
Arial	+	+	+	+	+
Arial Black	+	+	+	+	+
Book Antiqua		+
Calibri			+	+	+
Cambria			+	+	+
Candara			+	+	+
Comic Sans MS	+	+	+	+	+
Consolas			+	+	+
Constantia			+	+	+
Corbel			+	+	+
Courier	+	+	+	+	+
Courier New	+	+	+	+	+
Estrangelo Edessa		+	+	+	+
Franklin Gothic Medium		+	+	+	+
Gautami		+	+	+	+
Gabriola				+	+
Georgia	+	+	+	+	+
Georgia Italic Impact		+
Impact	+	+	+	+	+
Latha		+	+	+	+
Lucida Console	+	+	+	+	+
Lucida Sans Console		+	+	+	+
Lucida Sans Unicode	+	+	+	+	+
Marlett	+	+	+	+	+
Modern	+	+
Modern MS Sans Serif		+
MS Sans Serif	+	+	+	+	+
MS Serif	+	+	+	+	+
MV Boli		+	+	+	+
Nyala			+	+	+
Palatino Linotype	+	+	+	+	+
Roman	+	+	+	+	+
Script	+	+	+	+	+
Segoe Print			+	+	+
Segoe Script			+	+	+
Segoe UI			+	+	+
Small Fonts	+	+
Symbol	+	+	+	+	+
Tahoma	+	+	+	+	+
Tempus Sans ITC	+
Times New Roman	+	+	+	+	+
Trebuchet MS	+	+	+	+	+
Tunga		+	+	+	+
Verdana	+	+	+	+	+
Webdings	+	+	+	+	+
Westminster		+
Wingdings	+	+	+	+	+

Группы и семейства шрифтов

Рекомендуется прописывать шрифт в CSS, сгруппировав сразу 3-4 похожих шрифта на случай отсутствия основного из них у конечного пользователя.
Пример: font-family: Webdings, Garamond, Times New Roman, Sans;

Ниже приведен список стандартных шрифтов для операционной системы Microsoft Windows и MacOS X Apple. В таблице использованы группы стандартных шрифтов Windows и Mac для безопасного использования во всех браузерах.

Значение @font-family	Windows	Mac	Семейство
Arial, Helvetica, sans-serif	Arial	Arial, Helvetica	sans-serif
Arial Black, Gadget, sans-serif	Arial Black	Arial Black, Gadget	sans-serif
Comic Sans MS, cursive	Comic Sans MS	Comic Sans MS⁵	cursive
Courier New, Courier, monospace	Courier New	⁶	monospace
Georgia, serif	Georgia¹	Georgia	serif
Impact, Charcoal, sans-serif	Impact	Impact⁵, Charcoal⁶	sans-serif
Lucida Console, Monaco, monospace	Lucida Console	Monaco⁵	monospace
Lucida Sans Unicode, Lucida Grande, sans-serif	Lucida Sans Unicode	Lucida Grande	sans-serif
Palatino Linotype, Book Antiqua, Palatino, serif	Palatino Linotype, Book Antiqua³	Palatino⁶	serif
Tahoma, Geneva, sans-serif	Tahoma	Geneva	sans-serif
Times New Roman, Times, serif	Times New Roman	Times	serif
Trebuchet MS, Helvetica, sans-serif	Trebuchet MS¹	Helvetica	sans-serif
Verdana, Geneva, sans-serif	Verdana	Verdana, Geneva	sans-serif
Symbol	Symbol²	Symbol²	—
Webdings	Webdings²	Webdings²	—
Wingdings, Zapf Dingbats	Wingdings²	Zapf Dingbats²	—
MS Sans Serif, Geneva, sans-serif	MS Sans Serif⁴	Geneva	sans-serif
MS Serif, New York, serif	MS Serif⁴	New York⁶	serif

¹ Шрифты Georgia и Trebuchet MS поставляются вместе с Windows 2000/XP и включены в пакет шрифтов IE, поэтому они установлены на многих компьютерах с ОС Windows 98.

² Символьные шрифты отображаются только в Internet Explorer, в остальных браузерах они обычно заменяются на стандартный шрифт (хотя, например, шрифт Symbol отображается в Opera, а Webdings — в Safari).

³ Шрифт Book Antiqua практически идентичен Palatino Linotype, который поставляется с Windows 2000/XP, а Book Antiqua — с Windows 98.

⁴ Обратите внимание, что эти шрифты не TrueType, а bitmap, поэтому они могут отображаться с пикселизацией в крупных размерах. Эти шрифты предназначены для отображения в размерах 8, 10, 12, 14, 18 и 24 pt при 96 DPI).

⁵ Эти шрифты работают в Safari только в стандартном начертании и не работают при выделении жирным или курсивом. Comic Sans MS также используется жирным выделением, но не курсивом. Другие Mac-браузеры самостоятельно эмулируют отсутствующие у шрифтов свойства.

⁶ Эти шрифты устанавливаются в Mac только при Classic-инсталляции.

Как выглядят шрифты в различных браузерах

Windows Vista, Internet Explorer 7, ClearType включен:

Windows Vista, Firefox 2.0, ClearType включен:

Mac OS X 10.4.8, Firefox 2.0, ClearType включен:

Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег

Тег используется для указания параметров шрифта конкретного участка текста в HTML документе.

С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).

Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font.

Синтаксис

<font атрибуты>текст</font>

Отображение в браузере

Внимание! Это слово было выделено с помощью тега font.

Пример использования тега в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Изменение параметров шрифта с помощью тега font</title>
</head>
<body>
<div><font size="6" color="orange" face="Times New Roman">Внимание!</font> Это слово было выделено с помощью тега font.</div>
</body>
</html>

Поддержка браузерами

Атрибуты тега

Атрибут	Значение	Описание
color	RGB HTML hex colorname	Цвет текста. Может быть указан в любом из трех поддерживаемых форматов: RGB, например, «rgb(15, 92, 50)»; HTML hex, например, «#0F5C32»; colorname, например, «black».
face	имя семейства шрифтов	Семейство шрифтов. Можно указать несколько шрифтов через запятую. Будет использован первый доступный на компьютере пользователя шрифт. Приоритет слева направо (если не доступен первый, проверяется второй и т.д.).
size	числовое значение	Размер шрифта. Можно указать в абсолютном и относительном форматах. Абсолютное значение: число от 1 (самый маленький) до 7 (самый большой). Стандартный размер: 3. Относительное значение: «+1», «+2» и т.д. для увеличения размера шрифта или «-1», «-2» и т.д. для уменьшения размера шрифта.

Атрибут

Значение

Описание

color

RGB
HTML hex
colorname

Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:

RGB, например, «rgb(15, 92, 50)»;
HTML hex, например, «#0F5C32»;
colorname, например, «black».

face

имя семейства шрифтов

Семейство шрифтов. Можно указать несколько шрифтов через запятую. Будет использован первый доступный на компьютере пользователя шрифт.

Приоритет слева направо (если не доступен первый, проверяется второй и т.д.).

size

числовое значение

Размер шрифта. Можно указать в абсолютном и относительном форматах.

Абсолютное значение: число от 1 (самый маленький) до 7 (самый большой). Стандартный размер: 3.
Относительное значение: «+1», «+2» и т.д. для увеличения размера шрифта или «-1», «-2» и т.д. для уменьшения размера шрифта.

Тег также поддерживает глобальные HTML атрибуты.

Тег | 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

Описание

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

Синтаксис

<font>Текст</font>

Закрывающий тег

Обязателен.

Атрибуты

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>Тег FONT</title>
 </head>
 <body>
  <p><font size="5" color="red" face="Arial">П</font>ервая буква этого предложения 
    написана шрифтом Arial, выделена красным цветом и увеличена в размерах.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Изменение вида текста

Коды html шрифтов – Font-family, font-size, color и другие свойства css для задания параметров шрифта : WEBCodius

Шрифты, HTML-коды / примеры с кодами

HTML шрифты. Работаем со шрифтами в HTML: гарнитура, размер, цвет

Что может делать HTML со шрифтами?

HTML тэги для работы со шрифтами

HTML атрибуты для работы со шрифтами

Изменяем размер шрифта в HTML

Изменяем цвет шрифта средствами HTML

Изменяем гарнитуру шрифт в HTML

Приоритет тэгов <basefont> и <font>

HTML шрифты для Microsoft Windows

HTML шрифты для UNIX систем

HTML шрифты для Mac OS

CSS: шрифты

Семейства шрифтов

Стили шрифтов

Навигация по сайту

CSS-шрифты

Базовые свойства CSS-шрифтов

1. Семейство шрифтов: свойство font-family

2. Насыщенность шрифта: свойство font-weight

3. Ширина шрифта: свойство font-stretch

4. Начертание шрифта: свойство font-style

5. Размер шрифта: свойство font-size

6. Относительный размер шрифта: свойство font-size-adjust

7. Сокращенная запись свойств шрифта: свойство font

8. Управление синтезом шрифтов: свойство font-synthesis

Список HTML шрифтов — OLDESIGN.RU

Визуализация стандартных шрифтов

Основные разновидности шрифтов

Стандартные шрифты для разных версий Windows

Группы и семейства шрифтов

Как выглядят шрифты в различных браузерах

Тег HTML параметры шрифта — размер, семейство, цвет — устаревший тег

Синтаксис

Отображение в браузере

Пример использования тега <font> в HTML коде

Поддержка браузерами

Атрибуты тега <font>

Тег | htmlbook.ru

Спецификация

Описание

Синтаксис

Закрывающий тег

Атрибуты

Валидация

Добавить комментарий Отменить ответ

Рубрики