font в HTML


Задаем шрифт текста. Атрибут face тега font

Все мы пользовались известным редактором текста Word. И мы знаем, что в нем очень легко изменить шрифт, размер и цвет текста. Так вот, в html тоже без особого труда можно задать эти параметры. Для этого существует тег . Он парный и потому имеет закрывающий тег , ведь браузеру нужно понимать, где начало и конец текста, которому мы изменяем параметры. Тег имеет три атрибута: face, size и color, задающие тексту шрифт, размер и цвет соответственно. В этом уроке мы подробно рассмотрим шрифты.

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

Названия шрифтов можно посмотреть в редакторе Word. Там довольно длинный список. Давайте на примере рассмотрим, как изменить шрифт текста в html и напишем следующий код:

Сохраним файл под любым именем и посмотрим, что получилось:

Как мы видим, все сработало: первый абзац имеет шрифт по умолчанию, во втором абзаце мы задали шрифт Batang, а в третьем – текст отобразился шрифтом Comic Sans MS. В принципе все легко и понятно, но есть одно замечание. Так как заданный шрифт не сохраняется в HTML – файле, то нет никакой гарантии, что в браузере он отобразиться как нужно. Мы не можем быть уверены на 100%, что на компьютере посетителя имеется шрифт, который мы задали, тем более, если этот шрифт не стандартный. Поэтому в атрибуте face лучше указывать около трех названий шрифтов, которые перечисляются через запятую, чтоб хоть один из них отобразился наверняка. Давайте рассмотрим пример:

Посмотрим на результат:

Текст отобразился шрифтом Batang, который мы указали в атрибуте face первым. Если не сработает этот шрифт в браузере посетителя, то сработает второй шрифт — Comic Sans MS и если не сработает этот шрифт, то уж наверняка текст отобразиться шрифтом Arial.

Другие параметры шрифта

И на закуску давайте рассмотрим другие параметры шрифта. В первом уроке мы уже рассмотрели теги, которые задают полужирный шрифт и курсив, это теги и соответственно. Давайте рассмотрим еще несколько тегов, которые задают стиль шрифту:

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

Всему тексту мы задали шрифт Comic Sans MS, первую строку подчеркнули, используя тег , помним из первого урока, что тег
делает перенос на новую строку, вторая строка у нас перечеркнута благодаря тегу и в последней строке мы задали в верхнем индексе слово «верх». Все ничего сложного! С остальными тегами можете поэкспериментировать самостоятельно. Если вам все понятно, можете переходить на следующий урок, в котором мы рассмотрим, как задать тексту размер, если же остались вопросы, посмотрите подробное видео этого урока.

в HTML

