字体属性是什么
- CSS Fonts 是 CSS 的一个模块
- 它定义了与字体相关的属性以及如何加载字体资源。
- 它允许您定义网页字体的样式
-- 字体系列
-- 字体大小
-- 字体粗细
-- 字体倾斜
--字体大写
-- 行高
-- font复合
-
font-family设置字体系列 - @font-face规则
-
font-size设置字体大小 -
font-weight设置字体粗细 -
font-style设置字体风格 -
font-variant设置字体变形 -
line-height设置字体行高 -
font复合属性
字体系列是什么
| 平台 | 中文衬线字体 | 中文非衬线字体 | 英文衬线字体 | 英文非衬线字体 |
|---|---|---|---|---|
| 通用字体 | serif | sans-serif | serif | sans-serif |
| windo | 宋体 | 微软雅黑 | Times | arial |
| Mac | 宋体 | 苹方 | San-Francslco | |
| IOS | 苹方 | 英文非衬线字体 | ||
| Android | 思源黑体 | 英文衬线字体 | 英文非衬线字体 | |
| 其他 | ||||
| -- | -- | -- | -- | -- |
说明：字体分为两种
- 通用字体系列：指一组具有共同风格的字体系列，比如衬线和非衬线
- 特殊字体：指某一个字体，比如：微软雅黑、苹方、思源黑体
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: 转成小型大写字母。
