CSS 字体样式


目录

    显示目录


字体样式

font-style 属性主要用于指定斜体文本。

该属性具有三个值:

  • 正常 - 文本正常显示

  • 斜体 - 文本以斜体显示

  • 倾斜 - 文本“倾斜” (斜体与斜体非常相似,但支持较少)

例子

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>

<h1>The font-style property</h1>

<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>



字体粗细

font-weight 属性指定字体的粗细:

例子

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<h1>The font-weight property</h1>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>



字体变体

font-variant 属性指定文本是否应该 以小型大写字体显示。

在小型大写字体中,所有小写字母都会转换为大写字母 字母。但是,转换后的大写字母会以较小的字体显示 比文本中原来的大写字母。

例子

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>

<h1>The font-variant property</h1>

<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

</body>
</html>