В этой главе вы узнаете, как установить шрифты содержимого, доступного в элементе HTML. Вы можете установить следующие свойства шрифта элемента —
-
Свойство font-family используется для изменения шрифта.
-
Свойство font-style используется, чтобы сделать шрифт курсивным или наклонным.
-
Свойство font-option используется для создания эффекта маленьких заглавных букв.
-
Свойство font-weight используется для увеличения или уменьшения яркости или подсветки шрифта.
-
Свойство font-size используется для увеличения или уменьшения размера шрифта.
-
Свойство font используется в качестве сокращения для указания ряда других свойств шрифта.
Свойство font-family используется для изменения шрифта.
Свойство font-style используется, чтобы сделать шрифт курсивным или наклонным.
Свойство font-option используется для создания эффекта маленьких заглавных букв.
Свойство font-weight используется для увеличения или уменьшения яркости или подсветки шрифта.
Свойство font-size используется для увеличения или уменьшения размера шрифта.
Свойство font используется в качестве сокращения для указания ряда других свойств шрифта.
Установить семейство шрифтов
Ниже приведен пример, который демонстрирует, как установить семейство шрифтов элемента. Возможное значение может быть любым именем семейства шрифтов.
<html> <head> </head> <body> <p style = "font-family:georgia,garamond,serif;" > This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. </p> </body> </html>
Это даст следующий результат —
Установить стиль шрифта
Ниже приведен пример, который демонстрирует, как установить стиль шрифта элемента. Возможные значения: нормальный, курсив и наклонный .
<html>
<head>
</head>
<body>
<p style = "font-style:italic;" >
This text will be rendered in italic style
</p>
</body>
</html>
Это даст следующий результат —
Установить вариант шрифта
В следующем примере показано, как установить вариант шрифта элемента. Возможные значения — нормальные и заглавные .
<html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;" >
This text will be rendered as small caps
</p>
</body>
</html>
Это даст следующий результат —
Установите вес шрифта
В следующем примере показано, как установить вес шрифта элемента. Свойство font-weight обеспечивает функциональность, позволяющую указать, насколько жирным является шрифт. Возможные значения могут быть обычными, жирными, жирными, светлыми, 100, 200, 300, 400, 500, 600, 700, 800, 900 .
<html>
<head>
</head>
<body>
<p style = "font-weight:bold;" >
This font is bold.
</p>
<p style = "font-weight:bolder;" >
This font is bolder.
</p>
<p style = "font-weight:500;" >
This font is 500 weight.
</p>
</body>
</html>
Это даст следующий результат —
Установите размер шрифта
В следующем примере показано, как установить размер шрифта элемента. Свойство font-size используется для управления размером шрифтов. Возможные значения: хх-маленький, х-маленький, маленький, средний, большой, х-большой, хх-большой, меньше, больше, размер в пикселях или в% .
<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, чтобы сделать шрифты более разборчивыми. Возможное значение может быть любым числом.
<html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;" >
This text is using a font-size-adjust value.
</p>
</body>
</html>
Это даст следующий результат —
Установить растяжку шрифта
В следующем примере показано, как установить растяжку шрифта элемента. Это свойство зависит от компьютера пользователя, имеющего расширенную или сокращенную версию используемого шрифта.
Возможные значения могут быть нормальными, более широкими, более узкими, сверхконденсированными, сверхконденсированными, конденсированными, полуконденсированными, полурасширенными, расширенными, сверхрасширенными, ультрарасширенными .
<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, чтобы установить все свойства шрифта одновременно. Например —
<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>
Это даст следующий результат —