CSS font字体属性

字体属性是什么？

• CSS Fonts 是 CSS 的一个模块
• 它定义了与字体相关的属性以及如何加载字体资源。
• 它允许您定义字体的样式，例如:
  • 它的系列、
  • 大小和粗细、行高
  • 以及当多个字符可用于单个字符时要使用的字形变体。

---

• font :复合属性

• font-family：设置字体的外观。

• font-size：页面字体的大小

• font-weight：设置字体粗细

• line-height：设置行高

• font-style：设置字体风格

• font-variant：小型大写字母

字体属性

平台	中文衬线字体	中文非衬线字体	英文衬线字体	英文非衬线字体
通用字体	serif	sans-serif	serif	sans-serif
window	宋体	微软雅黑	Times	arial
Mac	宋体	苹方		San-Francsico
IOS		苹方	英文衬线字体	英文非衬线字体
Andriod		思源黑体	英文衬线字体	英文非衬线字体
其他

说明：字体分为两种：

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

---

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:中文字体, 苹果中文字体, 中文字体， sans-serif;

        }

语法规则：

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

在 CSS 中，有五个通用字体族：

• 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
• 非衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
• 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
• 草书字体（Cursive）- 模仿了人类的笔迹。
• 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

---

font-size

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

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

使用相对单位设置 font-size

• 关键词
• %
• em
• rem
• vw/vh

使用绝对单位设置font-size

• px

用法：

• 在做网页的时候，第一步要确认根字号大小。

html{
font-size:16px;
font-size:62.5%;  /*根字号为十像素*/
}

• 在设置页面字号的时候，要有字号层级的意识。也就是说你需要确定：
  • 页面中最大的字号：<h1></h1>
  • 页面中最小字号：版权文字，补充说明描述性的文字
  • 正文字号：一般是14像素或者16像素

font-weight属性

定义：用于定义字体的粗细
语法：

body{
font-weight:关键词|数值
}

属性值：
关键词：

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

数值：

• 100 - 900
• -400：正常粗细
• 比四百大都是加粗。
• 比四百小都是变细。

line-height

定义：设置字体行高
语法：

body{
      line-height：数字（没有单位|像素（px）|关键字|百分比；
}

属性值：

• normal：默认值。表示正常的行高，该值大概是当前的元素的字号的1.4倍左右。
• 像素（px）：使用px设置行高没有灵活性，不会根据字号大小调整。
• 百分比 ：工作原理同像素，不够灵活，不会自动根据字号调整行高。
• 数字：推荐使用，数字值会根据当前元素的字号自动调整行高。通常建议行高设置在字号的1.2-2倍之间。

行高指两条基线之间的距离
基线指一行文字底部对齐的线，对于英文而言，四线三格本的从上向下的第三条线就是基线

111.png

字符框：在MTML语言中，存在三种看不见的框，这三种框决定元素的高度。

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

font-style

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

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

属性值：

• normal：默认值，不倾斜。
• italic：倾斜 ，表示对字体进行倾斜处理
• oblique：倾斜 ，表示使用斜体字体显示字符

font-variant

定义：小型大写字母

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

属性值：

• normil：默认
• samll-caps：小型大写字母

line-height

定义：设置字体行高
语法：

body{
      line-height：数字（没有单位|像素（px）|关键字|百分比；
}

属性值：

• normal：默认值。表示正常的行高，该值大概是当前的元素的字号的1.4倍左右。
• 像素（px）：使用px设置行高没有灵活性，不会根据字号大小调整。
• 百分比 ：工作原理同像素，不够灵活，不会自动根据字号调整行高。
• 数字：推荐使用，数字值会根据当前元素的字号自动调整行高。通常建议行高设置在字号的1.2-2倍之间。

行高指两条基线之间的距离
基线指一行文字底部对齐的线，对于英文而言，四线三格本的从上向下的第三条线就是基线

111.png

字符框：在MTML语言中，存在三种看不见的框，这三种框决定元素的高度。

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

@font-face

• 属性名单词
  Font：字体
  Face：外观
• @font-face 定义：用于定义元素的自定义字体
• 自定义字体？
  自定义字体就是非系统字体，非安全字体
• 安全字体
  引入非安全字体
• 语法：

/*css文件*/
@font-face{/*大括号：设置引入规则*/
/*该font-family是规则符，不是属性，用于描述自定义字体的名称。*/
font-family：'自定义字体名称';
/*url：指定自定义字体的文件，可以是相对路径也可以是绝对路径*/
url("自定义字体文件.otf")
}
/*向元素应用自定义字体*/
body{
font-family："serif";
}

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

font

字体复合属性：就是把所有的字体属性写在一个声明里面

body{
font:font-style font-weight font-size font-family;
}

注：font-style font-weigh等字体属性必须放在font-size 和 font-family前面
font-size 和 font-family前面的属性值位置随意。