字体相关的样式:
color 字体颜色
font-size 字体大小 单位:em rem
font-family 字体族(字体的格式) 可以同时指定多个,优先使用第一个
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
font-weight 字重,字体加粗
normal 默认值,正常
bold 加粗
100-900 九个级别(没什么用)
font-style 字体风格
normal 默认值,正常
italic 斜体
font-face:允许用户可以直接使用服务器中的字体
font-family:指定字体的名字(是自己起名,后面的样式里就使用这个名字作为字体的格式)
src:服务器中字体的路径
!!但是存在着加载速度慢以及可能产生版权纠纷的问题!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'myfont';
src: url();
}
p{
color: blue;
font-size: 40px;
font-family:'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<p>today is a good day</p>
</body>
</html>
图标字体:
字体相对于图片的优点:放大的时候字体不会失真(字体是个矢量图),图片大小本身比较大,修改起来不灵活。有些时候网页里有一些小的图片,比如说一些小的单色图标之类的,用文字比用图片更加合适。
在使用图标的时候,可以将图标设置为字体,然后通过face-font的形式对字体进行引入。(复杂)
①fontAwesome 图标字体库
Font Awesomehttps://fontawesome.com/
下载完成后解压,主要使用到图中的两部分内容,将两个文件复制到项目中。
将all.css通过link引入到网页中,使用图标库,可以自由的设置大小和颜色。
使用方法一:类名使用fas或者fab
class="fas 图标类名(查文档)"
class="fab 图标类名(查文档)"
·· 弊端:比较麻烦,重复情况下需要多次复制每个都设置
使用方法二:使用伪类+font-family设置字体格式
从文档中获取到对应图标的编码赋值给content
找到all.css里对应的font-family以及font-weight复制过来
使用方法三:通过实体使用 &#x图标编码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./fontAwesome/css/all.css">
<style>
li{
list-style: none;
}
li::before{
content: '\f1b0';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
</style>
</head>
<body>
<!--
图标字体iconfont
-->
<!-- 方法一 -->
<i class="fas fa-bell"></i>
<!-- 方法二 -->
<ul>
<li>yi yiyi</li>
<li>er erer</li>
<li>san sansan</li>
<li>si sisi</li>
</ul>
<!-- 方法三 -->
<span class="fas"></span>
</body>
</html>
②iconfont 图标字体库
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具https://www.iconfont.cn/相比于font Awesome 会更加的美观、种类更多,但是下载使用稍微麻烦一些
!!版权问题不够清晰,使用的时候需要确认!!需登录!!彩色图标需变成图片使用!!
登录->选择图标->加入购物车->添加至项目->下载至本地->解压并复制到项目中->引入iconfont.css到项目中->使用图标
(可以通过demo_index.html查看使用案例,但不需要复制到项目中)
使用方法一:设置iconfont类并通过实体使用
使用方法二:通过图标的类使用
使用方法三:通过伪类使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* 由于设置了iconfont类,只对i元素选择无法覆盖iconfont的样式 */
i.iconfont{
font-size: 50px ;
}
p::before{
content: '\e6f0';
font-family: iconfont;
}
</style>
</head>
<body>
<!-- 使用方法一:设置iconfont类并通过实体使用 -->
<i class="iconfont"></i>
<!-- 使用方法二:通过图标的类使用 -->
<i class="iconfont icon-auto"></i>
<!-- 使用方法三:通过伪类使用 -->
<p>good</p>
</body>
</html>
字体的简写属性font:
font: 大小 字体族
font: 大小/行高 字体族
font: 其他样式 大小(大小/行高) 字体族
!!font简写中有些样式不写时会使用默认值,且会覆盖掉上方对应样式的设置!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border: 1px red solid;
/* line-height: 2; */
font: 50px/2 'Times New Roman', Times, serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<div>天气不错</div>
</body>
</html>