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)

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

【第二十三篇】Burpsuite+SQL注入实现登录绕过等(靶场实战案例)

目录 Where+SQL注入获取隐藏数据SQL注入实现登录绕过Union+SQL注入获取数据库类型和版本Where+SQL注入获取隐藏数据 存在一个业务场景如下 筛选商品时,后端查询语句如下: SELECT * FROM products WHERE category = Gifts AND released = 1只有商品名匹配且该商品已发布(r…

ubuntu系统开机无限循环输入密码后黑屏【以及问题2:ls后桌面有文件但是桌面看不到】的解决方法

问题1&#xff1a;刚进来黑屏&#xff0c;无限循环输入密码后黑屏亮屏&#xff0c;然后又输入密码黑屏亮屏…… 解决方法&#xff1a;卸载重装桌面系统ubuntu-desktop那个。然后用的是在命令行startx可以进入一个新的与图形化界面&#xff0c; 然后进来界面后&#xff0c; 又遇…

使用vue3搭建一个CRM(客户关系管理)系统

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

idea中MySQL数据库的配置

在IntelliJ IDEA中配置数据库可以通过以下步骤进行&#xff1a; 打开IntelliJ IDEA&#xff0c;在菜单栏中选择"View" -> "Tool Windows" -> "Database"&#xff0c;打开Database工具窗口。 在Database工具窗口上方&#xff0c;点击"…

程序猿之路:从兴趣到职业的蜕变

水篇&#xff08;程序猿之路&#xff09; 如果硬要说自己为什么做程序员的话&#xff0c;我有故事&#xff0c;你有酒&#xff08;留言&#xff09;吗&#xff1f; 目录 记录工作实践与项目复盘 技术笔记巩固知识要点 职场感悟心得 曾经的我&#xff0c;对计算机世界充满好奇…

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

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

LeetCode 热题 100 | 多维动态规划(二)

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

SSH和telnet的了解

90%的中大型企业都会选用SSH&#xff1f;8分钟让你明白它赢在哪里&#xff01;附实验操作_哔哩哔哩_bilibili 远程登录的安全协议SSH&#xff08;会进行加密&#xff09; &#xff08;公有密钥&#xff0c;私有密钥&#xff09; 公有密钥大家都可以获得。 &#xff08;为了…

【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网络、云平台报警优化、灰度升级增强四大亮点简析

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

设计模式——2_8 策略(Strategy)

文章目录 定义图纸一个例子&#xff1a;如何切换坦克的攻击方式GameElement&#xff08;游戏元素&#xff09;TankFactory&#xff08;坦克工厂&#xff09;Tank&#xff08;坦克&#xff09; 医疗车和飞行车策略模式Behavior(行为)TankTankFactory 碎碎念策略和状态为什么我们…

Python数据分析可视化之NumPy的使用

NumPy&#xff08;Numerical Python&#xff09;是用Python编写的科学计算库&#xff0c;用来存储大型矩阵和执行大型矩阵的科学计算&#xff0c;在数据处理特别是科学计算方法具有独特优势&#xff0c;它包含&#xff1a; 一个强大的N维数组对象ndarray。丰富的广播功能函数整…

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开发 支持SAAS、支持独立加密、支持独立开源、价格不同。 买就送28W话术数据库 聊天神器 支持16种Al语气、男女版切换、矩阵运营、送后端转化渠道 支持微信公众号微信小程序抖音快手小程序可打包APP 这是一款什么软…

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

4套java智慧系统源码 智慧校园系统源码 智慧工地系统源码 智慧城管系统源码 3D 智能导诊系统源码 Java智慧校园系统源码 智慧学校源码 微信小程序电子班牌 智慧校园系统简介&#xff1a; 智慧校园的建设逐渐被师生、家长认可接受&#xff0c;智慧校园通过对在校师生、教务等…

MySQL学习笔记(数据类型, DDL, DML, DQL, DCL)

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

【蓝桥杯第九场小白赛】(部分)

最近写的零零散散的&#xff0c;感觉这两天遇到的题对于短时间提升意义已经不大了&#xff0c;还是做简单题保持手感吧哎 盖印章 #include <iostream> using namespace std; using LLlong long; int main() {ios::sync_with_stdio(false);cin.tie(0),cout.tie(0);LL n,m…