12-2-CSS 字体图标

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

  • CSS 字体图标
    • 1 字体图标的产生
    • 2 字体图标的优点
    • 3 字体图标的下载
    • 4 字体图标的引入
      • 4.1 Unicode 引用
      • 4.2 font-class 引用
    • 5 字体图标的追加

CSS 字体图标

1 字体图标的产生

字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点很明显。

  1. 图片文件还是比较大的。
  2. 图片本身放大和缩小会失真。
  3. 一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2 字体图标的优点

字体图标较于精灵图的优点：

  • 字体图标追加方便
  • 字体图标不会失真

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等

兼容性：几乎支持所有的浏览器，请放心使用

注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

  • 如果遇到一些结构和样式比较简单的小图标，就用字体图标。图标非常简单的时候使用字体图标。
  • 如果遇到一些结构和样式复杂一点的小图片，就用精灵图。图标比较复杂的时候使用精灵图。
  • 我们能使用字体图标的时候，尽量就不用精灵图

字体图标加载的原理

页面链接相应的字体文件，再对字体文件中的编码进行解析。

  • src = “aaaa.font” —> 链接字体文件
  • 浏览器对链接字体文件进行解析，解析字体文件里面的编码
  • 比如：aaaa.font 里面有3个编码，分别是 a,b,c，那么我们去使用 a —> a这个字体图标，同理用bc

3 字体图标的下载

阿里 iconfont 字库

iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。 重点是，免费！

4 字体图标的引入

下载完毕之后，注意原先的文件不要删，后面追加可能会用到。

4.1 Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

  • 支持按字体的方式去动态调整图标大小，颜色等等。
  • 默认情况下不支持多色，直接添加多色图标会自动去色。

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

第一步：拷贝项目下面生成的 @font-face

  • @font-face它是一个css3的引入第三方字体的扩展样式
@font-face {font-family: 'iconfont';src: url('iconfont.eot?t=1678946737539'); /* IE9 */src: url('iconfont.eot?t=1678946737539#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff2?t=1678946737539') format('woff2'),url('iconfont.woff?t=1678946737539') format('woff'),url('iconfont.ttf?t=1678946737539') format('truetype'),url('iconfont.svg?t=1678946737539#iconfont') format('svg');
}

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

  1. TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
  2. Web Open Font Format(.woff)格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
  3. Embedded Open Type(.eot)格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；
  4. SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

取值：

字体描述值说明
font-familyname必需的。定义字体的名称。
srcURL必需的。定义该字体下载的网址（S）

https://www.runoob.com/cssref/css3-pr-font-face-rule.html

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

大多数场景下，@font-face都是用于字体图标。

实际工作中的大多数应用需求，直接使用系统字体即可，极少数需要特殊定制，那么设计师会给出相关字体进行引入即可。

第二步：定义使用 iconfont 的样式

.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased; /*这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。这个设定在ios中表现比较明显，在windows中表现的不明显。*/-moz-osx-font-smoothing: grayscale; /*这个属性是火狐搞的, grayscale抗锯齿*/
}

第三步：挑选相应图标并获取字体编码，应用于页面

  • &; 是html里面编码必须的
  • #x 表示后面的编码是一个十六进制数字
<span class="iconfont">&#x33;</span>

4.2 font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

5 字体图标的追加

iconfont图标的追加：

将所选择的图标加入某个项目，当未来需要添加的图标时，可以选择入这个项目，重新下载并覆盖。

在这里插入图片描述

浏览器第一次链接这个字体文件会进行缓存，如果后期新增就需要强制刷新 ctrl + f5

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/796489.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

蓝桥杯算法题：卡片换位

蓝桥杯算法题：卡片换位

问题描述 你玩过华容道的游戏吗&#xff1f;这是个类似的&#xff0c;但更简单的游戏。 看下面 2 x 3 的格子 --------- | A | * | * | --------- | B | | * | --------- 1 2 3 4 5 在其中放 5 张牌&#xff0c;其中 A 代表关羽&#xff0c;B 代表张飞&#xff0c;* 代表士兵…
阅读更多...
CLCD 流水线发布SpringBoot项目

CLCD 流水线发布SpringBoot项目

