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

Содержание

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

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

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


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

В своих постах мы иногда используем разные шрифты (в панели спецкодов их 4),
некоторые используют до десятка-полутора шрифтов, но их намного-намного больше.
Дам вам СПИСОК ШРИФТОВ, где их более 100 и дам коды некоторых примеров.

_ШРИФТЫ + КОДЫ_
Monotype Corsiva
<font face=»Monotype Corsiva» size=»+3″ color=»Red»>ВАШ ТЕКСТ</font>

Georgia
<font face=»Georgia» size=»+3″ color=»SlateBlue»>ВАШ ТЕКСТ</font>

MS Mincho
<font face=»MS Mincho» size=»+2″ color=»fuchsia»>ВАШ ТЕКСТ</font>

Comic Sans MS
<font face=»Comic Sans MS» size=»+3″ color=»SeaGreen»>ВАШ ТЕКСТ</font>

Garamond
<font face=»Garamond» color=»#008B45″><i><b>ВАШ ТЕКСТ</b></i></font>

Wingding
<font face=»Wingding» color=»#1E90FF»><i><b>ВАШ ТЕКСТ</b></i></font>

Times New Roman
<font face=»Times New Roman» color=»#68228B»><i><b>ВАШ ТЕКСТ</b></i></font>

Courier New
<font face=»Courier New» color=»#00FF00″><i><b>ВАШ ТЕКСТ</b></i></font>

_ОБЩИЙ ПРИНЦИП_

Задать размер текста можно двумя способами:
отличный от обычного (±1, ±2,..) или размер текста в рх

Код цвета можно задавать:
буквенным написанием или кодом-HTML


<font face=»выбранный ШРИФТ» size=»размер ±» color=»ЦВЕТ буквенный»> ВАШ ТЕКСТ</font>

<font face=»выбранный ШРИФТ» color=»ЦВЕТ кодHTML» >ВАШ ТЕКСТ</font>
Выбрать ШРИФТ можете из таблицы ниже.
Скопировав его, вставьте в код вместо слов «выбранный ШРИФТ».
__Список шрифтов для использования в__
__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 мы можем двумя способами: средствами самого языка HTML и средствами каскадных таблиц стилей.

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

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

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

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

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

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

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

  1. Атрибут face. Данный атрибут позволяет изменить гарнитуру шрифта.
  2. Атрибут color. Изменяет цвет шрифта в HTML документе.
  3. Атрибут 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> <p><font size=»1″>font size=»1″</font></p> <p><font size=»1″>font size=»2″</font></p> <p><font size=»1″>font size=»3″</font></p> <p><font size=»1″>font size=»4″</font></p> <p><font size=»1″>font size=»5″</font></p> <p><font size=»1″>font size=»6″</font></p> <p><font size=»1″>font size=»7″</font></p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!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>

 

<p><font size=»1″>font size=»1″</font></p>

 

<p><font size=»1″>font size=»2″</font></p>

 

<p><font size=»1″>font size=»3″</font></p>

 

<p><font size=»1″>font size=»4″</font></p>

 

<p><font size=»1″>font size=»5″</font></p>

 

<p><font size=»1″>font size=»6″</font></p>

 

<p><font size=»1″>font size=»7″</font></p>

 

</body>

 

</html>

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

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

Пример изменения размера шрифта в 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> <p><font size=»1″>font size=»1″</font></p> <p><font size=»-2″>font size=»-2″</font></p> <p><font size=»2″>font size=»2″</font></p> <p><font size=»-1″>font size=»-1″</font></p> <p><font size=»4″>font size=»4″</font></p> <p><font size=»+3″>font size=»+3″</font></p> <p><font size=»6″>font size=»6″</font></p> <p><font size=»7″>font size=»7″</font></p> <p><font size=»+4″>font size=»+4</font></p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<!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>

 

<p><font size=»1″>font size=»1″</font></p>

 

<p><font size=»-2″>font size=»-2″</font></p>

 

<p><font size=»2″>font size=»2″</font></p>

 

<p><font size=»-1″>font size=»-1″</font></p>

 

<p><font size=»4″>font size=»4″</font></p>

 

<p><font size=»+3″>font size=»+3″</font></p>

 

<p><font size=»6″>font size=»6″</font></p>

 

<p><font size=»7″>font size=»7″</font></p>

 

<p><font size=»+4″>font size=»+4</font></p>

 

</body>

 

</html>

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

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

Пример изменения размера шрифта в 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><font color=»red» size=»5″>color=»red»</font></li> <li><font color=»green» size=»5″>color=»green»</font></li> <li><font color=»blue» size=»5″>color=»blue»</font></li> <li><font color=»#AAA» size=»5″>color=»blue»</font></li> <li><font color=»#FF00FF» size=»5″>color=»blue»</font></li> </ul> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!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><font color=»red» size=»5″>color=»red»</font></li>

 

<li><font color=»green» size=»5″>color=»green»</font></li>

 

<li><font color=»blue» size=»5″>color=»blue»</font></li>

 

<li><font color=»#AAA» size=»5″>color=»blue»</font></li>

 

<li><font color=»#FF00FF» size=»5″>color=»blue»</font></li>

 

</ul>

 

</body>

 

</html>

