css学习笔记3(字体属性)

2023-12-21 06:18:41

3.CSS字体属性
3.1字体大小
  • 属性名:font-size

  • 语法:

    div {
        font-size: 40px;
    }
    
  • 注意点

    1. Chrome浏览器支持的最小文字为12px,默认的文字大小为16px,并且0px会自动消失。
    2. 不同浏览器默认的字体大小可能不一致,所以最好给一个明确的值,不要用默认大小。
    3. 通常以给body设置font-size属性,这样body中的其他元素就都可以继承了。
  • 借助控制台看样式:

    在这里插入图片描述

3.2字体族
  • 属性名:font-family

  • 语法:

    div {
        font-family: "STCaiyun", "Microsoft YaHei", sans-serif;
    }
    
  • 注意:

    1. 使用字体的英文名字兼容性会更好,具体的英文名可以自行查询,或在电脑的设置里去寻找。
    2. 如果字体名包含空格,必须使用引号包裹起来。
    3. 可以设置多个字体,按照从左到右的顺序逐个查找,找到就用,没有找到就使用后面的,且通常在最好写上serif(衬线字体)或sans-serif(非衬线字体)。
    4. windows系统中,默认的字体是微软雅黑。
3.3字体风格
  • 属性名:font-style

  • 常用值:

    1. normal:正常(默认值)
    2. italic:斜体(使用字体自带的斜体效果)
    3. oblique:正常(强制倾斜产生的斜体效果)

    实现斜体时,更推荐使用italic

  • 语法:

    div {
        font-style: italic;
    }
    
3.4字体风格
  • 属性名:font-weight

  • 常用值:

    • 关键词

      1. lighter:细
      2. normal:正常
      3. bold:粗
      4. bolder:很粗(多数字体不支持)
    • 数值

      1. 100~1000且无单位,数值越大,字体越粗(或一样粗,具体得看字体设计时的精确程度)。
      2. 100~300等同于lighter400~500等同于normal600及以上等同于bold
  • 语法:

    div {
        font-weight: bold;
    }
    
    div {
        font-weight: 600;
    }
    
3.5字体复合写法
  • 属性名:font,可以把上述字体样式合并成一个属性。
  • 编写规则:
    1. 字体大小、字体族必须都写上。
    2. 字体族必须是最后一位、字体大小必须是倒数第二位。
    3. 各个属性间用空格隔开。
  • 实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用font-size属性。

文章来源:https://blog.csdn.net/qq_42236791/article/details/135096134
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。