字体图标原理
在CSS3中有一个@font-face
属性,这个属性可以用来实现服务器字体:让所有的用户都能使用相同的字体效果。
font-family
这个属性只能让用户使用自己本地的字体,达不到所有用户访问网站时字体统一的目的。
@font-face
在使用这个属性前,要考虑字体版权问题以及字体包大小。
会出现什么问题:
- 网页加载慢,因为中文字体包太大
- 版权问题,如果通过这种方式使用对应的字体,会涉及到版权
字体图标就是@font-face的最佳应用,本质上,字体图标就是别人帮你生成的一种特殊的字体文件。在我们项目中引入并创建出一种自定义的字体,然后实现对应的效果展示。展示的时候用的是一些我们自己不会轻易使用到的字符,例如:
如果我们想要自己引入对应的字体图标文件:
- 引入字体文件并起一个名字
-
-
@font-face {
-
font-family: icon;
-
src: url(./font/iconfont.ttf);
-
}
-
- 给元素设置一个类名并设置对应的字体
-
-
.box {
-
font-family: 'icon';
-
}
-
- 给元素中写入对应的字符
-
<div class="box"></div>
最终网页上展示出对应的字体图标
所谓的字体图标,就是利用别人定义的字体文件,通过@font-face引入后,利用特殊字符显示对应的图标的一种操作方式,本质上来讲,字体图标就是文字。
若有收获就点个赞吧!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgeihff
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01