11 字体
文章目录
1.字体相关的样式
- color：用来设置字体颜色
- font-size：字体大小
- em：相当于当前元素的一个font-size
- rem相当于根元素的一个font–size
2.字体格式font-family
-
font-family字体族（字体格式）
-
such as：font-family:‘微软雅黑’；
-
字体的分类：
- serif衬线字体
- sans-serif：非衬线字体
- monospace：等宽字体
- cursive：手写体
- fantasy：梦幻字体
-
以上不是平时的某种字体，而是字体的分类
-
我们经常使用的一些字体：微软雅黑，黑体，宋体，楷体等
-
font-family可以指定多个字体，多个字体之间用逗号隔开
-
字体生效时优先使用第一个，第一个无法使用则使用第二个
3.font-face
@font-face可以将服务器中的字体直接提供给用户去使用
@font-face {
/* 指定字体名字 */
font-family: 'myFont1';
/* 服务器中字体路径 */
src: url('/font/ZCOOLKuaiLe-Regular.woff'),
url('/font/ZCOOLKuaiLe-Regular.otf'),
url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');/* 指定字体格式，一般不写 */
}
p {
font-size: 30px;
color: salmon;
font-family: myFont1;
}
-
加载速度：受网络速度影响，可能会出现字体闪烁一下变成最终的字体
-
版权：有些字体是商用收费的，需要注意
-
字体格式：字体格式也有很多种（woff、otf、ttf），未必兼容，可能需要指定多个
4.图标字体（iconfont）
图标字体简介：
- 在网页中经常需要用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活。
- 所以在使用图标时，我们可以将图标直接设置为字体，然后通过@font-size的形式来进行引入
- 这样我们就可以通过使用字体的形式来使用图标
怎么把图标制作成字体？与程序员无关，直接从网上的图标字体库寻找。。
- fontawesome(图标字体库)
- 官网：https://fontawesome.com/
- 下载解压完成之后，直接将css和webfonts移动到项目中即可使用
- 将all.css引入网页中
- 使用图标字体
- 直接通过类名来使用图标字体
- 格式：class=“fas空格类名”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
/*
class="fas fa-bell"
class="fab fa-accessible-icon"
*/
<i class="fas fa-bell" style="font-size:80px; color:red;"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
</html>
5.图标字体其他使用方式
通过伪元素来设置图标字体
1.找到要设置图标的元素通过::before或::after选中
2.在content中设置字体的编码
3.设置字体的样式
- fab
font-family: ‘Font Awesome 5 Brands’;
- fas
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./fa/css/all.css"> <style> li{ list-style: none; } li::before{ content: '\f1b0'; /* font-family: 'Font Awesome 5 Brands'; */ font-family: 'Font Awesome 5 Free'; font-weight: 900; color: blue; margin-right: 10px; } </style> </head> <body> <!-- <i class="fas fa-cat"></i> --> <ul> <li>锄禾日当午</li> <li>汗滴禾下土</li> <li>谁知盘中餐</li> <li>粒粒皆辛苦</li> </ul> <!-- 通过实体来使用图标字体： &#x图标的编码; --> <span class="fas"></span> </body> </html>
6,行高
6.1 行高（line height）
-
行高指的是文字占有的实际高度
-
可以通过line-height来设置行高
-
行高可以直接指定一个大小（px em）
-
也可以直接为行高设置一个整数
-
如果是一个整数的话，行高将会是字体的指定的倍数
- 行高经常还用来设置文字的行间距
行间距 = 行高 - 字体大小
6.2 字体框
- 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
- 行高会在字体框的上下平均分配
- 行高大概是字体大小的1.２－１.３倍
7.字体的简写属性
font 可以设置字体相关的所有属性
语法：
- font: 字体大小/行高 字体族（这两个必须写，写在最后）
- 行高 可以省略不写 如果不写使用默认值
一
font-size: 50px;
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
/*以上为分开写*/
font: 50px/2 微软雅黑, 'Times New Roman', Times, serif;
/*此为合起来写*/
font: normal normal 50px/2 微软雅黑, 'Times New Roman', Times, serif;
/*若再此写ｎｏｒｍａｌ会覆盖原本写的*/
font: bold italic 50px/2 微软雅黑, 'Times New Roman', Times, serif;
/*字体大小后/接行高*/
font:50px 'Times New Roman', Times, serif;
line-height: 2;
/*行高如果没写，使用默认值*/
二
font-weight 字重 字体的加粗
可选值：
normal 默认值 不加粗
bold 加粗
100-900 九个级别（没什么用）
三
font-style 字体的风格
可选值：
normal 正常的
italic 斜体
8 文本的对齐方式
8.1 水平对齐
| ｔｅｘｔ－ａｌｉｇｎ属性值 | 对齐方式说明 |
|---|---|
| ｌｅｆｔ | 左侧对齐 |
| ｒｉｇｈｔ | 右侧对齐 |
| ｃｅｎｔｅｒ | 居中对齐 |
| ｊｕｓｔｉｆｙ | 两端对齐 |
8.2 垂直对齐
| ｖｅｒｔｉｃａｌ－ａｌｉｇｎ | 对齐方式说明 |
|---|---|
| ｂａｓｅｌｉｎｅ | 基线对齐 |
| ｔｏｐ | 顶部对齐 |
| ｂｏｔｔｏｍ | 底部对齐 |
| ｍｉｄｄｌｅ | 居中对齐 |
8.3 图片对齐
图片引入相当于做了一个替换，故可以将其当作字，那么必然有空隙，因其跟着基线对齐，如何取消空隙呢？
/* 只要不是基线对齐，就能消除底部缝隙 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
９其它
9.1 text-decoration 设置文本修饰
可选值：
- none 什么都没有
- underline 下划线
- line-through 删除线
- overline 上划线
/* text-decoration: overline; */
/* text-decoration: underline red dotted; */
以上为设置样式颜色
9.2 white-space 设置网页如何处理空白
可选值：
- normal 正常
- nowrap 不换行
- pre 保留空白
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;/*省略号*/
扫一扫
5436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
