字体属性是什么

• CSS Fonts 是 CSS 的一个模块
• 它定义了与字体相关的属性以及如何加载字体资源。
• 它允许您定义网页字体的样式
  -- 字体系列
  -- 字体大小
  -- 字体粗细
  -- 字体倾斜
  --字体大写
  -- 行高
  -- font复合

• font-family设置字体系列
• @font-face规则
• font-size设置字体大小
• font-weight设置字体粗细
• font-style设置字体风格
• font-variant设置字体变形
• line-height设置字体行高
• font复合属性

字体系列是什么

说明：字体分为两种

• 通用字体系列：指一组具有共同风格的字体系列，比如衬线和非衬线
• 特殊字体：指某一个字体，比如：微软雅黑、苹方、思源黑体

font-family

定义：指定元素的字体名称或字体家族名称。
语法

 body{
            font-family: Georgia, '-apple-system', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', 'sans-serif';
        }

解析

body{
  font-family: 英文字体, 苹果中文字体, window中文字体，通用非衬线字体;
}

语法规则

• 可以设置多个字体名称或字体系列名称作为属性值。
• 多个字体名称之间使用逗号隔开
• 如果字体名称有特殊字符需要加引号，比如：
  • 'Microsoft Yahei'：空格是特殊字符
  • 'sans-serif'：横线是特殊字符
  • '微软雅黑'：中文也是特殊字符
• 特殊字体在前，通用字体在后
• 英文字体在前，中文字体在后

@font-face

定义
用于定义元素的自定义字体。

• 自定义字体是非系统字体。也是非安全字体。
• 安全字体就是系统字体。系统字体就是安全字体。
• 安全：网页无论在哪字体保持一样
• 设置@font-face首选安全字体

语法

本地字体(绝对路径)

在线字体库(相对路径)

/*第一步：定义自定义字体*/
 @font-face{/*大括号：设置引入规自定义字体的规则*/
  /*该font-family是规则符，不是属性。用于描述自定义字体的名称*/
    font-family：'自定义字体名称'；
   src: url（‘自定义字体文件’）（相对路径、绝对路径）
}
/*第二步：向元素应用自定义字体*/

• font-family：必需。定义字体名称。
• src：必需。定义下载字体的 URL。
• 推荐使用woff文件

font-size

定义
定义页面字体的大小
用法

body{
font-size：相对值 | 绝对值
}

使用相对单位设置font-size

• 关键词：medum
• %
• em
• rem
• vh\vw

使用绝对单位设置font-size

• px
  用法
• 在做网页的时候，第一步要确定根字号大小

html{
  font-size: 16px;  /*根字号16px*/
  font-size: 62.5% /*根字号10px*/
}

• 在设置页面字号的时候，要有字号层级的意识，也就是说你需要确定：
  • 页面最大字号：最大的标题元素
  • 页面最小字号：版权文字，补充说明描述性的文字
  • 正文字号：一般是14px或16px

font-weight属性

定义
定义页面字体的粗细。

语法

body{
font-weight:关键词 | 数值 （没单位）
}

属性值

• normal：正常粗细
• lighter：更细
• bold：粗对（中文有效）
• bolder：更细（效果同bold）

line-height属性

定义
设置字体行高

什么是行高
行高指两条基线之间的距离

基线是什么
基线指一行文字底部对齐线。
对于英文而言，四线三格本的从上向下的第三条线就是基线。
对于中文而言，好像没有基线。

111.png

三种框

在HTML语言中，存在三种看不见的框

• 字符框：字符框的高度由font-size决定
• 行框：行框的高度由行高决定。
• 元素框：全部行框高度之和。

语法

body{
line-height：数字 | 像素 | 关键词 | 百分比 
}

属性值

• normal ：默认。表示正常的行高，该值是当前元素的字号的1.4倍左右。
• px：使用px设置行高没有灵活性，不会自动根据字号调整行高

font-style属性

定义
用于定义字体风格，风格指字体是否倾斜

语法

p{
  font-style: normal |  italic | oblique 
}

属性值

• normal: 不倾斜。
• italic : 倾斜。表示对字体进行倾斜处理。
• oblique: 倾斜。表示使用斜体字体显示字符。

font-variant属性

定义 ：定义小型大写字母。

语法

h1{
  font-variant: normail | samll-caps ;
}

属性值

normal ： 正常的字符，不转小型大写字母。
small-caps: 转成小型大写字母。

font复合属性