目录 一、流水线 1.1 点击进入流水线 1.2 新建流水线 二、添加流水线 三、构建上传和构建镜像 ​编辑 四、Docker部署 一、流水线 1.1 点击进入流水线 1.2 新建流水线 二、添加流水线 三、构建上传和构建镜像 在构建上传里添加一个步骤&#xff1a;构建镜像&#xff0c;这…
阅读更多...
【鸿蒙 HarmonyOS】@ohos.promptAction (弹窗)

【鸿蒙 HarmonyOS】@ohos.promptAction (弹窗)

一、背景 创建并显示文本提示框、对话框和操作菜单。 文档地址&#x1f449;&#xff1a;文档中心 说明 本模块首批接口从API version 9开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 该模块不支持在UIAbility的文件声明处使用&#xff0c;即…
阅读更多...
GitHub入门与实践

GitHub入门与实践

ISBN: 978-7-115-39409-5 作者&#xff1a;【日】大塚弘记 译者&#xff1a;支鹏浩、刘斌 页数&#xff1a;255页 阅读时间&#xff1a;2023-08-05 推荐指数&#xff1a;★★★★★ 好久之前读完的了&#xff0c;一直没有写笔记。 这本入门Git的书籍还是非常推荐的&#xff0c;…
阅读更多...
【使用 PyQt6-第03章】 部件 QPushButton、QCheckBox、QComboBox、QLabel 和 QSlider 小部件

【使用 PyQt6-第03章】 部件 QPushButton、QCheckBox、QComboBox、QLabel 和 QSlider 小部件

目录 一、说明二、快速演示三、QLabel四、Q复选框五、QComboBox六、QListWidget七、QLine编辑八、QSpinBox 和 QDoubleSpinBox九、Q滑块十、QDial十一、结论 一、说明 部件 QPushButton、QCheckBox、QComboBox、QLabel 和 QSlider 小部件 创建附加窗口&#xff0c;本教程也适…
阅读更多...
Golang | Leetcode Golang题解之第14题最长公共前缀

Golang | Leetcode Golang题解之第14题最长公共前缀

题目&#xff1a; 题解&#xff1a; func longestCommonPrefix(strs []string) string {if len(strs) 0 {return ""}isCommonPrefix : func(length int) bool {str0, count : strs[0][:length], len(strs)for i : 1; i < count; i {if strs[i][:length] ! str0 …
阅读更多...
HTTP 摘要认证

HTTP 摘要认证

文章目录 一、什么是摘要认证二、工作流程三、实例演示 一、什么是摘要认证 摘要认证&#xff0c;即 Digest Access Authentication&#xff0c;是一种HTTP身份验证机制&#xff0c;用于验证用户的身份。相较于基本认证&#xff08;Basic Authentication&#xff09;使用用户名…
阅读更多...
Qt之信号和槽的机制

Qt之信号和槽的机制

前言 在 C 中&#xff0c;对象与对象之间产生联系要通过调用成员函数的方式。但是在 Qt中&#xff0c;Qt提供了一种新的对象间的通信方式&#xff0c;即信号和槽机制。在GUI编程中&#xff0c;通常希望一个窗口部件的一个状态的变化会被另一个窗口部件知道&#xff0c;为…
阅读更多...
12.自定义的多帧缓存架构

12.自定义的多帧缓存架构

1.简介 在数字图像处理中&#xff0c;经常需要用到的一个架构就是多帧缓存。视频流中需要用到多帧缓存来防止帧撕裂现象&#xff0c;图像处理中也需要帧差法来做移动目标检测。因此一个多帧缓存架构在图像系统的设计中是十分重要的。 2.多帧缓存 在视频流中&#xff0c;通常不…
阅读更多...
前端开发全景指南：语言与框架的精粹

前端开发全景指南：语言与框架的精粹

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…
阅读更多...
解决IDEA下载mysql驱动太慢

解决IDEA下载mysql驱动太慢

下载驱动 下载页 解压后&#xff0c;提取**.jar**文件&#xff0c;放到一个目录下(你自己决定这个目录) 打开IDEA项目&#xff0c;点击右侧的数据库选项卡 在打开的页面&#xff0c;点击号 依次选择&#xff1a;数据源->MySQL 在弹出的页面&#xff0c;依次选择&#…
阅读更多...
mysql表字段长度扩容分析--MySQL什么情况下拓展字段长度会锁表？

