参考手册
CSS 字体
CSS 字体大小
返回 CSS 字体

CSS 字体样式

字体样式

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

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.normal {
  6.   font-style: normal;
  7. }
  9. p.italic {
  10.   font-style: italic;
  11. }
  13. p.oblique {
  14.   font-style: oblique;
  15. }
  16. </style>
  17. </head>
  18. <body>
  20. <p class="normal">这个段落是 normal 样式.</p>
  21. <p class="italic">这个段落是 in italic 样式.</p>
  22. <p class="oblique">这个段落是 in oblique 样式.</p>
  24. </body>
  25. </html>
运行一下

字体粗细

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.normal {
  6.   font-weight: normal;
  7. }
  9. p.light {
  10.   font-weight: lighter;
  11. }
  13. p.thick {
  14.   font-weight: bold;
  15. }
  17. p.thicker {
  18.   font-weight: 900;
  19. }
  20. </style>
  21. </head>
  22. <body>
  24. <p class="normal">这是一个段落。</p>
  25. <p class="light">这是一个段落。</p>
  26. <p class="thick">这是一个段落。</p>
  27. <p class="thicker">这是一个段落。</p>
  29. </body>
  30. </html>
运行一下

字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. p.normal {
  6.   font-variant: normal;
  7. }
  9. p.small {
  10.   font-variant: small-caps;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <p class="normal">编程路漫漫</p>
  17. <p class="small">编程路漫漫</p>
  19. </body>
  20. </html>
运行一下
CSS 字体大小

分类导航