《HTML+CSS+JavaScript》之第13章字体样式

13.1 字体样式简介

字体样式属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

13.2 字体类型

默认字体宋体。

font-family:字体1，字体2，...，字体n；
1

设置一种字体

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1 {font-family:Arial;}
        #div2 {font-family: "Times New Roman";}
        #div3 {font-family: "微软雅黑";}
    </style>
</head>
<body>
    <div id="div1">Arial</div>
    <div id="div2">Times New Roman</div>
    <div id="div3">微软雅黑</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

设置多种字体（按序查找第一种安装字体）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p{font-family:Arial,Verdana,Georgia;}
    </style>
</head>
<body>
    <p>Rome was't not built in a day.</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

13.3 字体大小

font-size:关键字或px或em或百分比等；
1

small、medium、large
10px、16px、21px、…

13.3.1 px是什么

pixel，相对单位，与屏幕分辨率有关。

13.3.2 采用px单位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-size: 10px;}
        #p2 {font-size: 15px;}
        #p3 {font-size: 20px;}
    </style>
</head>
<body>
    <p id="p1">字体大小为10px</p>
    <p id="p2">字体大小为15px</p>
    <p id="p3">字体大小为20px</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

13.4 字体粗细

font-weight：取值；
1

100~900
lighter（100）、normal（默认，400）、bold（700）、bolder（900）
数值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-weight: 100;}
        #p2 {font-weight: 400;}
        #p3 {font-weight: 700;}
        #p4 {font-weight: 900;}
    </style>
</head>
<body>
    <p id="p1">字体粗细为:100（lighter）</p>
    <p id="p2">字体粗细为:400（normal）</p>
    <p id="p3">字体粗细为:700（bold）</p>
    <p id="p4">字体粗细为:900（bolder）</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

关键字

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{font-weight:lighter;}
        #p2{font-weight:normal;}
        #p3{font-weight:bold;}
        #p4{font-weight:bolder;}
    </style>
</head>
<body>
    <p id="p1">字体粗细为:lighter</p>
    <p id="p2">字体粗细为:normal</p>
    <p id="p3">字体粗细为:bold</p>
    <p id="p4">字体粗细为:bolder </p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

13.5 字体风格

font-style：取值；
1

normal
正常，默认
italic
斜体
oblique
斜体

并非所有字体都有italic属性，无italic属性可使用oblique。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{font-style:normal;}
        #p2{font-style:italic;}
        #p3{font-style:oblique;}
    </style>
</head>
<body>
    <p id="p1">字体样式为normal</p>
    <p id="p2">字体样式为italic </p>
    <p id="p3">字体样式为oblique</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

13.6 字体颜色

color：颜色值；
1

关键字、RGB、RGBA、HSL等。

关键字

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{color:gray;}
        #p2{color:orange;}
        #p3{color:red;}
    </style>
</head>
<body>
    <p id="p1">字体颜色为灰色</p>
    <p id="p2">字体颜色为橙色</p>
    <p id="p3">字体颜色为红色</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

RGB

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{color: #03FCA1;}
        #p2{color: #048C02;}
        #p3{color: #CE0592;}
    </style>
</head>
<body>
    <p id="p1">字体颜色为#03FCA1</p>
    <p id="p2">字体颜色为#048C02</p>
    <p id="p3">字体颜色为#CE0592</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

13.7 CSS注释

/*注释内容*/
1

css与html注释区别

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*这是CSS注释*/
        p{color:pink;}
    </style>
</head>
<body>
    <!--这是HTML注释-->
    <p>记忆之所以美，是因为有现实的参照。</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

css样式后面覆盖前面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*使用元素选择器，定义所有p元素样式*/
        p
        {
            font-family:微软雅黑;    /*字体类型为微软雅黑*/
            font-size:14px;          /*字体大小为14px*/
            font-weight:bold;        /*字体粗细为bold*/
            color:red;               /*字体颜色为red*/
        }
        /*使用id选择器，定义个别样式*/
        #p2
        {
            color:blue;              /*字体颜色为blue*/
        }
    </style>
</head>
<body>
    <p id="p1">HTML控制网页的结构</p>
    <p id="p2">CSS控制网页的外观</p>
    <p id="p3">JavaScript控制网页的行为</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

相关阅读:
分布式数据库选型之争：数据库向左，中间件向右
Spring Boot 启动流程
深度学习神经网络（1）感知器
网络安全实战：记一次比较完整的靶机渗透
代码整洁之道-读书笔记之边界
VMware中安装WindowsXP虚拟机详细步骤
npm 私服以及使用
idea设置字体大小快捷键 Ctrl+鼠标上下滑字体快捷键缩放设置
逆地理编码-离线版-part3
L1-030 一帮一 C++解法

原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125611971

《HTML+CSS+JavaScript》之第13章 字体样式

《HTML+CSS+JavaScript》之第13章 字体样式

13.1 字体样式简介

13.2 字体类型

13.3 字体大小

13.3.1 px是什么

13.3.2 采用px单位

13.4 字体粗细

13.5 字体风格

13.6 字体颜色

13.7 CSS注释

《HTML+CSS+JavaScript》之第13章字体样式

《HTML+CSS+JavaScript》之第13章字体样式