前端基础-css字体与文本属性

二、css字体、文本属性

css学前小知识：

一张图片的打印出来的实际尺寸是由电子图片的像素和分辨率共同决定的，像素(Pixel)是指构成图片的小色点，分辨率(单位DPI)是指每英寸(Inch)上的像素数量，可以看做是这些小色点的分布密度；像素相同时，分辨率越高则像素密度越大，实际打印尺寸越小，图像也越清晰。

实际尺寸(英寸)=像素/分辨率; 1英寸=2.54厘米; 如一张图片宽为600像素，分辨率为300，那么实际打印宽度为：600/300=2英寸，约为5厘米。

1.字体属性

a) font-size 设置字体的大小

取值方式：数字 + 像素单位px（像素就是一个长度单位）

多学一招：（1）取值用偶数（2）默认是16px大小（3）字体有多大，看字体的高度

b) font-weight 设置字体的粗细

取值：normal 正常的（400）、bold加粗（700）、bolder(900) 、 100 - 900（字体的粗细没有那么精细，所以很少使用数字）

在实际工作中 用的最多的就是normal （不加粗）和bold（加粗）

c) font-style 设置字体的风格

取值：normal 默认 显示标准的字体样式 italic 字体倾斜

d) font-family 设置不同的字体

取值： 宋体、微软雅黑、黑体、。。。等等

多学一招：

1.不推荐使用一些冷门字体，因为一些冷门字体很多电脑里面默认没有安装，这个时候就会显示不出来。所以实际工作中，默认都是一些主流字体 如宋体 微软雅黑 等。。。

2.字体可以写多组，中间用逗号隔开，显示不了第一个，就找第二个显示

3.字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号

2.文本属性

a) 文本修饰

语法：text-decoration:值

取值：

​ （1）underline下划线

​ （2）overline上划线

​ （3）line-through删除线

​ （4）none没有修饰-----------一般用在a标签上

b) 文本转换

语法：text-transform:值

取值：

​ （1）uppercase转换成大写

​ （2）lowercase转换成小写

​ （3）capitalize首字母大写

c) 文本对齐方式

语法：text-align:值

取值：

​ （1）left左对齐---------------------默认

​ （2）center居中对齐

​ （3）right右对齐

d) 首行缩进

语法：text-indent:值

取值：可以是像素，但是当文字大小发生改变后，也需要重新改变，可以使用em代替，代表字符，会随着文字大小的改变而自动调整

多学一招：默认的文字大小是16px

3.字体颜色

语法：color:"颜色值"