0
点赞
收藏
分享

微信扫一扫

CSS教程(四)- 字体

左手梦圆 2024-11-11 阅读 18
css前端

1、尺寸单位

  • px 像素单位
  • % 百分比,参照父元素对应属性的值进行计算
  • em 字体尺寸单位,参照父元素的字体大小计算,1em=16px
  • rem字体尺寸单位,参照根元素的字体大小计算,1rem=16px



2、字体属性

  • 介绍

    • CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
  • 语法

    选择器{
        font-family: "字体"
    }
    
    选择器{
        font-family: "字体1", "字体2", "...";
    }
    
  • 说明

    • 字体之间必须使用 英文状态下的逗号隔开,字体加引号
    • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
    • 最常见的几个字体:body {font-family: ‘Microsoft YaHei’, ‘tahoma,arial’, ‘Hiragino Sans GB’; }



3、字体大小

  • 语法

    选择器{
        font-size: xx px;
    }
    
  • 说明

    • 谷歌浏览器默认的文字大小为16px(网页的最常用的单位 )
    • 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
    • 可以给 body 指定整个页面文字的大小



4、字体粗细

  • 语法

    选择器{
        font-weight: bold;     /* 取值: normal(默认值)、bold(加粗)、100-900*/
    }
    
  • 说明

    • 400等同于normal,700等同于bold,注意数值后不跟单位



5、字体样式

  • 语法

    选择器{
        font-style: normal;     /* 取值: normal(默认值)、italic(倾斜)*/
    }
    
  • 说明

    • 很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜字体。



6、字体复合属性

  • 语法

    选择器{
          font: font-style  font-weight  font-size/line-height  font-family; 
    }
    
  • 说明

    • 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
    • 不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用



7、示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字体设置</title>
    <style>
      /* 在body标签中统一设置字体大小 */
      body {
        font-size: 18px;
      }

      span {
        font-style: italic;
        font-size: 30px;
        font-weight: 700;
        font-family: "华文琥珀";
      }

      .sp1 {
        /* 针对font的综合写法 */
        /* font: normal 600 20px/1.5 "华文行楷"; */
        font: 30px/1.5 "华文行楷"; /* 字体大小、字体不能省略*/
      }
    </style>
  </head>
  <body>
    <span>国庆假期后,再无假期,wuwu</span><br />
    <span class="sp1">国庆假期后,一定要好好学习</span>
  </body>
</html>

在这里插入图片描述



8、总结

属性表示注意点
font-size字号通常用 px像素为单位,必须要写单位
font-family字体按照项目设计来选择字体
font-weight字体粗细加粗为700或bold、不加粗是normal或400,数字不能跟单位
font-style字体样式倾斜式 italic,不倾斜为 normal(常用)
font字体连写1、字体连写必须按照顺序
2、字号 与 字体 必须同时出现
举报

相关推荐

CSS——字体图标

CSS字体样式

CSS(二)——CSS字体属性

css笔记(字体属性)

CSS立体样式字体

字体图标使用教程

0 条评论