三、文本阴影属性自定义字体

最新推荐文章于 2022-06-02 14:40:06 发布

杨691

最新推荐文章于 2022-06-02 14:40:06 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/kissing_yang/article/details/118529434

版权

本文介绍了如何使用CSS实现凹凸字、模糊字和火焰字效果，以及自定义字体和字体图标的引入与使用。通过@font-face规则加载自定义字体文件，并在页面中应用。同时，讲解了从阿里巴巴矢量图标库获取和使用字体图标的步骤，包括Unicode和class两种使用方式。

摘要由CSDN通过智能技术生成

text-shadow: h-shadow v-shadow blur color;

3.1 凹凸字

为文字左上设置黑色阴影，为右下设置白色阴影设置凹字

.ao {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

为文字左上设置白色阴影，为右下设置黑色阴影设置凹字

.tu{
text-shadow: -1px -1px 1px #fff,1px 1px 1px rgb(160, 95, 95);
}

3.2 模糊字

不设置水平与垂直的偏移，直接设置模糊

text-shadow: 0px 0px 40px black;

3.3 火焰字

叠加多层阴影

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

四、自定义字体

在项目开发过程中有时需要进行自定义字体的（由客户或UI提供的字体）使用，会给我们字体文件（大多数是以.TTF结尾的文件）

通常情况下是由UI提供，也可以在

https://www.dafont.com/

https://www.sentyfont.com/pailou.htm?gclid=EAIaIQobChMIuPPdqZDV8AIVGhxgCh14swGGEAEYASAAEgLnevD_BwE

进行查找

   /*在当前页引入自定义字体并进行命名*/
		@font-face {
            font-family: ai1;
            src: url(../font/DS-DIGI.TTF);
        }

        @font-face {
            font-family: ai2;
            src: url(../font/OzCaramel.ttf);
        }

        @font-face {
            font-family: ai3;
            src: url(../font/StrawberryCupcakes.ttf);
        }
		/*使用时可以直接通过自定义命名进行字体引用*/
        div:nth-of-type(1) {
            font: 700 100px ai1;
        }

        div:nth-of-type(2) {
            font: 700 100px ai2;
        }

        div:nth-of-type(3) {
            font: 700 100px ai3;
        }

五、字体图标

字体图标与字体很像，就是一些图标以文字的形式书写在页面上，但是现在最常用的方式为通过引入对应css书写class属性的形式进行图标的展示

第一步

进入阿里巴巴矢量图标库https://www.iconfont.cn/

第二步

选择资源管理->我的项目

第三步

点击新建项目，为当前需要使用字体图标的项目创建项目

第四步

填入项目信息新建项目

新创建的项目中并没有字体图标，需要我们针对当前项目需要使用的图标进行添加

第五步

选择图标库->官方图标库

第六步

选择提供的图标大致范围

第七步

将项目中需要使用的图标加入购物车

第八步

点击购物车将选择图标添加至对应项目

第九步

使用方式两种引用方式两种

第十步

在页面使用

<!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="//at.alicdn.com/t/font_2558042_plugj65qpqa.css">  -->
    <!-- 本地引用 注意修改css中font-family的url -->
    <link rel="stylesheet" href="../css/iconfont.css">
    
</head>

<body>
    <!-- unicode形式 -->
    <span class="iconfont" >&#xe600;</span>
    <!-- class形式 -->
    <span class="iconfont icon-day0519jisutuikuan" ></span>
</body>

</html>