css文字文本样式详解

font字体

①font-size 大小

相对长度单位

em:相对于当前对象内文本的字体尺寸

px:像素,平时最常用

绝对长度单位

in 英寸

cm 厘米

mm 毫米

pt 点

/*font-size属性设置字体字号*/
p {
    
    
	font-size:20px;
}

注意:在谷歌浏览器里默认文章文字大小是16px,但不同浏览器默认字体大小可能不同。所以最好在body里自己设定一个文字大小。

body {
    
    
	font-size:16px;
}

②font-family 字体

电脑默认微软雅黑字体

/*font-family属性设置字体类型*/
p {
    
    
	font-family:"微软雅黑";
}

注意:如果指定了多个字体,中间要用英文的逗号分隔。

#中文字体加引号,英文一般不加引号,如果英文中有空格或者特殊符号,则也要加引号。

#依照设置字体的顺序去找字体,没找到就继续找下一个

#如果都没有找到则以电脑默认的字体为准

p {
    
    
	font-family:Arial,"Microsoft YaHei","微软雅黑","黑体";
}

③font-weight 粗细

使用b和strong 可以字体加粗。也可以用CSS这个属性完成。

属性:

normal 正常字体

bold 加粗

number 具体数字100-900, 700=bold,400=normal,实际开发中建议使用数字。

boder 特粗

lighter 细体

/*font-weight属性设置字体粗细*/
p {
    
    
	font-weight:bold;
	font-weight:700;
	font-weight:normal;
}
 

④font-style 字体风格

字体倾斜

i,em标签也可以实现字体倾斜

属性:

italic 倾斜

normal 正常

/*font-style属性设置字体倾斜*/
p {
    
    
	font-style:italic;
	
}

⑤font综合设置字体样式(字体连写)

综合性写法,简写,代码更精简。

注意:要按如下顺序一一对应空格隔开,否则不起作用。字体font-size大小和font-family字体必须保留,其他的可以省略。

font: font-style font-weight font-size/line-height font-family ;

p {
    
    
	font : italic 700 20px "微软雅黑";
}

http://moban.shenhuangji.com/post/18.html

猜你喜欢

转载自blog.csdn.net/daimatong/article/details/105948989
今日推荐