HTML5的字体样式设置方法

字体样式

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

此属性可设置三个值:

  • normal – 文字正常显示
  • italic – 文本以斜体显示
  • oblique – 文本为“倾斜”(倾斜与斜体非常
    p.normal {
      font-style: normal;
    }
    
    p.italic {
      font-style: italic;
    }
    
    p.oblique {
      font-style: oblique;
    }

    字体粗细

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

  • p.normal {
      font-weight: normal;
    }
    
    p.thick {
      font-weight: bold;
    }

    字体变体

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

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

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

    字体大小

  • font-size 属性设置文本的大小。

    在网页设计中,能够管理文本大小很重要。但是,不应使用调整字体大小来使段落看起来像标题,或是使标题看起来像段落。

    请始终使用正确的 HTML 标签,例如 <h1> – <h6> 用于标题,而 <p> 仅用于段落。

    font-size 值可以是绝对或相对大小。

    以像素设置字体大小

    使用像素设置文本大小可以完全控制文本大小

  • h1 {
      font-size: 40px;
    }
    
    h2 {
      font-size: 30px;
    }
    
    p {
      font-size: 14px;
    }

    字体属性

    为了缩短代码,也可以在一个属性中指定所有单个字体属性。

    font 属性是以下属性的简写属性:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
  • 注意:font-size 和 font-family 的值是必需的。如果缺少其他值之一,则会使用其默认值。
    原文作者:ch-2022-3-17
    原文地址: https://blog.csdn.net/m0_66868047/article/details/123738917
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