12(13)(14)-2(1)-CSS 字体图标+实战：商城首页

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

文章目录

  • CSS 字体图标
    • 1 字体图标的产生
    • 2 字体图标的优点
    • 3 字体图标的下载
    • 4 字体图标的引入
      • 4.1 Unicode 引用
      • 4.2 font-class 引用
    • 5 字体图标的追加
  • 实战：商城首页
    • 1 PxCook安装和使用
    • 2 编写代码原则及技巧

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

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

文章目录

  • CSS 字体图标
    • 1 字体图标的产生
    • 2 字体图标的优点
    • 3 字体图标的下载
    • 4 字体图标的引入
      • 4.1 Unicode 引用
      • 4.2 font-class 引用
    • 5 字体图标的追加
  • 实战：商城首页
    • 1 PxCook安装和使用
    • 2 编写代码原则及技巧

实战：商城首页

1 PxCook安装和使用

PxCook下载使用：https://fancynode.com.cn/pxcook

解锁新技能：通过PxCook查看PSD中尺寸、颜色等等样式代码

开发前的准备：

  1. 准备所有的切图，实际工作中UI设计师都准备好，这里使用教程已准备好的切图即可
  2. 准备一个自己的通用css文件，比如取名加做 common.css，方便学习和扩展
  3. 为当前项目准备好精灵图，根据需要将一些小图标进行合并成精灵图，避免不必要的请求，提高性能

2 编写代码原则及技巧

  1. 优先考虑标准流来完成布局，能不脱标就不脱标
  2. 其次考虑浮动、定位来完成布局

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

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

相关文章