mysql表字段长度扩容分析--MySQL什么情况下拓展字段长度会锁表？

MySQL什么情况下拓展字段长度会锁表&#xff1f; 原生MySQL只支持不跨越256字节的在线扩展&#xff08;online&#xff09;&#xff0c;对于跨越256字节的扩展只支持复制方式&#xff08;copy&#xff09;&#xff0c;扩展时需要锁表且禁止对数据表进行写操作。 字符串的字段是…
阅读更多...
Quantinuum与微软携手突破：开创容错量子计算新纪元

Quantinuum与微软携手突破：开创容错量子计算新纪元

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
腾讯云轻量服务器流量不够用了会怎么样？

腾讯云轻量服务器流量不够用了会怎么样？

腾讯云轻量应用服务器是限制月流量的&#xff0c;如果当月流量不够用了&#xff0c;流量超额了怎么办&#xff1f;流量超额后&#xff0c;需要另外支付流量费&#xff0c;如果你的腾讯云账号余额&#xff0c;就会自动扣除对应的流量费&#xff0c;如果余额不足&#xff0c;轻量…
阅读更多...
YOLOv7原创独家改进: 小目标 | 注意力 |卷积和注意力融合模块(CAFMAttention) | 2024年4月最新成果

YOLOv7原创独家改进: 小目标 | 注意力 |卷积和注意力融合模块(CAFMAttention) | 2024年4月最新成果

💡💡💡本文独家改进：卷积和注意力融合模块(CAFMAttention)，增强对全局和局部特征的提取能力，2024年最新的改进思路 💡💡💡创新点：卷积和注意力巧妙设计 💡💡💡如何跟YOLOv8结合：1）放在backbone后增强对全局和局部特征的提取能力；2）放在detect前面，增…
阅读更多...
深入浅出 -- 系统架构之负载均衡Nginx资源压缩

深入浅出 -- 系统架构之负载均衡Nginx资源压缩

一、Nginx资源压缩 建立在动静分离的基础之上&#xff0c;如果一个静态资源的Size越小&#xff0c;那么自然传输速度会更快&#xff0c;同时也会更节省带宽&#xff0c;因此我们在部署项目时&#xff0c;也可以通过Nginx对于静态资源实现压缩传输&#xff0c;一方面可以节省带宽…
阅读更多...
【Java网络编程】HTTP超文本传输协议

【Java网络编程】HTTP超文本传输协议

一、HTTP超文本传输协议 HTTP全称为Hyper Text Transfer Protocol超文本传输协议&#xff0c;它是基于TCP传输协议构建的应用层协议&#xff0c;作为支撑万维网www的核心协议&#xff0c;为了保证其效率及处理大量事务的能力&#xff0c;因此在设计时&#xff0c;HTTP被制定成为…
阅读更多...
lua学习笔记5（分支结构和循环的学习）

lua学习笔记5（分支结构和循环的学习）

print("*****************分支结构和循环的学习******************") print("*****************if else语句******************") --if 条件 then end a660 b670 --单分支 if a<b thenprint(a) end --双分支 if a>b thenprint("满足条件")…
阅读更多...
C#操作MySQL从入门到精通(5)——查询数据

C#操作MySQL从入门到精通(5)——查询数据

前言 在和MySql数据库交互的过程中，查询数据是使用最频繁的操作，本文详细介绍了查询数据的各种操作，包括查询一列数据、 查询两列数据、查询所有列数据、查询不重复的数据、查询指定行数据，绝对是C#操作MySql数据库史上最详细教程，能够帮助小白快速入门以及将这些功能迅速…
阅读更多...
京东云4C8G服务器优惠价格418元1年，轻量云主机4核8G配置

京东云4C8G服务器优惠价格418元1年，轻量云主机4核8G配置

京东云服务器优惠活动4C8G服务器配置418元一年&#xff0c;1899元3年&#xff0c;配置为轻量云主机4C8G-180G SSD系统盘-5M带宽-500G月流量&#xff0c;京东云服务器活动页面 jdyfwq.com 可以查看京东云服务器详细配置和精准报价单&#xff0c;活动打开如下图&#xff1a; 轻量…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023