В этой главе вы узнаете, как установить шрифты содержимого, доступного в элементе HTML. Вы можете установить следующие свойства шрифта элемента —
- Свойство font-family используется для изменения шрифта.
- Свойство font-style используется, чтобы сделать шрифт курсивным или наклонным.
- Свойство font-option используется для создания эффекта маленьких заглавных букв.
- Свойство font-weight используется для увеличения или уменьшения яркости или подсветки шрифта.
- Свойство font-size используется для увеличения или уменьшения размера шрифта.
- Свойство font используется в качестве сокращения для указания ряда других свойств шрифта.
Свойство font-family используется для изменения шрифта.
Свойство font-style используется, чтобы сделать шрифт курсивным или наклонным.
Свойство font-option используется для создания эффекта маленьких заглавных букв.
Свойство font-weight используется для увеличения или уменьшения яркости или подсветки шрифта.
Свойство font-size используется для увеличения или уменьшения размера шрифта.
Свойство font используется в качестве сокращения для указания ряда других свойств шрифта.
Установить семейство шрифтов
В следующем примере показано, как установить размер шрифта элемента. Свойство font-size используется для управления размером шрифтов. Возможные значения: хх-маленький, х-маленький, маленький, средний, большой, х-большой, хх-большой, меньше, больше, размер в пикселях или в% .
Live Demo
<html>
<head>
</head>
<body>
<p style = "font-size:20px;" >
This font size is 20 pixels
</p>
<p style = "font-size:small;" >
This font size is small
</p>
<p style = "font-size:large;" >
This font size is large
</p>
</body>
</html>
Это даст следующий результат —
Установите размер шрифта
В следующем примере показано, как настроить размер шрифта для элемента. Это свойство позволяет настроить высоту x, чтобы сделать шрифты более разборчивыми. Возможное значение может быть любым числом.
Live Demo
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;" >
This text is using a font-size-adjust value.
</p>
</body>
</html>
Это даст следующий результат —
Установить растяжку шрифта
В следующем примере показано, как установить растяжку шрифта элемента. Это свойство зависит от компьютера пользователя, имеющего расширенную или сокращенную версию используемого шрифта.
Возможные значения могут быть нормальными, более широкими, более узкими, сверхконденсированными, сверхконденсированными, конденсированными, полуконденсированными, полурасширенными, расширенными, сверхрасширенными, ультрарасширенными .
Live Demo
<html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;" >
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>
</body>
</html>
Это даст следующий результат —
Сокращенное Свойство
Вы можете использовать свойство font, чтобы установить все свойства шрифта одновременно. Например —
Live Demo
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;" >
Applying all the properties on the text at once.
</p>
</body>
</html>