天天看点

CSS基础知识点font字体

style里:

属性和属性值之间用英文“:”连接。

多个“键值对”之间用英文“;”进行区分。

css里面的注释是/* */

html里面的注释是<!-- -->

字体样式属性:

各种字体之间必须使用英文状态下的逗号隔开。

中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。

如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "times new roman";。

unicode字体

在 css 中设置字体名称,直接写中文是可以的。但是在文件编码(gb2312、utf-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

方案一: 你可以使用英文来替代。 比如 font-family:"microsoft yahei"。

方案二: 在 css 直接使用 unicode 编码来写字体名称可以避免这些错误。使用 unicode 写中文字体名称,浏览器是可以正确的解析的。

font-family: "\5fae\8f6f\96c5\9ed1",表示设置字体为“微软雅黑”。

为了照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体

font-weight:字体粗细

font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。

数字 400 等价于 normal,而 700 等价于 bold。

让粗体变得不粗: strong{font-weight:normal;}

font-style:字体风格

字体倾斜用 i 和 em 标签。平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。

em{font-style:normal}

font:综合设置字体样式

选择器{font: font-style font-weight font-size/line-height font-family;}

使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。

注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

开发者工具(chrome)

此工具是我们的必备工具,以后代码出了问题,我们首先第一反应就是:“按f12”或者是 “shift+ctrl+i” 打开 开发者工具。

1. ctrl+滚轮 可以 放大开发者工具代码大小。

2. 左边是html元素结构 右边是css样式。

3. 右边css样式可以改动数值和颜色查看更改后效果。