font

字体属性是什么？

• CSS Fonts 是 CSS 的一个模块，

• 它定义了与字体相关的属性以及如何加载字体资源。

• 它允许您定义字体的样式：

  • 字体系列
  • 字体大小
  • 字体粗细
  • 行高
  • 以及当多个字符可用于单个字符时要使用的字形变体。

• font符合属性

• font-family设置字体系列

• font-style设置字体样式

• font-variant字体变形

• font-weight字体粗细

• line-height行高

• font-size字体大小

*说明字体分为两种：

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

font-family

定义：用于设置页面字体外观。

语法

body{
    font-family: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中文字体，
        通用非衬线字体
}

语法规则：

• 可以设置多个字体名称或字体系列名称作为属性值

• 多个字体名称之间使用逗号隔开

• 如果字体名称含有特殊字符需要加引号，比如：

  • 'Microsof Yahei'空格是特殊字符
  • 'sans-serif'横线是特殊字符
  • '微软雅黑'中文也是特殊字符

• 特殊字体在前，通用字体在后

• 英文字体在前，中文字体在后

font-size

定义： 定义页面字体的大小

语法

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

使用相对单位设置font-size

• 关键词：medium 默认值
• %
• 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：更粗

line-height

定义

设置字体行高

什么是行高

行高指两条基线之间的距离。

*什么是基线

基线指一行文字底部对齐的线、

对于英文而言，四线三格本的从上到下第三条线就是基线。

对于中文好像没有基线

ea6d3ec1fac5ecb12283f8451eb5e01.png

三种框

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

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

这三种框决定了元素的宽度

语法

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

• normal:默认值。表示正常的行高。该值是当前元素的字号的1.4倍左右。
• px：使用px设置行高没有灵活性，不会自动根据字号大小进行调整行高
• 百分比：工作原理同px，不会自动根据字号大小进行调整行高
• 数字：强烈推荐使用数字设置字号，数字值会根据元素当前字号自动调整行高该属性的应用值是这个无单位数字乘以该元素的字体大小。

通常字号设置在1.2~2倍之间

font-style

定义

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

语法：

body{
    font-style：normal|italic|oblique
}

属性值：

• normal 默认值，不倾斜
• italic 倾斜
• oblique 倾斜

font-variant

定义：定义小型大写字母

语法：

h1{
  font-variant：normal|small-caps；  
}

属性值：

• normal 默认值
• small-caps 小型大写字母

@font-face自定义字体

font-family：是一个描述符，用于描述向系统字体列表中添加新字体的名称

1. 属性名单词
   font：字体
   face：外观
2. 定义
   用于定义元素的自定义字体
3. 自定义字体？
   自定义字体是非系统字体，也是非安全字体。
4. 什么是安全字体？
   安全字体就是系统字体；系统字体就是安全字体。
   设置font-family首选安全字体。
   自从@font-face规则出现后，我们可以在页面中引入非安全字体
5. 语法

@font-face{
    /*大括号：设置引入自定义字体的规则*/
    /*font-family是一个规则符，不是属性，用于描述向系统字体列表中添加新字体的名称*/
    font-family:;
    /*src：描述符，描述自定义字体文件的位置*/
    src:url()
}
body{
    font-family:'微软雅黑'；
    
}

6. 自定义字体免费字库
   • www.iconfont.cn
   • 英文字库：谷歌字库