Штирлиц — Сеть печатных салонов в Перми

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

Шрифт в html: Как изменить стиль текста в html

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

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

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

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

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

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

  • Что может делать HTML со шрифтами?
  • HTML тэги для работы со шрифтами
  • HTML атрибуты для работы со шрифтами
  • Изменяем размер шрифта в HTML
  • Изменяем цвет шрифта средствами HTML
  • Изменяем гарнитуру шрифт в HTML
  • Приоритет тэгов <basefont> и <font>
  • HTML шрифты для Microsoft Windows
  • HTML шрифты для UNIX систем
  • HTML шрифты для Mac OS

Давайте сразу скажем, что не стоит путать понятие шрифта и текста, хотя зачастую мы подменяем один термин другим. Чтобы разбираться с тем, что мы можем делать со шрифтами в 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

Но атрибуту 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 в относительных единицах

Мы видим, что шрифты в документе идут парами, это сделано специально, чтобы продемонстрировать, что значение 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 нам позволяет изменять атрибут 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 мы можем задать сразу несколько гарнитур для шрифта. Шрифт в документе будет принимать ту гарнитуру, которая указана первой в атрибуте 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

HTML — шрифты — CoderLessons.

com

Шрифты играют очень важную роль в том, чтобы сделать веб-сайт более удобным для пользователя и повысить читаемость контента. Лицо и цвет шрифта полностью зависят от компьютера и браузера, который используется для просмотра вашей страницы, но вы можете использовать тег <font> HTML, чтобы добавить стиль, размер и цвет к тексту на вашем веб-сайте. Вы можете использовать тег <basefont>, чтобы установить для всего текста одинаковый размер, лицо и цвет.

Тег шрифта имеет три атрибута: размер, цвет и лицо для настройки ваших шрифтов. Чтобы изменить любой атрибут шрифта в любое время на вашей веб-странице, просто используйте тег <font>. Текст, который следует, будет изменяться до тех пор, пока вы не закроете тег </ font>. Вы можете изменить один или все атрибуты шрифта в пределах одного тега <font>.

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

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

Установить размер шрифта

Вы можете установить размер шрифта содержимого, используя атрибут size . Диапазон принимаемых значений — от 1 (наименьший) до 7 (наибольший). Размер шрифта по умолчанию — 3.

пример

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Setting Font Size</title>
   </head>
   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>
</html>

Это даст следующий результат —

Относительный размер шрифта

Вы можете указать, на сколько размеров больше или на сколько размеров меньше заданного размера шрифта. Вы можете указать его как <font size = «+ n»> или <font size = «−n»>

пример

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Relative Font Size</title>
   </head>
   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>
</html>

Это даст следующий результат —

Настройка шрифта лица

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

пример

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Font Face</title>
   </head>
   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>
</html>

Это даст следующий результат —

Укажите альтернативные грани шрифта

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

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

Когда ваша страница загружена, их браузер отобразит первый доступный шрифт. Если ни один из указанных шрифтов не установлен, он будет отображать шрифт по умолчанию Times New Roman .

Примечание. Проверьте полный список стандартных шрифтов HTML .

Настройка цвета шрифта

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

Примечание. Вы можете проверить полный список имен цветов HTML с помощью кодов .

пример

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

Это даст следующий результат —

Элемент <basefont>

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

Тег <basefont> также принимает атрибуты color, size и face, и он будет поддерживать относительную настройку шрифта, давая size значение +1 для размера больше или -2 для двух размеров меньше.

пример

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h3>Example of the &lt;basefont&gt; Element</h3>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>
      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color. 
         </font>
      </p>
   </body>
	
</html>

Это даст следующий результат —

Элемент «шрифт» устарел. Вместо этого используйте CSS. · Ракетный валидатор

Rocket Validator интегрирует средство проверки HTML W3C Validator. в автоматизированный поисковый робот.

Пробная версия Pro Бесплатная пробная версия

  • шрифт
  • устаревший
  • css

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

Например, вы можете определить размер шрифта 12 пикселей, полужирный текст со встроенными стилями, например:

 
некоторый текст

Подробнее:

  • MDN: шрифт CSS

Связанные проблемы средства проверки W3C

«Большой» элемент устарел. Вместо этого используйте CSS.

  • большой
  • устаревший
  • css