Опытные дизайнеры и веб-мастера знают, что нужно использовать те шрифты, которые установлены на компьютере или мобильном устройстве у посетителей сайта. Каждый владелец устройства может иметь набор разных шрифтов, поэтому на сайтах можно использовать стандартные шрифты, либо загружать нестандартные вместе с сайтом. Браузеры используют ограниченное количество стандартных шрифтов, таких как 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. Загрузка шрифтов вместе с сайтом требует особых приёмов.

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

  1. academy engraved let
  2. algerian
  3. amaze
  4. arial
  5. arial black
  6. balthazar
  7. bankgothic lt bt
  8. bart
  9. bimini
  10. book antiqua
  11. bookman old style
  12. braggadocio
  13. britannic bold
  14. brush script mt
  15. calibri
  16. cambria
  17. candara
  18. century gothic
  19. century schoolbook
  20. chasm
  21. chicago
  22. colonna mt
  23. comic sans ms
  24. commercialscript bt
  25. consolas
  26. constantia
  27. coolsville
  28. corbel
  29. courier
  30. courier new
  31. cursive
  32. dayton
  33. desdemona
  34. estrangelo edessa
  35. fantasy
  36. flat brush
  37. footlight mt light
  38. franklin gothic medium
  39. futurablack bt
  40. futuralight bt
  41. gabriola
  42. garamond
  43. gautami
  44. gaze
  45. geneva
  46. georgia
  47. georgia italic impact
  48. geotype tt
  49. helterskelter
  50. helvetica
  51. herman
  52. highlight let
  53. impact
  54. jester
  55. joan
  56. john handy let
  57. jokerman let
  58. kelt
  59. kids
  60. kino mt
  61. la bamba let
  62. latha
  63. lithograph
  64. lucida console
  65. lucida sans console
  66. lucida sans unicode
  67. map symbols
  68. marlett
  69. matteroffact
  70. matisse itc
  71. matura mt script capitals
  72. mekanik let
  73. modern
  74. modern ms sans serif
  75. monaco
  76. monospace
  77. monotype sorts
  78. ms linedraw
  79. ms sans serif
  80. ms serif
  81. mv boli
  82. new york
  83. nyala
  84. olddreadfulno7 bt
  85. orange let
  86. palatino
  87. palatino linotype
  88. playbill
  89. pump demi bold let
  90. puppylike
  91. roland
  92. roman
  93. sans-serif
  94. script
  95. scripts
  96. scruff let
  97. segoe print
  98. segoe script
  99. segoe ui
  100. serif
  101. short hand
  102. signs normal
  103. simplex
  104. simpson
  105. small fonts
  106. stylus bt
  107. superfrench
  108. surfer
  109. swis721 bt
  110. swis721 blkoul bt
  111. symap
  112. symbol (symbol)
  113. tahoma
  114. technic
  115. tempus sans itc
  116. terk
  117. times
  118. times new roman
  119. trebuchet ms
  120. trendy
  121. txt
  122. tunga
  123. verdana
  124. victorian let
  125. vineta bt
  126. vivian
  127. webdings (webdings)
  128. western
  129. westminster
  130. westwood let
  131. wide latin
  132. wingdings (wingding)
  133. zapfellipt bt
  1. ACADEMY ENGRAVED LET
  2. ALGERIAN
  3. AMAZE
  4. ARIAL
  5. ARIAL BLACK
  6. BALTHAZAR
  7. BANKGOTHIC LT BT
  8. BART
  9. BIMINI
  10. BOOK ANTIQUA
  11. BOOKMAN OLD STYLE
  12. BRAGGADOCIO
  13. BRITANNIC BOLD
  14. BRUSH SCRIPT MT
  15. CALIBRI
  16. CAMBRIA
  17. CANDARA
  18. CENTURY GOTHIC
  19. CENTURY SCHOOLBOOK
  20. CHASM
  21. CHICAGO
  22. COLONNA MT
  23. COMIC SANS MS
  24. COMMERCIALSCRIPT BT
  25. CONSOLAS
  26. CONSTANTIA
  27. COOLSVILLE
  28. CORBEL
  29. COURIER
  30. COURIER NEW
  31. CURSIVE
  32. DAYTON
  33. DESDEMONA
  34. ESTRANGELO EDESSA
  35. FANTASY
  36. FLAT BRUSH
  37. FOOTLIGHT MT LIGHT
  38. FRANKLIN GOTHIC MEDIUM
  39. FUTURABLACK BT
  40. FUTURALIGHT BT
  41. GABRIOLA
  42. GARAMOND
  43. GAUTAMI
  44. GAZE
  45. GENEVA
  46. GEORGIA
  47. GEORGIA ITALIC IMPACT
  48. GEOTYPE TT
  49. HELTERSKELTER
  50. HELVETICA
  51. HERMAN
  52. HIGHLIGHT LET
  53. IMPACT
  54. JESTER
  55. JOAN
  56. JOHN HANDY LET
  57. JOKERMAN LET
  58. KELT
  59. KIDS
  60. KINO MT
  61. LA BAMBA LET
  62. LATHA
  63. LITHOGRAPH
  64. LUCIDA CONSOLE
  65. LUCIDA SANS CONSOLE
  66. LUCIDA SANS UNICODE
  67. MAP SYMBOLS
  68. MARLETT
  69. MATTEROFFACT
  70. MATISSE ITC
  71. MATURA MT
  72. MEKANIK LET
  73. MODERN
  74. MODERN MS SANS SERIF
  75. MONACO
  76. MONOSPACE
  77. MONOTYPE SORTS
  78. MS LINEDRAW
  79. MS SANS SERIF
  80. MS SERIF
  81. MV BOLI
  82. NEW YORK
  83. NYALA
  84. OLDDREADFULNO7 BT
  85. ORANGE LET
  86. PALATINO
  87. PALATINO LINOTYPE
  88. PLAYBILL
  89. PUMP DEMI BOLD LET
  90. PUPPYLIKE
  91. ROLAND
  92. ROMAN
  93. SANS-SERIF
  94. SCRIPT
  95. SCRIPTS
  96. SCRUFF LET
  97. SEGOE PRINT
  98. SEGOE SCRIPT
  99. SEGOE UI
  100. SERIF
  101. SHORT HAND
  102. SIGNS NORMAL
  103. SIMPLEX
  104. SIMPSON
  105. SMALL FONTS
  106. STYLUS BT
  107. SUPERFRENCH
  108. SURFER
  109. SWIS721 BT
  110. SWIS721 BLKOUL BT
  111. SYMAP
  112. SYMBOL (SYMBOL)
  113. TAHOMA
  114. TECHNIC
  115. TEMPUS SANS ITC
  116. TERK
  117. TIMES
  118. TIMES NEW ROMAN
  119. TREBUCHET MS
  120. TRENDY
  121. TXT
  122. TUNGA
  123. VERDANA
  124. VICTORIAN LET
  125. VINETA BT
  126. VIVIAN
  127. WEBDINGS (WEBDINGS)
  128. WESTERN
  129. WESTMINSTER
  130. WESTWOOD LET
  131. WIDE LATIN
  132. WINGDINGS (WINGDINGS)
  133. ZAPFELLIPT BT

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

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

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

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

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