Во-первых, стоит отметить, что мы использовали 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><font face=»Arial» color=»red» size=»5″>face=»Arial»</font></li> <li><font face=»Times New Roman» color=»green» size=»5″>color=»green»</font></li> <li><font face=»Verdana» color=»blue» size=»5″>color=»blue»</font></li> <li><font face=»Comic Sans MS» color=»#AAA» size=»5″>face=»MS Comic Sans»</font></li> <li><font face=»Tahoma» color=»#FF00FF» size=»5″>face=»Tahoma»</font></li> <li><font face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″> face=»Comic Sans MS, Tahoma, Arial»</font></li> </ul> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<!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><font face=»Arial» color=»red» size=»5″>face=»Arial»</font></li>

 

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

 

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

 

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

 

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

 

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

 

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

 

</ul>

 

</body>

 

</html>

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

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

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

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

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

Мы очень подробно рассмотрели тэг <font> и коротко поговорим про <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> <p><ul> <li>face=»Times New Roman» size=»1″ color=»Black»</li> <li><font face=»Arial» color=»red» size=»5″> face=»Arial» color=»red» size=»5″</font></li> <li><font face=»Times New Roman» color=»green» size=»5″> face=»Times New Roman» color=»green» size=»5″</font></li> <li><font face=»Verdana» color=»blue» size=»5″> face=»Verdana» color=»blue» size=»5″</font></li> <li><font face=»Comic Sans MS» color=»#AAA» size=»5″> face=»Comic Sans MS» color=»#AAA» size=»5″</font></li> <li><font face=»Tahoma» color=»#FF00FF» size=»5″> face=»Tahoma» color=»#FF00FF» size=»5″</font></li> <li><font face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″> face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″</font></li> </ul></p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<!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>

 

<p><ul>

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

</ul></p>

 

</body>

 

</html>

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

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

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

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

Имя гарнитурыИмя гарнитурыИмя гарнитуры
Andale MonoArialArial Bold
Arial ItalicArial Bold ItalicArial Black
Comic Sans MSComic Sans MS BoldCourier New
Courier New BoldCourier New ItalicCourier New Bold Italic
GeorgiaGeorgia BoldGeorgia Italic
Georgia Bold ItalicImpactLucida Console
Lucida Sans UnicodeMarlettMinion Web
SymbolTimes New RomanTimes New Roman Bold
Times New Roman ItalicTimes New Roman Bold ItalicTahoma
Trebuchet MSTrebuchet MS BoldTrebuchet MS Italic
Trebuchet MS Bold ItalicVerdanaVerdana Bold
Verdana ItalicVerdana Bold ItalicWebdings

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

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

Имя гарнитурыИмя гарнитурыИмя гарнитуры
CharterCleanCourier
FixedHelveticaLucida
Lucida brightLucida TypewriterNew Century Schoolbook
SymbolTerminalTimes
Utopia

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

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

Имя гарнитурыИмя гарнитурыИмя гарнитуры
American TypewriterAndale MonoApple Chancery
ArialArial BlackBrush Script
BaskervilleBig CaslonComic Sans MS
CopperplateCourier NewGill Sans
FuturaHerculanumImpact
Lucida GrandeMarker FeltOptima
Trebuchet MSVerdanaWebdings
PalatinoSymbolTimes
OsakaPapyrusTimes New Roman
TextileZapf DingbatsZapfino
TechnoHoefler TextSkia
Hoefler Text OrnamentsCapitalsCharcoal
GadgetSand

CSS: шрифты

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), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

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

правилоserifsans-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-sizexx-small, x-small, small, medium, large, x-large, xx-large. В качестве стандартного размера принимается medium. В CSS1 предложенный коэффициент масштабирования между соседними индексами составлял 1.5, что для пользователя оказалось слишком большим. В CSS2 предложенный коэффициент масштабирования для экрана компьютера между смежными индексами составлял 1.2, что все еще создавало проблемы для небольших размеров. Новый коэффициент масштабирования варьируется между каждым индексом, чтобы обеспечить лучшую читаемость.
relative-sizesmaller, 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-smallx-smallsmallmediumlargex-largexx-large
Коэффициент масштабирования
3/53/48/916/53/22/13/1
HTML заголовки
h6h5h5h4h3h2
HTML размер шрифта
1234567

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 5 cursive
Courier New, Courier, monospace Courier New 6 monospace
Georgia, serif Georgia 1 Georgia serif
Impact, Charcoal, sans-serif Impact Impact 5, Charcoal6 sans-serif
Lucida Console, Monaco, monospace Lucida Console Monaco 5 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 3 Palatino 6 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 1 Helvetica sans-serif
Verdana, Geneva, sans-serif Verdana Verdana, Geneva sans-serif
Symbol Symbol 2 Symbol 2
Webdings Webdings 2 Webdings 2
Wingdings, Zapf Dingbats Wingdings 2 Zapf Dingbats 2
MS Sans Serif, Geneva, sans-serif MS Sans Serif 4 Geneva sans-serif
MS Serif, New York, serif MS Serif 4 New York 6 serif

 

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

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

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

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

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

6 Эти шрифты устанавливаются в 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 параметры шрифта — размер, семейство, цвет — устаревший тег

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

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

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

Синтаксис

<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>

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

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

Атрибут Значение Описание
color

RGB
HTML hex
colorname

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

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

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

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

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

size

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

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

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

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

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+2.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

<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. Изменение вида текста

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *