字体族与图标字体

最新推荐文章于 2022-12-20 16:17:57 发布

qq_48424026

最新推荐文章于 2022-12-20 16:17:57 发布

阅读量160

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_48424026/article/details/119633542

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.字体族

(1)字体相关的样式

color 用来设置字体颜色

font-size 字体大小

和font-size 相关的单位

em：相当于当前元素的一个 font-size
rem：相当于根元素的一个 font-size

font-family 字体族(字体的格式)

可选值：

serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体

指定字体的类别，浏览器会自动使用该类别下的字体

font-family 可以同时指定多个字体，多个字体间使用，隔开；字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

(2)`font-face` 可以将服务器中的字体直接提供给用户去使用

问题：

1.加载速度

2.版权

3.字体格式

<!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>
        p{
            color: red;
            font-size: 40px;
            font-family:'Times New Roman', Times, serif;
        }
    </style>
</head>
<body>
    <p>东京奥运会开幕了！</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dLWIaaJ5-1628731302169)(C:/Users/admin/AppData/Roaming/Typora/typora-user-images/image-20210726092115831.png)]

2.图标字体

在网页中经常需要使用一些图标，可以通过图片来引入，但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们可以将图标直接设置为字体，然后通过 font-size 的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标

使用方式：

(1)通过类去使用

<!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>
    <link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
    <i class="fas fa-bell " style="font-size:50px; color:sandybrown"></i>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-okDTuHu8-1628731302171)(C:/Users/admin/AppData/Roaming/Typora/typora-user-images/image-20210726135644019.png)]

(2)通过伪元素

找到要设置的图标的元素，通过before或after选中
在 content 中设置字体的编码

设置字体的样式

font-family: 'Font Awesome 5 Brands';

font-family:'Font Awesome 5 Free';
font-weight: 900;

eg:

        p::before{
            content: '\f1b0';
            font-family:'Font Awesome 5 Free';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-weight: 900;
            color: skyblue;
            margin-right: 10px;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LWMTQHBt-1628731302172)(C:/Users/admin/AppData/Roaming/Typora/typora-user-images/image-20210726142148864.png)]

(3)通过实体使用图标字体

&#x图标的编码

 <span class="fas">&#xf0f3</span>

3.iconfont的使用

<!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>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        i.iconfont{
            font-size: 50px;
            color:mediumaquamarine;
        }

        p::before{
            content: '\e8b8';
            font-family: 'iconfont';
            font-size: 20px;
        }
    </style>
</head>
<body>
    <i class="iconfont">&#xe8ab;</i>
    <i class="iconfont">&#xe8ae;</i>
    <i class="iconfont">&#xe8af;</i>
    <p>11</p>
    <p>22</p>
    <p>33</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MmKAFOFe-1628731302174)(C:/Users/admin/AppData/Roaming/Typora/typora-user-images/image-20210726151911455.png)]

4.行高

(1)行高— `line-height`

行高指的是文字占有的实际高度
可以通过 line-height 来设置行高
- 行高可以直接指定一个大小(px em)，也可以直接为行高设置一个整数
- 如果行高是一个整数的话，行高将会是字体的指定的倍数
行高经常还用来设置文字的行间距
- 行间距=行高 - 字体大小
可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

(2)字体框

字体框就是字体存在的格子，设置 font-size 实际上就是在设置字体框的高度

<!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>
        div{
            height: 50px;
            line-height: 50px;
           border: 4px solid aqua;
        }
    </style>
</head>
<body>
    <div>东京奥运会开幕了！</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUnL7w8t-1628731302176)(C:/Users/admin/AppData/Roaming/Typora/typora-user-images/image-20210726153614133.png)]

5.字体的简写属性

(1) font 可以设置字体相关的所有属性

语法：

font：字体大小/行高字体族

行高可以省略不写，如果不写使用默认值

 font: 40px 'Times New Roman', Times, serif;

(2) font-weight 字重/字体的加粗

可选值:

normal 默认值

bold 加粗

100—900 九个级别

(3) font-style 字体的风格

normal 默认值

italic 斜体

6.文本的水平对齐和垂直对齐

(1)水平对齐—`text-align`

可选值： left 左侧对齐

right 右对齐

center 居中对齐

justify 两端对齐

(2)垂直对齐—`vertical-align`

可选值：baseline 默认值，基线对齐

top 顶部对齐

bottom 底部对齐

middle 居中对齐

7.其他的文本样式

text-decoration 设置文本样式

可选值：

none 默认，无样式

underline 下划线

line-through 删除线

overline 上划线

 text-decoration: line-through;

white-space 设置网页如何处理空白

可选值：

normal 正常

nowrap 不换行

pre 保留空白

.A{	border: indianred 4px solid;	width: 200px;	white-space: nowrap;	overflow: hidden;	text-overflow: ellipsis;  }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mWpP4xRm-1628731302177)(C:/Users/admin/AppData/Roaming/Typora/typora-user-images/image-20210728152044228.png)]

qq_48424026

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

字体族与图标字体

1.字体族

(1)字体相关的样式

(2)font-face 可以将服务器中的字体直接提供给用户去使用

2.图标字体

使用方式：

(1)通过类去使用

(2)通过伪元素

(3)通过实体使用图标字体

3.iconfont的使用

4.行高

(1)行高— line-height

(2)字体框

5.字体的简写属性

6.文本的水平对齐和垂直对齐

(1)水平对齐—text-align

(2)垂直对齐—vertical-align

7.其他的文本样式

(2)`font-face` 可以将服务器中的字体直接提供给用户去使用

(1)行高— `line-height`

(1)水平对齐—`text-align`

(2)垂直对齐—`vertical-align`