CSS | iconfont与@font-face

最新推荐文章于 2024-09-21 09:21:26 发布
最新推荐文章于 2024-09-21 09:21:26 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： CSS3 文章标签： iconfont svg webfont 小图标 font-face
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36145914/article/details/86479940
版权
本文探讨了CSS中的@font-face规则如何用于实现iconfont等小图标，解释了@font-face的基本概念、优点及使用注意事项，并介绍了SVG作为另一种图标解决方案的特点和优缺点。
摘要由CSDN通过智能技术生成

iconfont/webfont的基本原理


若文章有任何纰漏或未涉及你想了解的内容，欢迎在评论提出，我会尽最快速度回复。

问题场景

  在实际开发中，我们或多或少会使用到类似iconfont/webfont的小图标。它们提供的图标并不是图片，而是字体。这背后的原理以及使用目的是什么呢？

原理与目的

iconfont等基于字体的小图标的实现原理是基于CSS3的@font-face。使用@font-face的好处有字体比图片体积小，可以通过CSS进行样式修改等。
接下来，我们将详细介绍@font-face。

@font-face

@font-face简介

 在CCS3的@font-face出现之前，WEB设计受限于用户端默认字体库的限制，@font-face的出现，极大的丰富了字体的选择。

W3school对@font-face的描述

 iconfont正是利用@font-face规则设计的图标，这区别于早些年，直接使用图片，或是改良的CSS sprite方式。字体文件更小，且可以像操纵文字一样，修改图标的大小颜色等属性。

使用注意

  1. 为什么iconfont除SVG格式外，会引入三种字体格式呢？
    这是
