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

用法：

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

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前面的属性值位置随意。