html字体加粗字号为2,【css】文字基本样式（颜色、倾斜、加粗、字号、行高、字体）...

一、字体基本样式

首先我们先放置一些文字&＃xff0c;基本所有的标签都可以设置字体样式的&＃xff0c;这里就使用标签

和

来做示范啦。

O泡时间到&＃xff01;

给我O泡给我O泡&＃xff0c;O泡果奶OOO&＃xff01;

图1 基本文字效果

注意&＃xff0c;文字属性都是可以继承的&＃xff0c;也就是在父元素设置后&＃xff0c;其中的子元素都会生效。当在父元素和子元素中都有属性时&＃xff0c;遵循就近原则。

1. 字号

字号使用font-size属性&＃xff1a;

font-size: 10px; /*设置字号为10px*/

大家在图1可以看到&＃xff0c;h1标签有自动放大字体的功能&＃xff0c;那么我们不想让字体变得那么大&＃xff0c;就可以在css中调整h1的字号大小&＃xff0c;我们先设一个20px看一看。

Document

h1{

font-size: 20px;

}

预览后发现h1的字号果然变小了。

图1-1 改变字号后的h1

其它标签的修改字号方式也是一样的&＃xff0c;在Chrome浏览器中&＃xff0c;可以显示的最小字号是12px&＃xff0c;如果设置得更小&＃xff0c;依然只会显示12px&＃xff0c;其它浏览器会有所不同&＃xff0c;在实际开发中一般都使用双数大小的字号。

2. 文字加粗

文字加粗属性使用font-weight属性:

font-weight: normal; /*设置文字不加粗*/

font-weight: bold; /*设置文字加粗*/

在图1可以看到&＃xff0c;有的标签默认是加粗字体的&＃xff0c;比如

&＃xff0c;有的默认是不加粗的&＃xff0c;比如

&＃xff0c;现在我们修改h1为不加粗&＃xff0c;p为加粗。

h1{

font-size: 20px;

font-weight: normal;

}

p{

font-weight: bold;

}

图2-1 修改加粗效果

3. 文字倾斜

文字倾斜属性使用font-style属性:

font-style: italic; /*倾斜*/

font-style: normal; /*不倾斜*/

和

默认都是不倾斜的&＃xff0c;我们加上倾斜属性。

h1{

font-size: 20px;

font-weight: normal;

font-style: italic;

}

p{

font-weight: bold;

font-style: italic;

}

图3-1 倾斜效果

4. 字体

字号使用font-family属性&＃xff1a;

font-family: &＃39;楷体&＃39;;

/*设置文字为楷体&＃xff0c;这里单引号和双引号都是可以的&＃xff0c;字体名称一个字都不能差哦&＃xff01;*/

为了方便看出字体&＃xff0c;我删掉了之前设置的一些属性&＃xff0c;我们把

设为楷体&＃xff0c;

设为微软雅黑&＃xff1a;

h1{

font-family: &＃39;楷体&＃39;;

font-weight: normal;

}

p{

font-family: "微软雅黑";

}

图4-1 字体设置

注意&＃xff1a;不是每台电脑都有全部字体&＃xff0c;如果电脑上没有安装你写的字体&＃xff0c;就只能显示成默认的啦。有几种字体是安全的&＃xff0c;基本所有电脑都能显示&＃xff1a;

宋体、楷体、黑体、微软雅黑

(苹果电脑可能没有微软雅黑哦)

其实也有可以让网页在任何电脑上都能显示字体的方法&＃xff0c;但是可以的话尽量使用安全字体就好啦。如何避免电脑上没有我们选择的字体呢&＃xff0c;我们可以进行多种字体设置&＃xff0c;中间用逗号分隔&＃xff0c;如下所示&＃xff1a;

h1{

font-family: &＃39;未知字体&＃39;,&＃39;楷体&＃39;;

font-weight: normal;

}

p{

font-family: "微软雅黑",&＃39;楷体&＃39;;

}

如果我们写的第一个字体电脑上安装了&＃xff0c;那就使用此种字体&＃xff0c;如果没有安装&＃xff0c;可以选择下一种字体&＃xff0c;比如上面的代码&＃xff0c;

会选择楷体&＃xff0c;而

会选择前面的微软雅黑。

图4-2 多种字体

5. 行高

行高使用line-height属性&＃xff1a;

line-height: 30px; /*设置行高为30px*/

拿

来说&＃xff0c;我们打开Chrome浏览器&＃xff0c;右键点击检查&＃xff0c;在右侧找到h1标签&＃xff0c;中间蓝色加上上下红色的部分就是行高&＃xff0c;可以看到目前是40px。

图5-1 40px的行高

我们把它修改成80px&＃xff1a;

h1{

line-height: 80px;

font-family: &＃39;楷体&＃39;;

font-weight: normal;

}

图5-2 80px的行高

6. 文字颜色

文字颜色使用color属性(注意是color&＃xff01;没有font的哦&＃xff01;)&＃xff1a;

这三种表示方式都是表示红色&＃xff0c;之后会详细写三种表示方式的含义和联系。

color:red

color: rgb(255, 0, 0);

color: #ff0000

/*设置文字为红色*/

我们简单修改一下颜色&＃xff1a;

h1{

color:red

}

p{

color: rgb(255, 176, 176);

}

图6-1 变色文字

二、复合文字属性

使用font属性(注意顺序&＃xff0c;空格分离&＃xff0c;加粗和倾斜可以省略&＃xff0c;省略后采用默认不倾斜不加粗&＃xff0c;颜色只能单独设置)&＃xff1a;

font:italic bold 20px/3 &＃39;楷体&＃39;; /*倾斜 加粗 字号/行高 字体*/

设置一下试试看&＃xff1a;

h1{

font:italic bold 20px/3 &＃39;楷体&＃39;;

}

p{

font:20px/3 &＃39;楷体&＃39;;

}