前端的学习之路：初级CSS---字体族
程序员文章站
2022-05-10 11:02:55
...
字体族
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体族</title>
<!-- <link rel="stylesheet" href="../chujicss/css/11.22.07.css"> -->
<style>
/*font-face 可以将服务器中的字体直接提供给用户使用
问题：1、加载速度 2、版权 3、字体格式
*/
@font-face {
font-family: 'myfont';/*指定字体的名字（自己起的）*/
src: url(./font/impact.ttf);/*服务器中字体的路径*/
}
/*
字体相关的样式
color 用来设置字体颜色
font-size 字体的大小
和font-size相关的单位
em相当于当前元素的一个font-size
rem相对于根元素的一个font-size
font-family字体族（字体的格式）
可选值：
serif 衬线字
sans-serif 非衬线字
monospace 等宽字体
-指定字体的类别，浏览器会自动使用该类别下的字体
-font-family 可以同时指定多个字体，多个字体之间使用逗号隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个，一次类推
*/
p{
color: red;
font-size: 50px;
/* font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
font-family: myfont;
}
</style>
</head>
<body>
<p>今天天气真不错，you are pig</p>
</body>
</html>
运行结果为：
上一篇： live555 权限认证代码
下一篇： 2021/3/12--前端学习第5天笔记