CSS字体属性

371 阅读2分钟

CSSFonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。

字体

CSS使用font-family属性定义文本的字体系列。

语法

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

在同一选择器内使用了多个字体的情况下,运行时会优先以排在前面的字体显示页面内容,如果电脑上没有安装相应的字体插件,则显示排在后面的字体,以此类推。如果选择的字体全部没有安装则显示浏览器默认的字体。

注意:

  1. 各种字体之间必须用英文逗号隔开;
  2. 一般情况下,如果有空格隔开的多个单词组成的字体,需要加引号(单引号或双引号都可以);
  3. 尽量使用系统自带字体,保证在任何用户的浏览器中都能正确显示。

示例

尝试按照提示把字体分别设置为宋体和微软雅黑。

<style>
    h2{
        font-family: "宋体";
    }
    p{
        font-family: "微软雅黑";
    }
</style>
......
<h2>这是宋体</h2>
<p>这是微软雅黑</p>

运行效果:

字体大小

 CSS使用font-size属性定义字体大小。

语法

body{
    font-size:30px;
}

px是我们网页最常用的单位,即像素大小。不同的浏览器可能默认显示的字号大小不一致,我们尽量给一个明确的大小,不要默认大小。

注意:标题标签比较特殊,需要单独指定文字大小。

示例

把标题标签与段落标签内的字号改成16px。

<style>
    body{
        font-size: 16px;
    }
    h2{
	font-size: 16px;
    }
</style>

运行效果:

字体粗细

CSS使用font-weight属性设置文字字体的粗细,该属性的默认值为normal。

语法

p{
    font-weight:bold;
}

属性值

其中比较提倡使用的是number

p{
    font-size:300;
}

需要注意的是,在表示字体粗细时,数字后面不需要加单位px。

示例

<head>
		<title>字体粗细</title>
		<style>
			.normal{
				font-weight: normal;
			}
			.bold{
				font-weight: bold;
			}
			.bolder{
				font-weight: bolder;
			}
			.lighter{
				font-weight: lighter;
			}
			.number{
				font-weight: 300;
			}
		</style>
</head>
<body>
		<p class="normal">normal</p>
		<p class="bold">bold</p>
		<p class="bolder">bolder</p>
		<p class="lighter">lighter</p>
		<p class="number">number:300</p>
</body>

运行效果

文字样式

CSS使用font-style属性设置文本的风格。

语法

p{
    font-style:normal;
}

字体复合属性

字体属性可以把文字样式综合来写,这样可以更节约代码。

示例

我需要把段落标签p的文字,变粗 颜色为蓝色 字号设置为30px 字体为宋体 文字变倾斜。

p{
    color: #0000FF;
    /*复合属性即简写方式,需要按照以下特定的方式书写.*/
    /*font:font-style font-weight font-size/line-height font-family;*/
    font:italic 700 30px "宋体";
}

line-height表示行高,在后面会讲到,在简写中可以省略不写。

注意:

  1. 属性的顺序一定要按照要求的来,不能随意变换顺序;

  2. 属性值之间需要用空格隔开;

  3. 不需要的属性可以省略不写,但是font-size和font-family属性必须保留,否则简写将不起作用。

运行效果: