CSS 字体

本章教你如何设置 HTML 元素中的内容的字体。你可以设置元素的以下字体属性：

font-family 属性用于改变字体的外观。
font-style 属性用于使字体变为斜体或倾斜。
font-variant 属性用于创建小型大写字母效果。
font-weight 属性用于增加或减小字体的粗细。
font-size 属性用于增加或减小字体的大小。
font 属性用于简写指定其他多个字体属性。

设置Font Family

以下是一个示例，演示如何设置元素的字体系列。可能的值可以是任何字体系列的名称。

<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>

这将产生以下结果−

CSS 字体

设置字体样式

以下是一个示例，演示如何设置元素的字体样式。可能的值有 normal，italic 和 oblique。

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html>

这将会产生以下结果 −

CSS 字体

设置字体变体

下面的示例演示了如何设置元素的字体变体。可用的值为normal和small-caps。

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html>

这将产生以下结果−

CSS 字体

设置字体粗细

以下示例演示如何设置元素的字体粗细。font-weight属性提供了指定字体加粗程度的功能。可能的值有normal、bold、bolder、lighter、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>

这将产生以下结果−

CSS 字体

设置字体大小

下面的示例演示了如何设置元素的字体大小。font-size属性用于控制字体的大小。可能的值包括xx-small，x-small，small，medium，large，x-large，xx-large，smaller，larger，以像素或%为单位的大小。

<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>

这将产生以下结果−

CSS 字体

设置字体大小调整

下面的示例演示了如何设置元素的字体大小调整。该属性允许您调整x高度，使字体更易读。可能的值可以是任何数字。

<html>
   <head>
   </head>

   <body>
      <p **style = "font-size-adjust:0.61;"** >
         This text is using a font-size-adjust value.
      </p>
   </body>
</html>

这将产生以下结果 −

CSS 字体

设置字体伸缩

以下示例演示如何设置元素的字体伸缩。该属性依赖于用户的计算机是否具有所使用字体的扩展或压缩版本。

可能的值可以是normal、wider、narrower、ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded。

<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>

这将产生以下结果 –

CSS 字体

简写属性

您可以使用 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>