- HTML Tag
- Syntax
- Example of using HTML tag:
- Result
- CSS Styles
- Example of changing the style of the text with CSS:
- Attributes
- How to style tag?
- Common properties to alter the visual weight/emphasis/size of text in tag:
- Coloring text in tag:
- Text layout styles for tag:
- Other properties worth looking at for tag:
- Html коды для шрифтов
HTML Tag
The tag defines the font characteristics. Size, color and typeface are defined by the size , color and face attributes.
Syntax
The tag comes in pairs. The content is written between the opening () and closing () tags.
Example of using HTML tag:
html> html> head> title>Title of the document title> head> body> p> font size="2" color="#1c87c9">Blue text font> p> p> font size="3" color="red">Red text, font size increased. font> p> p> font face="arial" color="#8ebf42">Green text, typeface changed. font> p> body> html>
Result
CSS Styles
To change the text color, use the CSS color property instead of the color attribute. CSS font-family or font-face properties replace the face attribute, and instead of the size attribute, the CSS font-size property is used.
Example of changing the style of the text with CSS:
html> html> head> title>Title of the document title> head> body> p style="font-size:16px; color:#1c87c9;">Blue text. p> p style="font-size:18px; color:red;">Red text, font size increased. p> p style="font-size:18px; color:#8ebf42; font-family:arial;">Green text, typeface changed. p> body> html>
Attributes
Attribute | Value | Description |
---|---|---|
color | rgb (x, x, x) #xxxxxx colorname | Sets the color of the text. |
face | font_family | Sets the typeface. |
size | number | Sets the size of the text. |
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for tag:
- CSS text-shadow property adds shadow to text.
- CSS text-align-last property sets the alignment of the last line of the text.
- CSS line-height property specifies the height of a line.
- CSS letter-spacing property defines the spaces between letters/characters in a text.
- CSS word-spacing property sets the spacing between words.
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. Загрузка шрифтов вместе с сайтом требует особых приёмов.
Посмотреть, какие наиболее распространённые шрифты установлены на вашем устройстве можно в таблице ниже. Если шрифт не установлен на вашем устройстве, то соответствующий текст в списке будет отображён стандартными системным шрифтом (обычно из того же семейства шрифтов).
- academy engraved let
- algerian
- amaze
- arial
- arial black
- balthazar
- bankgothic lt bt
- bart
- bimini
- book antiqua
- bookman old style
- braggadocio
- britannic bold
- brush script mt
- calibri
- cambria
- candara
- century gothic
- century schoolbook
- chasm
- chicago
- colonna mt
- comic sans ms
- commercialscript bt
- consolas
- constantia
- coolsville
- corbel
- courier
- courier new
- cursive
- dayton
- desdemona
- estrangelo edessa
- fantasy
- flat brush
- footlight mt light
- franklin gothic medium
- futurablack bt
- futuralight bt
- gabriola
- garamond
- gautami
- gaze
- geneva
- georgia
- georgia italic impact
- geotype tt
- helterskelter
- helvetica
- herman
- highlight let
- impact
- jester
- joan
- john handy let
- jokerman let
- kelt
- kids
- kino mt
- la bamba let
- latha
- lithograph
- lucida console
- lucida sans console
- lucida sans unicode
- map symbols
- marlett
- matteroffact
- matisse itc
- matura mt script capitals
- mekanik let
- modern
- modern ms sans serif
- monaco
- monospace
- monotype sorts
- ms linedraw
- ms sans serif
- ms serif
- mv boli
- new york
- nyala
- olddreadfulno7 bt
- orange let
- palatino
- palatino linotype
- playbill
- pump demi bold let
- puppylike
- roland
- roman
- sans-serif
- script
- scripts
- scruff let
- segoe print
- segoe script
- segoe ui
- serif
- short hand
- signs normal
- simplex
- simpson
- small fonts
- stylus bt
- superfrench
- surfer
- swis721 bt
- swis721 blkoul bt
- symap
- symbol (symbol)
- tahoma
- technic
- tempus sans itc
- terk
- times
- times new roman
- trebuchet ms
- trendy
- txt
- tunga
- verdana
- victorian let
- vineta bt
- vivian
- webdings (webdings)
- western
- westminster
- westwood let
- wide latin
- wingdings (wingding)
- zapfellipt bt
- ACADEMY ENGRAVED LET
- ALGERIAN
- AMAZE
- ARIAL
- ARIAL BLACK
- BALTHAZAR
- BANKGOTHIC LT BT
- BART
- BIMINI
- BOOK ANTIQUA
- BOOKMAN OLD STYLE
- BRAGGADOCIO
- BRITANNIC BOLD
- BRUSH SCRIPT MT
- CALIBRI
- CAMBRIA
- CANDARA
- CENTURY GOTHIC
- CENTURY SCHOOLBOOK
- CHASM
- CHICAGO
- COLONNA MT
- COMIC SANS MS
- COMMERCIALSCRIPT BT
- CONSOLAS
- CONSTANTIA
- COOLSVILLE
- CORBEL
- COURIER
- COURIER NEW
- CURSIVE
- DAYTON
- DESDEMONA
- ESTRANGELO EDESSA
- FANTASY
- FLAT BRUSH
- FOOTLIGHT MT LIGHT
- FRANKLIN GOTHIC MEDIUM
- FUTURABLACK BT
- FUTURALIGHT BT
- GABRIOLA
- GARAMOND
- GAUTAMI
- GAZE
- GENEVA
- GEORGIA
- GEORGIA ITALIC IMPACT
- GEOTYPE TT
- HELTERSKELTER
- HELVETICA
- HERMAN
- HIGHLIGHT LET
- IMPACT
- JESTER
- JOAN
- JOHN HANDY LET
- JOKERMAN LET
- KELT
- KIDS
- KINO MT
- LA BAMBA LET
- LATHA
- LITHOGRAPH
- LUCIDA CONSOLE
- LUCIDA SANS CONSOLE
- LUCIDA SANS UNICODE
- MAP SYMBOLS
- MARLETT
- MATTEROFFACT
- MATISSE ITC
- MATURA MT
- MEKANIK LET
- MODERN
- MODERN MS SANS SERIF
- MONACO
- MONOSPACE
- MONOTYPE SORTS
- MS LINEDRAW
- MS SANS SERIF
- MS SERIF
- MV BOLI
- NEW YORK
- NYALA
- OLDDREADFULNO7 BT
- ORANGE LET
- PALATINO
- PALATINO LINOTYPE
- PLAYBILL
- PUMP DEMI BOLD LET
- PUPPYLIKE
- ROLAND
- ROMAN
- SANS-SERIF
- SCRIPT
- SCRIPTS
- SCRUFF LET
- SEGOE PRINT
- SEGOE SCRIPT
- SEGOE UI
- SERIF
- SHORT HAND
- SIGNS NORMAL
- SIMPLEX
- SIMPSON
- SMALL FONTS
- STYLUS BT
- SUPERFRENCH
- SURFER
- SWIS721 BT
- SWIS721 BLKOUL BT
- SYMAP
- SYMBOL (SYMBOL)
- TAHOMA
- TECHNIC
- TEMPUS SANS ITC
- TERK
- TIMES
- TIMES NEW ROMAN
- TREBUCHET MS
- TRENDY
- TXT
- TUNGA
- VERDANA
- VICTORIAN LET
- VINETA BT
- VIVIAN
- WEBDINGS (WEBDINGS)
- WESTERN
- WESTMINSTER
- WESTWOOD LET
- WIDE LATIN
- WINGDINGS (WINGDINGS)
- 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 включен: