CSS进阶班笔记(四)

1. 字体图标的下载

2. 字体图标的引入(引入到我们html页面中)

3. 字体图标的追加(以后添加新的小图标)

2.1、字体图标的下载🔥

---

1. icomoon字库

外网，不需要登录即可下载 http://icomoon.io

• 点击 IcoMoon App

• 选择需要的图标

• 点击Generate Font

• 点击 下载

2. 阿里iconfont字库

免费，但是需要登录 http://www.iconfont.cn/

2.2、字体图标的引入🔥

---

我们以 icomoon 字库网为例，将下载包解压，解压之后的文件如图：

1. 把下载包里面的 fonts 文件夹放入页面根目录下

2. 在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中

右键打开 style.css，这里我演示用notepad++打开，复制如图代码引入我们自己的CSS文件中

3. html标签内添加小图标

我们打开解压文件中的 demo.html ，复制想要的图标，粘贴进我们的 <span></span>标签中

4. 给标签定义字体

/span使用字体图标/

span {

font-family: “icomoon”;

}

注意：标签中的 font-family 的值和我们之前引入字体图标的font-family 必须一样，这里均为 icomoon

5. 完成，所以我们的整体代码为：



测试效果为：

2.3、字体图标的追加🔥

---

• 如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

• 以 icomoon字库 网为例，点击网站内import icons

• 把压缩包里面的 selection.json 重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可。

2.4、字体文件格式

---

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

.ttf 格式、.woff 格式、.eot 格式、.svg 格式，不同浏览器支持不同的格式

2.4、字体图标总结

---

1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标

2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图

3、界面样式🔥

==========================================================================

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

• 更改用户的鼠标样式

• 表单轮廓

• 防止表单域拖拽

3.1、鼠标样式cursor🔥

---

鼠标样式cursor

• 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

li {

cursor: pointer;

}

| 属性值 | 描述 |

| — | — |

| default | 小白，默认 |

| pointer | 小手 |

| move | 移动 |

| text | 文本 |

| not-allowed | 禁止 |

3.2、轮廓线outline🔥

---

轮廓线outline：

• 给表单添加 outline:0; 或者outline: none;样式后，就可以去掉默认的蓝色边框

input {

outline: none;

}

3.3、防止拖拽文本域

---

防止拖拽文本域resize

textarea {

resize: none;

}

4、vertical-align🔥

====================================================================================

vertical-align:

• 使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

• 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

vertical-align: baseline | top | middle | bottom

| 值 | 描述 |

| — | — |

| baseline | 默认，元素放置在父元素的基线上 |

| top | 把元素的顶端与行中最高元素的顶端对齐（顶线对齐） |

| middle | 把此元素放置在父元素的中部（中线对齐） |

| bottom | 把元素的顶端与行中最低的元素的顶端对齐（底线对齐） |

4.1、图片、表单和文字对齐🔥

---

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

4.2、 图片底侧空白缝隙解决🔥

---

• bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见）

主要解决办法有两种：

1. 给图片添加 vertical-align : middle | top |bottom 等

2. 把图片转换为块级元素 display:block;，因为块级元素不会有vertical-align 属性

5、溢出文字省略显示🔥

==============================================================================

5.1、单行文本溢出省略号显示🔥

---

必须满足三个条件：

/* 1.先强制一行内显示文本 */

white-space: nowrap; /默认 normal 是自动换行，nowrap是强制一行显示文本/

/* 2.超出的部分隐藏 */

overflow: hidden;

/* 3.文字用省略号替代超出的部分*/

text-overflow: ellipsis;

/ellipsis:省略号/

5.2、多行文本溢出显示省略号显示

---

多行文本溢出显示省略号，有较大的兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webKit内核)
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门免费获取

.(img-OEGxEzxc-1713478445185)]

[外链图片转存中…(img-iMjKv0jq-1713478445186)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-ot8qVTMs-1713478445186)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-JtYjL9Gj-1713478445186)]

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门免费获取

[外链图片转存中…(img-y4rsrMbx-1713478445186)]