最低0.47元/天 解锁文章
MGsniper
关注
专栏目录
iconfont 图标库引入(@font-face)后不生效问题
汤一飞
07-25 355
埋点代码埋到网站后, 新引入的字体文件始终不显示。
css_iconfont
01-06
css_iconfont css_iconfont用法
【Outfit Font】全方位介绍与使用指南
最新发布
lph159的博客
09-21 850
Outfit Font 是一款无衬线字体，采用极简风格设计，具有清晰易读的字形，非常适合现代化的网页设计和品牌视觉传达。它由 Google Fonts 提供免费使用，并且支持多种字重（weight），如细体、常规体、粗体等，适应多种设计需求。Outfit Font 是一款极具现代感的无衬线字体，其简洁、优雅和多功能的设计让它在各类设计项目中脱颖而出。从品牌视觉设计到网页和移动应用开发，Outfit Font 都能提供卓越的视觉体验。
CSS 小结笔记之图标字体（IconFont）
weixin_30918415的博客
10-02 289
　　本篇主要介绍一种非常好用的图标大法——图标字体（IconFont）。 　　什么是图标字体？顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类的，而是各种图标。 　　网站上经常会用到各种图标，之前网页上使用图标主要采用精灵图（背景位置+背景缩放）来实现，但是这样使用起来有许多不便之处，一方面缩放处理起来比较麻烦，一方面如果要改动一些图标就需要去找到设计人员重新设计，然后重新添加...
Iconfont阿里矢量图库结合css3属性font-face的使用
溯夜，逆流而上
11-11 2045
在前端的网页制作中，经常要使用到小图标来美化自己的网页，或者使用自定义的字体来美化，现在来看看如何用css3的属性font-face来结合阿里的矢量库
CSS：icon font
王书硕
03-28 1291
下载ai图标文件，用ps打开，新建一个图层，选中一个图层，选择文件>导出>导出图层到文件，选择png24. 用FontCreator打开字体文件，添加或者修改一个图标，导入刚才的png24图片文件，调整大小，设置uni名字比如uni2233、uniabc1。用ali-console-font的话比较省事。然后保存或导出为ttf格式。 然后只用在线工具将字体转化成多个字体以兼容不同浏览器的字体格式要求
Icon font and @font-face
zhuchuji的博客
01-05 140
Using @font-face
icon通过@font-face实现
09-10
本篇文章将详细讲解如何通过`@font-face`和CSS3技术来实现icon图标。 `@font-face`是CSS3中引入的一个特性，允许开发者在网页中使用非系统默认的自定义字体。它的工作原理是将字体文件（如.ttf、.eot、.woff等格式...
@font-face制作Web Icon
06-12
@font-face是CSS3中有关于字体设置的属性，通过@font-face可以将本地字体设置为Web页面字体，并能兼容所有浏览器，使用这个属性就不必担心用户本地不具备这样的字体。因为我们把字体都上传到服务器上，不过这样一来...
Web字体(【iconfont.cn】引用在线字体)@font-face属性的使用以及字体格式详解
dwjdj的博客
01-27 1831
服务器字体的设置： ✔引用在线字体。（了解） ✔下载到本地使用（推荐） @font-face是CSS3新增的属性，用于定义服务器字体。通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体，规则如下： @font-face{ font-family:字体名称； src:字体路径； } iconfont.cn网站里面的字体只能针对当前显示的字体设置，要想设置想要的字体...
二次开发时，css中 @font-face 的处理方法
热门推荐
Austin_奥斯丁
01-14 1万+
现在要对项目做二次开发，css代码里面有如下操作。 @font-face { font-family: "iconfont"; src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAADlgAAsAAAAAWMQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCA...
css中@font-face的使用和字体图标
Be_black的博客
05-17 7566
@font-face属性和字体图标的使用
css高级技巧-字体图标(iconfont)
weixiao0111的博客
03-14 289
字体图标 使用场景： 主要用于显示网页中通用、常用的一些小图标。 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。 tips: 如果遇到一些结构和样式比较简单的小图标，就用字体图标。 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。 字体图标的下载 icomoon 字库 http://icomoon.io 推荐指数 ★★★★★ 阿里 iconf...
CSS 之 iconfont 字体图标的使用
qq_69240236的博客
03-11 1222
学到了吧。
CSS之iconfont导入方式
weixin_53027472的博客
07-21 5192
本文章主要是使用iconfont的教程，html页面中如何引入阿里巴巴icon
CSS引入外部字体的方式（@font-face）
weixin_46353030的博客
04-29 2281
步骤一、在css文件中或者html的style标签里使用@font-face，其语法格式如下: @font-face { font-family: "字体名称1","字体名称2",...; src: url("字体存放路径"); } 步骤二、使用该字体 .test { font-family: "字体名称1","字体名称2",...; } 例如我要引入一个Pixeboy字体，完整代码如下： @font-face { font-family: "Pi
《CSS》iconfont使用案例。并结合 position: fixed定位导航栏的位置，导航栏内又可以使用弹性布局display：flex对各个子级div布局。便捷快速。
每天八杯水的博客
05-13 735
一、css代码 .navigation{ position: fixed; /*相对于整个窗口定位*/ height: 45px; width: 100%; z-index: 3; left: 0px; /*距离设备左侧0距离*/ bottom:0px; /*距离设备底部0距离*/ z-index: 3; /*层级设高一点就可以了*/ } 二、导航栏可以使用弹性布局display：flex方便快速 父级div使用di...
CSS中使用Iconfont的详细说明
WbhsOcaml的博客
09-28 731
在iconfont.css文件中，可以搜索图标的类名，类名通常以"icon-"开头，后跟图标名称。例如，假设我们想使用一个名为"home"的图标，我们可以找到类名为"icon-home"的样式。记住，我们需要将字体文件和CSS样式表正确引入，并使用正确的类名来显示特定的图标。Iconfont是一种常用的图标字体库，它将各种图标制作成字体文件，通过CSS样式来实现图标的展示和使用。每个图标都会被分配一个对应的Unicode编码，我们可以通过设置元素的CSS类来显示特定的图标。要调整图标的颜色，可以使用。
CSS学习29：字体图标（iconfont）包含下载及使用方法
玉安_ZhangDe的博客
04-10 2169
阿里 iconfont 字库 访问链接：iconfont-阿里巴巴矢量图标库 下载： 1、在页面里随便选择一个图标库 2、把鼠标移动到图标上点击购物车按钮 3、在页面顶部找到购物车 4、不需要的可以在购物车里面点击图片删除，选择完毕以后点击下载代码 插入项目使用 1、把压缩包解压到项目根目录，文件夹名字可以改一下，例如iconfont 2、点击文件夹，访问demo_index.html这个文件 3、字体图标类型有三种 我们这里单选unico...
@font-face { font-family: 'iconfont'; /* project id 1119349 */ src: url('//at.alicdn.com/t/font_1119349_026b815hwmpe.eot'); src: url('//at.alicdn.com/t/font_1119349_026b815hwmpe.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1119349_026b815hwmpe.woff2') format('woff2'), url('//at.alicdn.com/t/font_1119349_026b815hwmpe.woff') format('woff'), url('//at.alicdn.com/t/font_1119349_026b815hwmpe.ttf') format('truetype'), url('//at.alicdn.com/t/font_1119349_026b815hwmpe.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont"!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-left-arrow:before{ content: "\e63b"; } .icon-input-password:before{ content: "\e627"; } .icon-input-show:before{ content: "\e678"; }
03-20
其中，font-family属性定义了字体的名称为'iconfont'，src属性指定了字体文件的路径。这段代码中使用了两个src属性，第一个是eot格式的字体文件，第二个是eot格式的字体文件加上一个问号和一些参数。这些参数可能是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值