CSS - Fonts
本章将教您如何设置HTML元素中可用的内容字体。 您可以设置元素的以下字体属性 -
font-family属性用于更改字体的外观。
font-style属性用于使字体为斜体或斜体。
font-variant属性用于创建小型大写字母效果。
font-weight属性用于增加或减少字体显示的粗体或亮度。
font-size属性用于增加或减少字体的大小。
font属性用作速记以指定许多其他字体属性。
设置字体系列
以下是示例，演示如何设置元素的字体系列。 可能的值可以是任何字体系列名称。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-family:georgia,garamond,serif;"</b>>
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>
这将产生以下结果 -
新页面打开设置字体样式
以下是示例，演示如何设置元素的字体样式。 可能的值为normal, italic and oblique 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-style:italic;"</b>>
This text will be rendered in italic style
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置字体变体
以下示例演示如何设置元素的字体变体。 可能的值是normal and small-caps 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-variant:small-caps;"</b>>
This text will be rendered as small caps
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置字体粗细
以下示例演示如何设置元素的字体粗细。 font-weight属性提供指定字体粗体的功能。 可能的值可以是normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-weight:bold;"</b>>
This font is bold.
</p>
<p <b class="notranslate">style = "font-weight:bolder;"</b>>
This font is bolder.
</p>
<p <b class="notranslate">style = "font-weight:500;"</b>>
This font is 500 weight.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置字体大小
以下示例演示如何设置元素的字体大小。 font-size属性用于控制字体的大小。 可能的值可以是xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in % 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-size:20px;"</b>>
This font size is 20 pixels
</p>
<p <b class="notranslate">style = "font-size:small;"</b>>
This font size is small
</p>
<p <b class="notranslate">style = "font-size:large;"</b>>
This font size is large
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置字体大小调整
以下示例演示如何设置元素的字体大小调整。 使用此属性可以调整x高度以使字体更清晰。 可能的值可以是任何数字。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-size-adjust:0.61;"</b>>
This text is using a font-size-adjust value.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开设置Font Stretch
以下示例演示如何设置元素的字体拉伸。 此属性依赖于用户的计算机来使用所使用字体的扩展版或精简版。
可能的值可以是normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded 。
<html>
<head>
</head>
<body>
<p <b class="notranslate">style = "font-stretch:ultra-expanded;"</b>>
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 <b class="notranslate">style = "font:italic small-caps bold 15px georgia;"</b>>
Applying all the properties on the text at once.
</p>
</body>
</html>
这将产生以下结果 -
新页面打开