нижний регистр ВЕРХНИЙ РЕГИСТР
Название шрифта 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 , Charcoal 6 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

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

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

Тег font имеет всего три атрибута:

  • color – задает цвет текста;
  • size – устанавливает размер текста;
  • face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:


Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

HTML Tag

The tag defines the font characteristics. Size, color и and typeface are defined by the size , color and face attributes.

The is a deprecated HTML tag, use CSS styles instead (see an example below).

Syntax

The tag comes in pairs, the content is written between the opening ( ) and the closing ( ) tags.

Example

Result

CSS Styles

To change the color of the text, CSS color property is used instead of the color attribute. CSS font-family or font-face properties come to replace the face attribute, and instead of the size attribute, the CSS font-size property is used.

Теги HTML для работы со шрифтами: font color, font face, font size

Font color, font face, font size

Доброго времени суток, уважаемые читатели блога Moi-tarakany.ru !

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

В этом посте речь пойдёт о тегах, предназначенных для шрифтов.

Начнем, пожалуй, с цвета.

Font color

Как известно любой цвет — это смешанные в определенной пропорции три основных цвета — красный, зелёный и синий.

В HTML цвет задаётся шестнадцатеричным кодом. В шестнадцатеричной системе исчислений используется не десять, а 16 цифр. Первые 10 это цифры от 0 до 9, остальные 6 — обозначаются символами A, B, C, D, E и F. Цвет состоит из трёх пар цифр. Первая пара — обозначает красный цвет, вторая — зелёный, третья — синий. Чем выше значение конкретной пары, тем заметней будет цвет в конкретном оттенке.

#FF0000 — red — красный.
#00FF00 — green — зелёный.
#0000FF — blue — синий.
#000000 — black — чёрный.
#ffffff — white — белый.

Можно также использовать имена цветов на английском red , green , black , yellov , indigo , orange и так далее.
Но на самом деле цвета не всегда соответствуют своим именам. Например, darkgrey (тёмно-серый) светлее, чем grey (серый) . Поэтому лучше использовать шестнадцатеричный код.

