css字体

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

顶线 中线 基线 底线
行高测量方法:基线和基线的距离为行高

行高利用最多的地方:单行文本垂直居中
行高 = 上距离 + 内容高度 + 下距离
上距离和下距离总是相等的,因此文字看上去是垂直居中的

行高和高度的三种关系

  • 行高 等 高度 文字会垂直居中
  • 行高 大于 高度 文字会偏下
  • 行高 小于 高度 文字会偏上