Тег устарел. Он использовался для увеличения размера текста, вместо этого вы можете сделать это с помощью CSS. Например:

 
Теперь это большой

Элемент «tt» устарел. Вместо этого используйте CSS.

  • тт
  • устаревший
  • css
  • семейство шрифтов

Тег , используемый в HTML4 для применения моноширинного (фиксированной ширины) шрифта к тексту, устарел в HTML5. Вместо этого вы должны использовать CSS для применения нужного шрифта.

Пример вместо этого устаревшего кода:

 Это устаревшее

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

 Это моноширинный текст

Атрибут «высота» не разрешен для элемента «таблица» в данный момент.

  • высота
  • стол
  • не допускается
  • css

Элемент

не принимает атрибут height . Вместо этого используйте CSS.

Неверное значение X для атрибута «media» в элементе «link»: устаревшая функция мультимедиа «max-device-width». Инструкции см. в разделе «Устаревшие функции мультимедиа» в текущей спецификации запросов мультимедиа.

  • максимальная ширина устройства
  • ширина устройства
  • медиа-запрос
  • связь
  • css

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

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

В следующем примере этот медиа-запрос показывает, что таблица стилей связана только в том случае, если ширина окна просмотра составляет максимум 768 пикселей:

Все еще проверяете свои большие сайты по одной странице за раз?

Экономьте время, используя нашу автоматическую веб-проверку. Позвольте нашему сканеру проверить ваши веб-страницы на W3C Validator.

Rocket Validator Micro
1250 проверок HTML в неделю, 6 долларов США в неделю

Неверное значение X для атрибута «media» в элементе «link»: устаревшая функция мультимедиа «min-device-width». Инструкции см. в разделе «Устаревшие функции мультимедиа» в текущей спецификации запросов мультимедиа.

  • минимальная ширина устройства
  • ширина устройства
  • медиа-запрос
  • связь
  • css

Чтобы запросить размер окна просмотра (или страничного поля на медиафайле страницы), следует использовать ширину , высоту и соотношение сторон медиа, а не устройство-ширина , устройство-высота и device-aspect-ratio , которые относятся к физическому размеру устройства независимо от того, сколько места доступно для размещаемого документа. Медиа-функции device-* также иногда используются в качестве прокси-сервера для обнаружения мобильных устройств. Вместо этого авторы должны использовать мультимедийные функции, которые лучше отражают аспект устройства, для которого они пытаются создать стиль.

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

В следующем примере этот медиа-запрос показывает, что таблица стилей связана только в том случае, если ширина области просмотра больше 768 пикселей:

CSS: «фоновое изображение»: ошибка синтаксического анализа.

  • изображение на заднем плане
  • css
  • ошибка синтаксического анализа

Анализатору не удалось понять определение CSS для background-image . Проверьте его определение, чтобы убедиться, что оно правильно сформировано и содержит соответствующее значение.

25 000 проверок HTML в месяц. Полностью автоматизирован.

Экономьте время, используя нашу автоматическую веб-проверку. Позвольте нашему сканеру проверить ваши веб-страницы на W3C Validator.

Rocket Validator Basic
25 000 проверок HTML, 36 долларов США в месяц

CSS: «отображение»: X не является «отображаемым» значением.

  • css
  • отображать

Значение свойства display недопустимо.

CSS-свойство display определяет, будет ли элемент рассматриваться как блочный или встроенный элемент, а также макет, используемый для его дочерних элементов, например непрерывный макет, сетка или гибкий.

CSS: «фильтр»: «X» не является значением «фильтра».

  • css
  • фильтр

Указанный фильтр CSS не является стандартным и может работать только в некоторых браузерах.

CSS: «отображение шрифта»: свойство «отображение шрифта» не существует.

  • css
  • отображение шрифта

font-display не является свойством CSS, это дескриптор для использования с at-правилом @font-face .

CSS: «размер шрифта»: «px» не является значением «размера шрифта».

  • css
  • размер шрифта

Значение, переданное свойству font-size , является недопустимым, вероятно, отсутствует значение px .

CSS-свойство font-size устанавливает размер шрифта, и этот размер может быть выражен в разных единицах, например 9.0041 em , % или px .

Пример:

 

<голова>
Пример размера шрифта
<стиль>
п {
размер шрифта: 16px;
}


<тело>

Это пример абзаца с размером шрифта 16 пикселей.