Для изменения цвета фона используется атрибут bgcolor (цвет фона) тэга body .
Например:

Задаем шрифт текста. Атрибут face тега font

Все мы пользовались известным редактором текста Word. И мы знаем, что в нем очень легко изменить шрифт, размер и цвет текста. Так вот, в html тоже без особого труда можно задать эти параметры. Для этого существует тег . Он парный и потому имеет закрывающий тег , ведь браузеру нужно понимать, где начало и конец текста, которому мы изменяем параметры. Тег имеет три атрибута: face, size и color, задающие тексту шрифт, размер и цвет соответственно. В этом уроке мы подробно рассмотрим шрифты.

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

Названия шрифтов можно посмотреть в редакторе Word. Там довольно длинный список. Давайте на примере рассмотрим, как изменить шрифт текста в html и напишем следующий код:

Сохраним файл под любым именем и посмотрим, что получилось:

Как мы видим, все сработало: первый абзац имеет шрифт по умолчанию, во втором абзаце мы задали шрифт Batang, а в третьем – текст отобразился шрифтом Comic Sans MS. В принципе все легко и понятно, но есть одно замечание. Так как заданный шрифт не сохраняется в HTML – файле, то нет никакой гарантии, что в браузере он отобразиться как нужно. Мы не можем быть уверены на 100%, что на компьютере посетителя имеется шрифт, который мы задали, тем более, если этот шрифт не стандартный. Поэтому в атрибуте face лучше указывать около трех названий шрифтов, которые перечисляются через запятую, чтоб хоть один из них отобразился наверняка. Давайте рассмотрим пример:

Посмотрим на результат:

Текст отобразился шрифтом Batang, который мы указали в атрибуте face первым. Если не сработает этот шрифт в браузере посетителя, то сработает второй шрифт — Comic Sans MS и если не сработает этот шрифт, то уж наверняка текст отобразиться шрифтом Arial.

Другие параметры шрифта

И на закуску давайте рассмотрим другие параметры шрифта. В первом уроке мы уже рассмотрели теги, которые задают полужирный шрифт и курсив, это теги и соответственно. Давайте рассмотрим еще несколько тегов, которые задают стиль шрифту:

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

Всему тексту мы задали шрифт Comic Sans MS, первую строку подчеркнули, используя тег , помним из первого урока, что тег
делает перенос на новую строку, вторая строка у нас перечеркнута благодаря тегу и в последней строке мы задали в верхнем индексе слово «верх». Все ничего сложного! С остальными тегами можете поэкспериментировать самостоятельно. Если вам все понятно, можете переходить на следующий урок, в котором мы рассмотрим, как задать тексту размер, если же остались вопросы, посмотрите подробное видео этого урока.

в HTML

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

Атрибуты

  • color — Задает цвет текста.
  • face — Задает имя шрифта.
  • size — Устанавливает размер шрифта.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Модель тега: inline (встроенный, уровня строки).

Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

Пример HTML: применение тега FONT

Результат. Применение тега FONT.

Поддержка версиями HTML


Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Частично Нет Частично Нет

В HTML 4.01 и XHTML 1.0 использовать тег допускается только с Transitional и Frameset, в противном случае будет невалидный код. А вообще рекомендуется применять стили (CSS).

High Star

Уроки веб-мастеру

Как самому с нуля сделать сайт? Здесь даны основы сайтостроения, которых еще никто не отменял. Как пользоваться такими программами, как PhotoShop, ImageReady и другими. Полезные советы вебмастерам.

Шрифты

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

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

Вот некоторые шрифты: Verdana, Arial, Helvetica, Courier, Times New Roman, Impact, Comic Sans MS, Half и многие-многие другие. Мы можем написать один и тот же текст разными способами:

Arial black «> Шрифт Arial black

Arial Narrow «> Шрифт Arial Narrow

