font-size
font-family
css字体特殊写法(Unicode)
为什么使用Unicode字体
在css中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312,UTF-8等)不匹配时会产生乱码的错误。
xp系统不支持类似微软雅黑的中文
解决方案
方案一:可以使用英文来代替。比如:font-family:“Microsoft Yahei”。
方案二:在css直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称,浏览器是可以正确的解析的。
font-family: “\5FAE\8F6F\96C5\9ED1”; 表示设置字体为微软雅黑
字体名称 | 英文名称 | Unicode编码 |
---|---|---|
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimSun | \65b0\5b8b\4f53 |
黑体 | SimHei | \9ed1\4f53 |
微软雅黑 | Microsoft YaHei | \5fae\8f6f\96c5\9ed1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4f53_GB2312 |
隶书 | LiSu | \96b6\4e66 |
幼圆 | YouYuan | \5e7c\5706 |
华文黑细 | STXiHei | \534e\6587\9ed1\7ec6 |
细明体 | MingLiU | \7ec6\660e\4f53 |
新细明体 | PMingLiU | \65b0\7ec6\660e\4f53 |
为照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体
font-weight
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
提倡:
我们平时更喜欢用数字来表示加粗和不加粗。(实际开发中用数字来表示会更好)
font-style
normal : 正常的字体
italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
oblique : 倾斜的字体
字体综合写法
font: 综合设置字体样式(重点)
基本语法:选择器{ font: font-style font-weight font-size/line-height font-family; }
使用font属性时,必须严格按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
font总结
| 属性 | 表示 | 注意点 |
| - | - | - |
| font-size | 字号 | 我们通常用的单位是px像素,一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是700或bold 不加粗是normal或者400 机组数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是italic 不倾斜是normal 工作中最常用normal |
| font | 字体连写 | 1.连写是有顺序的 不能随意换位置 2.其中字号和字体必须同时出现 |
行高 line-height
顶线 中线 基线 底线
行高测量方法:基线和基线的距离为行高
行高利用最多的地方:单行文本垂直居中
行高 = 上距离 + 内容高度 + 下距离
上距离和下距离总是相等的,因此文字看上去是垂直居中的
行高和高度的三种关系
- 行高 等 高度 文字会垂直居中
- 行高 大于 高度 文字会偏下
- 行高 小于 高度 文字会偏上