12 500 проверок доступности и HTML в неделю. Полностью автоматизирован.

Позвольте нашему автоматизированному сканеру проверить ваши крупные сайты с помощью Axe Core и W3C Validator.

Rocket Validator Pro
12 500 чеков A11Y / HTML, 24 долл. США в неделю

Метка | изменить размер, шрифт и цвет вашего текста

Путь // www.yourhtmlsource.com → Текст → ТЕГ

Росс Шеннон

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

Навигация по страницам:
Размер шрифта | Лицо шрифта · Ограничения по шрифтам · Общие шрифты | Цвет шрифта

Эта страница последний раз обновлялась 21 августа 2012 г.


Будущее:

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

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

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

Дальнейшее чтение:

  • » Выбросьте уже тег FONT!
  • » Что не так с FONT FACE
  • » За тегом FONT

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

Размер шрифта

У вас есть два варианта установки размера текста: установить его размер абсолютно или относительно . Абсолютные размеры находятся в диапазоне 1 и 7 и устанавливаются следующим образом:

size ="2">text

В большинстве браузеров размер шрифта по умолчанию установлен как 3 . На большинстве сайтов размер текста будет примерно 2 или 3 .

Относительный размер означает, что размер текста будет изменяться относительно пользовательского размера по умолчанию . Это лучше, потому что адаптируется к предпочтениям ваших пользователей — если они специально настроили свои браузеры для отображения текста большего размера, чем обычно, ваш текст будет увеличиваться пропорционально. У вас есть диапазон между +6 до +1 и -1 до -6 . Плюс 1 и минус 1 будут теми, которые вы будете использовать чаще всего. В качестве ярлыков для этих двух размеров есть теги и , которые помогают.

Текст на один размер больше размера браузера по умолчанию.

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

Font Face

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

Посмотрите в папке шрифтов (на ПК это C:\windows\fonts ). У вас должно быть несколько десятков разных шрифтов. Некоторые из них подойдут для использования в Интернете, а другие вы будете использовать снова и снова. Одним из наиболее распространенных шрифтов, используемых в сети, является 9.0286 Arial (вариант Helvetica для Mac). Чтобы изменить текст на Arial или любой другой шрифт, используйте следующие теги:

face ="Arial">Ваш текст здесь.

Атрибут face был назван так из-за дизайна шрифта. более точно известны как гарнитуры .

Ограничения по шрифтам

Определенный шрифт будет отображаться на экране компьютера читателя только в том случае, если на его компьютере установлен этот шрифт. Итак, если у вас вся страница определена в Digital (» скачать) или что-то в этом роде, множество ваших зрителей просто получат страницу со скучным старым шрифтом Times New Roman. Чтобы обойти это, лучшая идея, конечно, использовать общие шрифты . Существует набор распространенных шрифтов, которые, как вы можете быть более или менее уверены, появятся во всех системах ваших читателей. Атрибут face позволяет указать список шрифтов одновременно. Хорошей практикой является указание резервных шрифтов на случай, если что-то пойдет не так. Часы:

text

Смотрите — у вас есть пара шансов найти хороший шрифт, разделенный запятыми. Если первый недоступен, будет использован второй вариант и так далее. Вы можете продолжать длинный список, но на самом деле вам следует остановиться примерно после 3, потому что в противном случае вы тратите свое время впустую. Старайтесь, чтобы шрифты были похожи на , и заканчивайте их общим шрифтом , чтобы держаться подальше от Times.

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

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

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

Общие шрифты

Для вашего удобства вот группа списков самых популярных и распространенных шрифтов:

  • Arial, Helvetica, без засечек
  • Trebuchet MS, Arial, Helvetica, без засечек
  • Вердана, Женева, без засечек
  • Times New Roman, Times, с засечками
  • Джорджия, Гарамонд, Палатино, с засечками
  • Courier New, Courier, моноширинный

Цвет шрифта

Для изменения цвета текста на странице для всю страницу , вы можете определить ее в теге . У меня есть полный учебник по телу здесь.

Чтобы изменить цвет небольшого блока текста или отдельного слова, вы должны снова использовать старый тег шрифта . Формат:

color ="#ff0000">text

Цвета в HTML должны быть определены как HEX-коды, которые представляют собой 6-значные коды, представляющие количество красного, зеленого и синий (RGB) в цвете.

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

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

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

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.

Карта сайта