CSS3字体和字体图标

已于 2023-04-11 10:16:59 修改
阅读量1.1k 收藏 3
点赞数
文章标签： css css3 前端
于 2023-04-11 10:12:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HGYYR/article/details/130077285
版权

字体和字体图标

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：可选，阴影的颜色

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>

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>

在这里插入图片描述

3、字体图标库

1、https://www.iconfont.cn/
2、https://icomoon.io/
3、https://fontawesome.com/
4、注意：可以通过add下载更多彩色的图标，通过编辑放大缩小调整方向后下载，然后生成字体，我们就可以下载了
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>

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>

6、字体图标的追加

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

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

HGYYR
关注
css font-family 字体及各大主流网站对比
07-06 1169
@常用字体对应表： HTML，CSS，font-family：中文字体的英文名称 宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB231...
Css字体图标
m0_69793485的博客
05-11 978
字体图标： 字体图标展示的是图标，本质是字体。 用来处理简单的、颜色单一的小图标。 字体图标的优点： ①.可以灵活的修改样式，字体大小等。 ②.体积小，可以降低服务器请求的次数。 ③.几乎兼容所有主流浏览器，使用简便。 总结 1.遇到一些结构和样式比较简单的小图标，就用字体图标。 2.如果遇到一些结构和样式比较复杂的小图片，就用精灵图 字体图标的使用 ①.Icommoon ②.阿里巴巴字体库 （常用） 下载字体包 阿里巴巴字体库：https://www.iconfont.cn/ .
CSS——字体&背景（Font & Background）
最新发布
Fan_web的博客
08-14 1608
本文分享了CSS中的字体和背景的内容：字体族、图标字体、行高、字体的简写属性、文本的垂直水平对齐等，还有一个简单的按钮代码练习。同时跟大家分享了雪碧图的知识点，以及线性渐变和径向渐变的使用。下一篇补充一下HTML的表单和表格的内容。
CSS字体图标
weixin_45604020的博客
07-06 1360
展示的是图片，本质是字体。给网页添加颜色简单且单一的小图标。优点：可灵活修改图标大小和颜色，因为图标本质是字体，字体可以修改图标也可修改；体积小、渲染快，提升服务器请求速度；所有主流浏览器都可使用。精灵图颜色多样和结构复杂字体图标颜色单一结构简单。
css 字体图标
weixin_51757999的博客
07-03 1879
一、字体图标 ：概念：字体图标展示的是图标，本质是字体。可以使用css字体属性进行修饰。例如下图中的购物车图标： 二.优点灵活性：灵活地修改样式，例如：尺寸、颜色等轻量级：体积小、渲染快、降低服务器请求次数 兼容性：几乎兼容所有主流浏览器使用方便： 1. 下载字体包 2. 使用字体图标三.字体图标的下载1.进入https://www.iconfont.cn/网站，选择官方素材库下载 2.添加至购物车 3.选择添加至项目 4.选择下载至本地 四.用法1.引入字体图标样式表使用link标签引入iconfont.
CSS之字体图标
m0_62774164的博客
04-23 1491
1.字体图标的产生 字体图标使用场景：主要用于显示网页中使用，常用的一些小图标。 精灵图是由许多优点的，但是缺点明显。 1.图片文件还是比较大的。 2.图片本身放大缩小会失真。 3.一旦图片制作完毕要想更换非常复杂 此时，有一种技术的出现很好解决了哟上问题，就是字体图标iconfont。 字体图标展示的是图标，本质属于字体。 2.字体图标的优点 1.轻量级：一个图标新字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求 2.灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、
css3 fontawesome图标字体使用鼠标悬停动画图标字体
11-24
通过以上方法，您可以利用CSS3和Font Awesome轻松实现图标字体的动态效果，为网站或应用增添生动的交互体验。当然，这只是基础示例，实际应用中可以根据项目需求进行更复杂和精细的定制。对于压缩包文件“texiao6497...
css使用自定义图标字体
09-05
css实现使用自定义图标字体，像使用字体那样使用图标，可以调整大小和颜色。入门级别源代码。交流文章可以去https://blog.csdn.net/zhaoyang314?spm=1000.2115.3001.5343查看
纯css3字体图标导航菜单悬停特效
11-19
纯CSS3字体图标导航菜单悬停特效是一种利用CSS3特性实现的交互效果，它使得网页的导航菜单在鼠标悬停时能展现出独特的视觉变化。这种特效不仅能够提升用户体验，还能为网站增添现代感和专业性。下面将详细介绍如何...
【CSS3】字体图标、平面/空间转换、渐变、动画
zilin_taku的博客
07-15 785
及旋转的角度·x,y,z取值为0~1之间的数字。
CSS3自定义字体、字体图标
小赛赛爱吃肉
05-12 988
自定义字体 通常情况下，我们一般在设置字体的时候设置的是操作系统上的字体。如果用户的操作系统中没有该字体就会影响整个前端的一个用户体验。 在CSS3 中，新增了 自定义字体的内容，可以让我们自己定义一个字体，然后放到服务器上，这样尽管用户的操作系统中没有该字体，也会从服务器下载到指定的字体，不会影响用户体验。 文件结构如下 <style> /* 使用 @font-face 来指...
CSS3_字体图标
qq_55961861的博客
08-10 142
CSS3_字体图标！
CSS3：图标字体
小头Sophia
03-19 1170
1.图标字体：就是用字体代替图片 1）如：淘宝https://www.taobao.com/ （1）默认：（font-size:12px;） （2）审查代码，看到font-size默认为12px （3）用滚轮调整字体大小后，会有以下结果： 2）而新浪网：http://www.sina.com.cn/   的图标就不是用这种方式解决的，而是用图片：
css3之自定义字体
weixin_30394333的博客
10-21 155
使用@font-face自定义字体 　我们在浏览国外的一些个人网站时，总是可以发现一些非常个性的字体，比如 但是因为在电脑上安装的字体有限，所以很多时候我们都找不到自己想要的字体，这时候我们就需要使用css3提供的@font-face来实现个性化字体了。 　　但是说@font-face是css3中的新特性是不准确的，因为在css2中就已经支持了这一特性，ie浏览器当时也已经支持...
CSS - 字体图标
AlanDragonLee的博客
07-18 842
字体图标的用法
css之字体图标
qq_41860476的博客
08-27 241
字体图标的使用 打开提供字体图标的网址，这里给大家推荐一个https://www.iconfont.cn 选择或搜索你需要的字体图标，加入购物车，如下图所示 选后后点击购物车图标，找到下方的下载代码，点击 4. 下载至本地并解压 6.下载的压缩包里有使用的文档demo_index.html,这里使用的是font-class引用 将压缩包里的iconfont.css拷贝至你的项目目录中 在html里head标签中引用这个外部css文件 <head> <met
css字体图标
weixin_71115215的博客
06-10 183
使用字体图标的两种方式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值