WordPress LayerSlider插件SQL注入漏洞复现(CVE-2024-2879）

WordPress LayerSlider插件SQL注入漏洞复现(CVE-2024-2879）

0x01 产品简介 WordPress插件LayerSlider是一款可视化网页内容编辑器、图形设计软件和数字视觉效果应用程序，全球活跃安装量超过 1,000,000 次。 0x02 漏洞概述 WordPress LayerSlider插件版本7.9.11 – 7.10.0中，由于对用户提供的参数转义不充分以及缺少wpdb::prepare()，…
阅读更多...
使用vue3搭建一个CRM（客户关系管理）系统

使用vue3搭建一个CRM（客户关系管理）系统

目录 1. 需求分析 2. 设计 3. 技术选型 4. 开发环境搭建 5. 前端开发 6. 后端开发 7. 数据库搭建 8. 测试 9. 部署 10. 维护和迭代 总结 搭建一个CRM&#xff08;客户关系管理&#xff09;系统是一个复杂的项目&#xff0c;涉及到需求分析、设计、开发、测试和部署等…
阅读更多...
idea中MySQL数据库的配置

idea中MySQL数据库的配置

在IntelliJ IDEA中配置数据库可以通过以下步骤进行&#xff1a; 打开IntelliJ IDEA&#xff0c;在菜单栏中选择"View" -> "Tool Windows" -> "Database"&#xff0c;打开Database工具窗口。 在Database工具窗口上方&#xff0c;点击"…
阅读更多...
2024全国现代流通经济创新大会暨城郊大仓基地高质量建设论坛日程发布

2024全国现代流通经济创新大会暨城郊大仓基地高质量建设论坛日程发布

2024年4月19日 中国平谷 建设城郊大仓基地 创新现代流通经济 一、大会开幕式&主论坛 时间&#xff1a;9:00-12:00 地点&#xff1a;博物馆一楼 报告厅 主持人&#xff1a;中国商业联合会商贸物流与供应链分会会长干为 08:30-09:00 大会入场&宣传片视频 09:00-0…
阅读更多...
LeetCode 热题 100 | 多维动态规划（二）

LeetCode 热题 100 | 多维动态规划（二）

目录 1 5. 最长回文子串 2 1143. 最长公共子序列 菜鸟做题&#xff0c;语言是 C 1 5. 最长回文子串 核心思想&#xff1a;把总问题拆解为若干子问题。 总问题&#xff1a;从第 i 个字母到第 j 个字母是回文串子问题&#xff1a;从第 i 1 个字母到第 j - 1 个字母是回文…
阅读更多...
【Python基础】集合

【Python基础】集合

文章目录 [toc]什么是集合集合的特点元素不重复性示例 无序性示例 集合操作增加元素add()方法 删除元素clear()方法pop()方法remove()方法 交集intersection()方法&符号isdisjoint()方法 并集union()方法|符号 差集difference()方法-符号 对称差集symmetric_difference()方…
阅读更多...
配置交换机端口安全

配置交换机端口安全

1、实验目的 通过本实验可以掌握&#xff1a; 交换机管理地址配置及接口配置。查看交换机的MAC地址表。配置静态端口安全、动态端口安全和粘滞端口安全的方法。 2、实验拓扑 配置交换机端口安全的实验拓扑如图所示。 配置交换机端口安全的实验拓扑 3、实验步骤 &#xff…
阅读更多...
ZStack Cloud 5.0.0正式发布——Vhost主存储、隔离PVLAN网络、云平台报警优化、灰度升级增强四大亮点简析

ZStack Cloud 5.0.0正式发布——Vhost主存储、隔离PVLAN网络、云平台报警优化、灰度升级增强四大亮点简析

近日&#xff0c;ZStack Cloud 5.0.0正式发布&#xff0c;推出了包含Vhost主存储、隔离PVLAN网络、云平台报警优化、灰度升级增强在内的一系列重要功能。云主机管理、物理机运维、密评合规、灾备服务等诸多使用场景和功能模块均有更新&#xff0c;为您带来更完善的平台服务、更…
阅读更多...
设计模式——2_8 策略（Strategy）

设计模式——2_8 策略（Strategy）

文章目录 定义图纸一个例子&#xff1a;如何切换坦克的攻击方式GameElement&#xff08;游戏元素&#xff09;TankFactory&#xff08;坦克工厂&#xff09;Tank&#xff08;坦克&#xff09; 医疗车和飞行车策略模式Behavior(行为)TankTankFactory 碎碎念策略和状态为什么我们…
阅读更多...
MySQL高级（索引语法、创建索引、查看索引、删除索引）

MySQL高级（索引语法、创建索引、查看索引、删除索引）

创建索引 create [unique | fulltext] index index_name on table_name (index_col_name,...); 查看索引 show index from table_name; 删除索引 drop index index_name on table_name; 案例演示&#xff1a; 先来创建一张表 tb_user&#xff0c;并且查询测试数据。 cre…
阅读更多...
男女恋爱话术聊天对话回复矩阵版h5微信抖音QQ快手小程序app开发

男女恋爱话术聊天对话回复矩阵版h5微信抖音QQ快手小程序app开发

男女恋爱话术聊天对话回复矩阵版h5微信抖音QQ快手小程序app开发 支持SAAS、支持独立加密、支持独立开源、价格不同。 买就送28W话术数据库 聊天神器 支持16种Al语气、男女版切换、矩阵运营、送后端转化渠道 支持微信公众号微信小程序抖音快手小程序可打包APP 这是一款什么软…
阅读更多...
java开发的4套智慧系统源码 智慧校园系统源码 智慧工地系统源码 智慧城管系统源码

java开发的4套智慧系统源码 智慧校园系统源码 智慧工地系统源码 智慧城管系统源码

4套java智慧系统源码 智慧校园系统源码 智慧工地系统源码 智慧城管系统源码 3D 智能导诊系统源码 Java智慧校园系统源码 智慧学校源码 微信小程序电子班牌 智慧校园系统简介&#xff1a; 智慧校园的建设逐渐被师生、家长认可接受&#xff0c;智慧校园通过对在校师生、教务等…
阅读更多...
MySQL学习笔记（数据类型, DDL, DML, DQL, DCL）

MySQL学习笔记（数据类型, DDL, DML, DQL, DCL）

Learning note 1、前言2、数据类型2.1、数值类型2.2、字符串类型2.3、日期类型 3、DDL总览数据库/表切换数据库查看表内容创建数据库/表删除数据库/表添加字段删除字段表的重命名修改字段名&#xff08;以及对应的数据类型&#xff09; 4、DML往字段里写入具体内容修改字段内容…
阅读更多...
大数据介绍——大数据时代

大数据介绍——大数据时代

1.1大数据时代
阅读更多...
MySQL学习笔记2——基础操作

MySQL学习笔记2——基础操作

基础操作 一、增删改查1、添加数据2、删除数据3、修改数据4、查询语句 二、主键三、外键和连接1、外键2、连接 一、增删改查 1、添加数据 INSERT INTO 表名[(字段名[,字段名]…)] VALUES (值的列表); --[]表示里面的内容可选添加数据分为插入数据记录和插入查询结果 插入数据…
阅读更多...
Patreon是什么？如何用虚拟卡订阅Patreon上的艺术家？详细教程

Patreon是什么？如何用虚拟卡订阅Patreon上的艺术家？详细教程

Patreon是什么&#xff1f; Patreon 是目前世界上最受欢迎的会员平台之一。 它在过去几年中引起了不小的轰动&#xff0c;目前被全球的内容创作者所使用。 内容创作者和艺术家通常很难让粉丝在经济上支持他们。 通过使用像 Patreon 这样的平台&#xff0c;创作者和艺术家可以…
阅读更多...
arcgis使用面shp文件裁剪线shp文件报错

arcgis使用面shp文件裁剪线shp文件报错

水系数据裁剪&#xff0c;输出为空&#xff1a; ArcGIS必会的几个工具的应用 --提取、分割、融合、裁剪&#xff08;矢&#xff09;、合并、追加、镶嵌、裁剪&#xff08;栅&#xff09;、重采样_arcgis分割-CSDN博客 下面的方法都不行&#xff1a; ArcGIS Clip&#xff08;裁…
阅读更多...
Linux 安装系统可视化监控工具 Netdata

Linux 安装系统可视化监控工具 Netdata

目录 About 监控工具 NetdataLinux 系统安装 Netdata关于 openEuler1、查看内核信息2、查看主机信息3、查看 dnf 包管理器的版本 Netdata 安装1、更新系统环境相关 rpm 包2、查看 netdata 包信息3、安装 netdata 包4、编辑 netdata.conf 配置5、启动 netdata 服务6、查看 netda…
阅读更多...
liunx环境变量学习总结

liunx环境变量学习总结

环境变量 在操作系统中&#xff0c;环境变量是一种特殊的变量&#xff0c;它们为运行的进程提供全局配置信息和系统环境设定。本文将介绍如何自定义、删除环境变量&#xff0c;特别是对重要环境变量PATH的管理和定制&#xff0c;以及与环境变量相关的函数使用。 自定义环境变…
阅读更多...
李廉洋：4.9黄金屡创新高。黄金原油晚间最新分析建议。

李廉洋：4.9黄金屡创新高。黄金原油晚间最新分析建议。

但当下不管是战争因素所带来的避险情绪影响还是美国降息与否所带来的经济影响都无疑还是支撑着黄金继续走高&#xff0c;那么接下来&#xff0c;只要市场不出现较大的利空影响&#xff0c;黄金都不会有较大的回调力度&#xff0c;所以我们当下不管是短线还是长线仍旧以继续看多…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023