Шрифт – это структура, описывающая начертания каждого символа для написания текста.
Пример 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Начертание текста</title> <style> div { font-family: "Arial"; font-weight: bold; font-style: italic; font-size: x-large; } </style> </head> <body> <div>Это текст с заданным шрифтом</div> </body> </html> |
В таблице стилей свойство “font-family” задаёт название шрифта. Также в этом свойстве можно указать семейства шрифтов. Некоторые из семейств:
| Семейство | Результат |
|---|---|
| serif |  |
| sans-serif |  |
| monospace |  |
| cursive |  |
| fantasy |  |
Свойство “font-weight” задаёт толщину очертаний символов – жирность шрифта. Может иметь значения: “100”, “200”, “300”, “400”, “500”, “600”, “700”, “800”, “900”, “normal”, “bold”. Значение “100” – самый не жирный шрифт, “900” – самый жирный. “normal” – эквивалент “400”, обычная жирность шрифта, жирность по умолчанию. “bold” – эквивалент “700”, жирный шрифт.
Свойство “font-style” может иметь значения: “normal”, “italic” и “oblique”. Значение “normal” задаёт обычное начертание символов, значение по умолчанию. “italic” даёт курсивный шрифт. “oblique” устанавливает наклонное начертание символов.
Свойство “font-size” задаёт размер шрифта, который указывается в пикселах, относительных единицах измерения, процентах или специальными ключевыми словами. Например, “20px” – 20 пикселов. “3em” – 3 относительные единицы измерения, что равно 3 текущим размерам символа. “10%” – 10% от размера родительского HTML элемента, в котором располагается текст. Специальные ключевые слова: "xxx-small", "xx-small", "x-small", “small", “medium“, “large“, “x-large“, “xx-large", “xxx-large“. Значение "xxx-small" задаёт самый маленький размер шрифта, а “xxx-large” – самый большой. По умолчанию используется размер “medium“.
Пример 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Начертание текста</title> <style> div { font: italic bold x-large "Arial"; } </style> </head> <body> <div>Это текст с заданным шрифтом</div> </body> </html> |
Результат такой же как в примере 1. Свойство “font” позволяет объединить другие свойства по заданию шрифта.
Пример 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Начертание текста</title> <style> div { width: 200px; text-indent: 20px; line-height: 3em; } </style> </head> <body> <div> Наш магазин продаёт мебель: шкафы, столы, стулья и многое другое. </div> </body> </html> |
Свойство “text-indent” устанавливает отступ для первой строки в 20 пикселов, а свойство “line-height” устанавливает интервал между строками в 3 символа.
