介绍
本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记
font
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
1、font-face 可以将服务器中的字体直接提供给用户使用
两个问题:
1、加载速度问题
2、版权问题
3、字体格式问题
@font-face{
/* 指定字体名字 */
font-family:'myFont';
// 服务器字体路径
src:url('./font/..')
}
p{
2、字体相关样式:
color 用来设置字体颜色
font-size: 字体大小
和font-size相关的单位
em: 相当于当前元素的一个font-size
rem: 相当于根元素的一个font-size
font-famlily:字体族(字体的格式)
可选值(大的分类):
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
- 指定字体类别,浏览器会自动使用该类别下的字体
- font-family 可以同时指定多个字体,多个字体间使用,隔开
字体生效时,优先使用第一个,第一个无法使用,则使用第二个
以此类推
color:red;
font-size:30px;
font-family:'Courier New',Courier,monospace
// 指定自己的字体
font-family:myFont
}
</style>
<body>
<p>
今天天气真不错:hello hello how are you!
</p>
</body>
图标字体
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
1、图标字体(iconfont)
- 在使用图标时,将图标设置为字体,通过@font-face对字体引入
- 就可以通过使用字体的形式来使用图标了
2、fontAwesome 使用
1、下载
2、解压
3、css 和webfonts移动到项目,必须在同一级目录
4、引入all.css引入网页中
5、使用图标字体,直接通过类名使用图标字体
class="fas fa-bell"
class="fab fa-accessible-item"
</style>
<body>
<p class="fas fa-bell">
今天天气真不错:hello hello how are you!
</p>
<li class="fas fa-bell" style="font-size:90px;color:red"></li>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
li{
list-style:none;
}
2、通过伪元素设置图标字体;
1、找到需要设置图标的元素,通过before或者after选中
2、在content中设置字体编码
3、设置字体样式
fab
font-family:'Font Awesome 5 Brands'
fas
font-family:'Font Awesome 5 Free'
font-weight:900
li::before{
content:'\f1b0';
font-family:'Font Awesome 5 free';
font-weight:900;
color:blue;
margin-right:10px;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
3、通过实体使用图标字体
&#x图标编码
<span class="fas"></span>
</body>
</html>