CSS3字体和字体图标_css图标字体库

作者：Monodyee | 2024-02-19 09:22:32

踩

css图标字体库

字体和字体图标

1、CSS3嵌入网络字体

1、https://www.dafont.com/
2、可以通过网站下载自己喜欢的字体
3、在style里面通过@font-face定义这个字体和字体的所在位置，就可以通过font-family引入这个字体
     @font-face{
           font-family: myfont;
           src: url(../font/suite/SuitePersonalUse.ttf);  

        }
        div{
            font-family: myfont;
        }
4、font-family：定义文本的字体系列
5、文字阴影：
   可以使用text-shadow属性将阴影应用于文本
6、text-shadow：x,y,blur,color
   x:水平阴影的位置，允许负值
   y:垂直阴影的位置，允许负值
   blur：可选，模糊的距离
   color：可选，阴影的颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、文字效果设置

<!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>文字阴影效果</title>
    <style>
        @font-face {
            font-family: myfont;
            src: url(../font/start/Start.otf);
        }

        div {
            width: 250px;
            height: 100px;
            float: left;
            font-family: myfont;
            margin: 10px;
            font-size: 40px;
            text-align: center;
            line-height: 100px;
            background-color: brown;
        }

        .box1 {
            /*内阴影效果： 设置1px的距离，设置黑色，通过对比。制造阴影效果 背景颜色选择淡色 */
            background-color: rgb(243, 243, 242);
            color: #f00;
            text-shadow: 1px 1px 0px #070707;
        }

        .box2 {
            /* 3D立体效果 */
            /* 进行多次阴影设置：设置不同的阴影色，达到立体的文字效果,zuihou */
            background-color: #cfadad;
            color: white;
            text-shadow: 0 1px  0 #ccc, 0 2px  0 #575151, 
            0 3px  1px #5c4545, 0 4px  2px #2c2828,
            1px 6px  10px #2b06e4;

        }
        .box3{
            /*霓虹灯效果  */
            /* 不设置任何x轴和y轴的值，只设置模糊半径的值，模糊值越来越大 */
            background-color: #070707;
            text-shadow: 0 0 5px #f18888, 0 0 30px  #f18888, 0 0 50px #414efd, 0 0 90px #414efd, 0 0 150px #414efd;

        }
        .box4{
            /*  凸版效果:只设置y轴的偏移效果，设置一点模糊距离*/
            color: aliceblue;
            text-shadow: 0 5px 3px #555;
        }
        .box5{
            /* 浮雕效果 */
            /* 1、背景是暗色，前景色是亮色 */
            color: white;
            background-color: #d53737;
            text-shadow: 0 -3px 0 #374683;
        }
        .box6{
            /* 描边效果 :制作文字描边*/
            background-color: #a5a5a5;
            -webkit-text-stroke: 1px #e39022;
        }
        .box7{
            /* 设置抽空文字，两个属性搭配使用 */
            font-weight: 700;
            -webkit-text-stroke: 1px #e39022;
            -webkit-text-fill-color:transparent;
        }
        .box8{
            /* 图片填充文字 */
            /* -webkit-background-clip:可以制作背景图片填充文本的效果  */
            background: url("../img/3.jpg") no-repeat left top;
            -webkit-background-clip: text;
            -webkit-text-fill-color:transparent;

        }
        .box9{
            /* 模糊效果 */
            /* 将前景色设置为透明。只设置模糊度 */
            color: transparent;
            text-shadow: 0 0 10px rgb(27, 17, 17);
        }

    </style>
</head>

<body>
    <div class="box1">内阴影效果</div>
    <div class="box2">3D立体效果</div>
    <div class="box3">霓虹灯效果</div>
    <div class="box4">凸版效果</div>
    <div class="box5">浮雕效果</div>
    <div class="box6">描边效果</div>
    <div class="box7">抽空文字</div>
    <div class="box8">图片填充文字</div>
    <div class="box9">模糊效果</div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

2、字体图标

1、字体图标就是一些小图标，主要用于显示网页中的一些通用的、常用的一些小图标。
2、字体图标展示的是图标，实际上属于字体。
3、字体图标的优点：
   轻量级：图标字体比图像要小，字体加载后图标就会马上渲染出来。减少服务器请求
   灵活性：本质是文字，可以随意的改变颜色，产生阴影，透明效果，旋转
   兼容性：几乎支持所有的浏览器，请放心使用
4、字体图标不能替代精灵图，只是对图标技术的部分提升和优化
5、简单的使用字体图标，复杂的使用精灵图
6、字体图标的使用：
   1、字体图标的下载
   2、对字体图标的引入
7、不同的浏览器支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文    件
8、通过link在css引入，然后设置类名。在css样式中全局声明字体，
    <link rel="stylesheet" href="../icomoon/style.css">
   <span class="icon-codeigniter"></span>
9、通过css引入页面。注意字体文件路径的问题：在style.css里面复制@font-face的字体声明代码，然后粘贴。然后把小框框复制过去，然后在该图标添加字体(记得修改路径)
     @font-face {
            font-family: 'icomoon';
         
            src: url('../icomoon/fonts/icomoon.eot?adcps6');
            src: url('fonts/icomoon.eot?adcps6#iefix') format('embedded-opentype'),
                url('../icomoon/fonts/icomoon.ttf?adcps6') format('truetype'),
                url('../icomoon/fonts/icomoon.woff?adcps6') format('woff'),
                url('../icomoon/fonts/icomoon.svg?adcps6#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

   
        span {
            font-family: 'icomoon';
        }
         <span></span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在这里插入图片描述

3、字体图标库

1、https://www.iconfont.cn/
2、https://icomoon.io/
3、https://fontawesome.com/
4、注意：可以通过add下载更多彩色的图标，通过编辑放大缩小调整方向后下载，然后生成字体，我们就可以下载了
5、得到的压缩文件夹，会有四个文件
1
2
3
4
5

1、进入网站

在这里插入图片描述

2、点击图标

在这里插入图片描述

3、可以选择更多的图标

在这里插入图片描述

4、点击添加，可以选择更多的字体库

在这里插入图片描述

5、可以通过编辑改变字体图标的大小和旋转的位置

在这里插入图片描述

6、生成字体图标

在这里插入图片描述

7、生成之后，下载得到压缩文件夹，保存起来，然后使用

在这里插入图片描述

[
8、引入后选择小方框

在这里插入图片描述

4、字体声明代码

<!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: 'icomoon';
         
            src: url('../icomoon/fonts/icomoon.eot?adcps6');
            src: url('fonts/icomoon.eot?adcps6#iefix') format('embedded-opentype'),
                url('../icomoon/fonts/icomoon.ttf?adcps6') format('truetype'),
                url('../icomoon/fonts/icomoon.woff?adcps6') format('woff'),
                url('../icomoon/fonts/icomoon.svg?adcps6#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
        }
    </style>
</head>

<body>
    <span></span>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

5、css引入代码

<!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="../icomoon/style.css">
    <style>
       
    </style>
    
</head>
<body>
    <span class="icon-codeigniter"></span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6、字体图标的追加

1、如果需要添加新的字体图标到原来的字体文件中，需要：
   把压缩包里面的selection.json重新上传，选中自己想要的新的图标，重新下载压缩包，并替换原来的文件就可以
   1、重新点击iconapp进入页面
   2、选择import icons重新上传自己的selection.json
   3、继续添加想要的字体图标
   4、重新生成，然后重新下载
   5、替换原来的文件夹
1
2
3
4
5
6
7

第2步
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/113910