Book Antiqua «> Шрифт Book Antiqua

Bookman Old Style «> Шрифт Bookman Old Style

Comic Sans MS «> Шрифт Comic Sans MS

Courier «> Шрифт Courier

Courier new «> Шрифт Courier new

Century Gothic «> Шрифт Century Gothic

Garamond «> Шрифт Garamond

Georgia «> Шрифт Georgia

Impact «> Шрифт Impact

Lucida Console «> Шрифт Lucida Console

Lucida Sans Unicode «> Шрифт Lucida Sans Unicode

Microsoft Sans Serif «> Шрифт Microsoft Sans Serif

Helvetica «> Шрифт Helvetica

Tahoma «> Шрифт Tahoma

Times New Roman «> Шрифт Times New Roman

Verdana «> Шрифт Verdana

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

  • Serif — шрифт с засечками. Сюда относятся шрифты: Book Antiqua, Bookman Old Style, Garamond, Georgia, Times New Roman.
  • Sans-serif — шрифт без засечек (sans в переводе означает «без», то есть БЕЗ засечек!). К этой группе относятся шрифты: Arial, Century Gothic, Impact, Lucida Sans Unicode, Microsoft Sans Serif, Tahoma, Verdana.
  • Monospace — шрифт фиксированной ширины. Сюда можно отнести Courier New, Lucida Console.
  • fantasy — ну, к этим шрифтам относят те, которые не вошли в первую тройку. Примером может служить Comic Sans MS.

Бывает так — вы определились со шрифтом, расписали свою страничку красивыми иероглифами, а у пользователя, как назло, такого шрифта не установлено! Что же делать? А ответ прост — Перечисляйте по порядку шрифты, которые возможно, у него есть, а заканчивайте строчку семейством шрифтов. Например:

А тут отобразится тот шрифт, которые имеется у клиента, начиная с Times New Roman, и далее по перебору

Так что будьте уверены, браузер пользователя сначала поищет у себя шрифт Times New Roman, и если такого шрифта не обнаружит, побежит искать Garamond. Если и такого шрифта не отыщется, попробует последний шанс — Georgia или любой другой из семейства serif. Если же и этого шрифта не окажется, то тогда поставит тот шрифт, который у пользователя установлен по умолчанию. И на этом успокоится.

Обратите внимание, что если название шрифта более одного слова, то оно заключается в кавычки, например «Times New Roman», одиночные названия могут употребляться как с кавычками, так и без кавычек.

Шрифты HTML

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

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

Шрифты в HTML

Тег на данный момент устарел. Предполагается, что он будет удален из будущей версии HTML.

Даже если многие люди используют его, старайтесь не пользоваться им, вместо него лучше использовать стили (CSS).

HTML-тег

С таким кодом, как приведен в примере ниже, вы можете указать и размер и тип шрифта, которым будет выведен ваш текст:

Пример

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

size=»число» size=»2″ Размер шрифта
size=»+число» size=»+1″ Увеличение размера шрифта на 1 ед. относительно нормального размера
size=»-число» size=»-1″ Уменьшение размера шрифта на 1 ед. относительно нормального размера
face=»название шрифта» face=»Times» Название шрифта на английском языке
color=»код цвета» color=»#eeff00″ Код цвета текста
color=»название цвета» color=»red» Название цвета текста на английском языке

Тег не должен использоваться

Тег признан устаревшим в последних версиях HTML.Консортциум W3C удалил этот тег из своих рекомендаций. В будущих версиях HTML каскадные таблицы стилей (CSS) будут использоваться для разметки и оформления html-элементов.

Где узнать больше о CSS?

Для начала закончите изучать HTML-учебник. В следующих главах вы узнаете, почему некоторые теги, например , были удалены из HTML, как вставить каскадные таблицы стилей (CSS) в html-документ.

Чтобы узнать больше о каскадных таблицах стилей нажмите на: Учебник CSS.

Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!

Илон Маск рекомендует:  Липкие окошки
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL