css-关于字体的使用+ 谷歌字体

前端 , 评论

源文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
	<title>Fonts</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<h1>Fonts Demo Page</h1>
asjdhaklsdj
asdkljalsd

<p>Bacon ipsum dolor amet short loin <span>strip steak</span> leberkas ribeye beef pork loin pork belly drumstick frankfurter. Corned beef ball tip pork belly pig sirloin, ham hock chuck cow fatback strip steak meatloaf. Biltong swine ball tip kielbasa picanha pork chop bacon pork boudin rump ribeye pig. Shoulder ribeye drumstick short ribs pork loin venison. Chuck andouille turducken, kielbasa t-bone short ribs beef ribs turkey doner swine pork chop biltong.
</p>

<p>Shoulder shank bacon salami flank tenderloin. Ground round pig hamburger, jerky bacon meatball chuck pancetta kielbasa bresaola turkey prosciutto. Prosciutto hamburger shank brisket strip steak turducken picanha ground round chicken. Tenderloin shank chicken ham hock, pork chop ball tip pork belly jowl porchetta. Strip steak cupim tenderloin pastrami rump shoulder filet mignon tri-tip.</p>


</body>
</html>

CSS文件

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/*font-family*/
/*https://www.cssfontstack.com/*/
p {
	font-family: Arial;
}

h1 {
	font-family: Georgia;
}

/*font-size*/

body {
	font-size: 10px;
}
/*相对于母亲元素的倍数*/
h1 {
	font-size: 5.0em;
}

p {
	font-size: 2.0em;
}

span {
	font-size: 2.0em;
}

/*font-weight*/

p{
	font-weight: normal;
}

/*line-height 类似于word的1.5倍行距*/

p {
	line-height: 1.5;
}

/*text-align*/

h1 {
	text-align: right;
}

p {
	text-align: center;
}

/*text-decoration*/

p {
	text-decoration: underline;
}
/*贯穿线*/
h1 {
	text-decoration: line-through;
}

谷歌字体的使用

指导：https://fonts.google.com/
使用的一个例子

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
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
	<title>Fonts</title>
	<link href="https://fonts.googleapis.com/css?family=Charm" rel="stylesheet">
	<style type="text/css">

		/*font-family*/
/*https://www.cssfontstack.com/*/
p {
	font-family: Arial;
}

h1 {
	font-family: 'Charm', cursive;
}


	</style>
</head>
<body>

<h1>Fonts Demo Page</h1>
asjdhaklsdj
asdkljalsd

<p>Bacon ipsum dolor amet short loin <span>strip steak</span> leberkas ribeye beef pork loin pork belly drumstick frankfurter. Corned beef ball tip pork belly pig sirloin, ham hock chuck cow fatback strip steak meatloaf. Biltong swine ball tip kielbasa picanha pork chop bacon pork boudin rump ribeye pig. Shoulder ribeye drumstick short ribs pork loin venison. Chuck andouille turducken, kielbasa t-bone short ribs beef ribs turkey doner swine pork chop biltong.
</p>

<p>Shoulder shank bacon salami flank tenderloin. Ground round pig hamburger, jerky bacon meatball chuck pancetta kielbasa bresaola turkey prosciutto. Prosciutto hamburger shank brisket strip steak turducken picanha ground round chicken. Tenderloin shank chicken ham hock, pork chop ball tip pork belly jowl porchetta. Strip steak cupim tenderloin pastrami rump shoulder filet mignon tri-tip.</p>


</body>
</html>

fontawesome

awesomeCDN：https://fontawesome.com/start
网站：https://fontawesome.com
字体大小：https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

使用例子：

1
2
3
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- fa-2x为两倍大小 -->
<i class="far fa-thumbs-up fa-2x">

郑建勋（jonson）Gopher & 区块链工程师

灾难总是接踵而至，这正是世间的常理。你以为只要哭诉一下，就会有谁来救你？如果失败了，就只能说明我不过是如此程度的男人