简单初步总结font| 豆包MarsCode AI刷题

165 阅读2分钟

font-size: 文字大小,单位常用px(像素),不加单位属性不生效,浏览器默认16px

font-weight: 文字粗细,字体正常效果属性值为400或normal,加粗效果属性值为700或bold

font-style:文字倾斜         normal正常无倾斜   italic 倾斜

line-height:行距 两种表示方式:1)数字+px,直接表示法2)数字 表示是当前px的多少倍                    

注:1)16px或1表示正常没特殊效果的行距2)行高=文字高度+上间距+下间距3)空白=该行下间距+下行上间距,所以行间距就是这行文字的高度+空白长度

  实现垂直居中(只是用于 单行文字 ):小盒子的宽和高=行高(即行距)

原理:默认文字大小为16px,设宽、高与行高均为x,则上下空白的大小总和即为(x-16),刚好是(小盒子宽高-文字的16px)之后的值。

font-family 文字族,即字体花样,如font-family:楷体;

image.png

(图片源自网络)

image.png 上述代码逐次向后查找字体,有的就显示,没有就接着,直到最后的\5B8B\4F53都没有,则按照电脑自己默认的字体来显示。

sans-serif: 字体族名,代表的是 无衬线字体,一般网页开发使用


font 支持简写 在设置网页公共文字样式时常用,后面哪里不一样就单独设置

              font:   italic/normal    400/700   30px/2 楷体;

写法格式:   是否倾斜     是否加粗  字号/行高  字体样式;(字号和字体样式必须写,按顺序写!)

 

text-indent 文本缩进 : 1)数字+px 2)数字+em【1em=当前标签字号大小,2em就相当于缩进当前两个字,默认字体16px,2em=32px】


text-align 内容对齐: left是左对齐(默认效果) center是居中对齐  right是右对齐

图片居中也是这text-align

一定要注意,图片居中是把img属性放到p双标签中,style写在

中,img标签本身是不能css的

注:span是行内标签,相当于编辑的就是内容,内容缩进、对齐等效果均不能起到作用


text-decoration 文本修饰线 让文字没有线或者给文字加上线

属性值:none 表示去掉下划线,无下划线    underline下划线  line-through删除线        overline 上划线

color 文字颜色

image.png 16进制的简写是指相同的两个字母写成一个