CSS教程

CSS - 字体

本章将教您如何设置HTML元素中可用的内容字体.您可以设置元素的以下字体属性 :

font-family 属性是用于更改字体的面.
font-style 属性用于将字体设为斜体或斜体.
font-variant 属性用于创建小型大写字母效果.
font-weight 属性用于增加或减少字体显示的粗体或亮度.
font-size 属性用于增加或减少字体的大小.
font property用作速记来指定许多其他字体属性.

设置字体系列

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

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

Set the Font Style

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

<html>
   <head>
   </head>

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

Set the Font Variant

以下示例演示如何设置元素的字体变体。可能的值是普通和小型上限。

<html>
   <head>
   </head>

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

Set the Font Weight

以下示例演示如何设置元素的字体粗细。 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>

Set the Font Size

以下示例演示如何设置元素的字体大小。 font-size属性用于控制字体的大小。可能的值可以是xx-小，x-小，小，中，大，x-大，xx-大，更小，更大，像素大小或％。

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

Set the Font Size Adjust

以下示例演示如何设置元素的字体大小调整。使用此属性可以调整x高度以使字体更清晰。可能的值可以是任何数字。

<html>
   <head>
   </head>

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

Set the Font Stretch

以下示例演示如何设置元素的字体拉伸。此属性依赖于用户的计算机来使用所使用字体的扩展版或精简版。

可能的值可以是正常的，更宽的，更窄的，超浓缩的，超凝聚的，凝聚的，半凝聚的，半膨胀的，膨胀的，超膨胀的，超膨胀的。

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

Shorthand Property

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