尚硅谷前端基础 (77)

好，那我们接下来我们来接着来说这个字体啊，嗯，这个字的话，其实我们这儿整完了的话，我们要说一个问题是吧，我们刚才其实主要讲了两个，一个是我们这个fund size，还有一个是我们这个fund family啊这两个东西，呃，Size没什么说的，只能是自己大小，Family只能是我们的一个自己的一个格式，那我们说一下啊，我们不知道，我不知道你有没有注意到这个问题，就是我们去说一个图片啊，或者说一个什么东西啊，我们都会提到一个概念，叫做一个失真，哎，比如说我有个图片。我把这个图片放大十倍，那你其实会发现什么呢？这个图片里面它会就出现那种小格格，小格格类似于马赛克那种效果，显示起来就非常的凝，非常的不清楚，那为什么呢？这叫一个失真，因为你本来它像素设计的那么小，你给它放大了，放大了等于就把这像素就给放大了，那自然而然就不清楚了，对吧，自然而然就不清楚了，所以我们会有一个失真的问题，但是你我不知道你有没有注意啊，我把这个字体放大，我先把字体设置到一个400个像素，你看这字体它会不会出现失真的现象，哎，不会出现失真，基本上每一个点是不是都会很平滑，它会很舒服，它不会出现那种放的特别大的情况啊，特别大的情况，所以这个时候我们说了，像我们这个字体，它都属于一种这种矢量图，诶什么叫矢量图呢？实际上它里边也是一组一组数据，而我们的这个字体之所以能显示出来，是我们电脑对这种数据进行了一个，呃，是渲染也好，还是去去去什么也好，总之它就是不会失真矢量图。

是你可以无限去放大，它永远不会出现这种失真的情况啊，失真情况，所以这个时候其实那字体跟我们这个图片来比较，它就会有很多优点，那第一个图片会失真，字体呢，不会失真，哎，二一个呢，我们这个字体是不是还可以随意换颜色呀，你说我不想用red了，我就直接换一个什么呢？换一个orange啊，换一个orange就变成一个橙色，对吧，我想换一个蓝色，我就来一个这个blue啊，Blue换一个蓝色，我可以随便的去切换这个颜色，这是第二一个啊，不会失真，第一个不会失真，第二一个可以随意的切换颜色，第三一个字体的文件本身实际上是比较的小的，像我们刚才那个文件。

这是不是才才三兆多对吧，三兆多你就你不是说那个什么，你说三兆多也不小了，对，如果就一个文件来说，确实是不小了，所以我们说这个图标字就那个那个那个放在face那个东西尽量避免使用，因为自己文件本身可能也会很大，但是它里面包含了那么多字，那你如果对比的图片来说的话，其实它比图片要小很多，但是我们会说一下，但是我们会展示一下，实际上本身的话，如果就它的使用范围来讲呢，使用的这个频率，使用的内容的多少来讲的话，它实际上比图片要小很多，所以呢，我们字体会存在有很多的一个优点是吧，大小也好，灵活度也好，然后这个不会失真也好，所以这个时候有一些有一些时候我们的网页中，我们往往需要用到一些小的图标，比如说像这块。

哎，比如说像这个，这是是一个小三角啊，哎，比如说我们京东这儿，这儿也有一个小三角，这些东西我们要怎么去实现，我们要去怎么实现啊，一定注意，那你像这个东西我们能不能用图片，哎用图片没问题，那你像这里要用图片，你就这得用一张，这得用一张，这得用一张，这儿得用一张，然后呢，这以购物车这用一张，这得用一张，这得用一张，那也就意味着我这里边是不是要用到很多很多的图片啊，哎，很多很多图片，那你想想我图片一个可能也不大，但是我如果用十个，我用100个是不是就很大了，哎，很大了，但是我们会发现，其实你看这些图片，这些小的图标啊，我们叫icon图标，对吧？这些小的图标它有一个共同特点，它是不是都是一个。

单色的，哎，单色它只有一种颜色，它没有像那种五彩斑斓的颜色，对吧？并且这种东西我们是不是有可能我需要调整颜色，或者我有可能需要去放大缩小啊，哎，如果你要用图片，图片你还能不能调颜色了，对不起，调不了了，图片还能不能调大小了？哎，可能能调，但是调起来就会比较的费劲了，就没有那么的好调了，所以这个时候我们就诶有一个想法，诶你像这种小的图标，我用图片用起来就会很麻烦，那我们能不能我直接把这种小的图标制作成一个字体，然后我通过字体的形式去对他们进行引用，那然后我不就省很多事儿了吗？对吧？所以这个东西我们就叫做一个图标字体。图标字体啊，我在这儿新建一个文件，我们叫一个这个零二叫做一个图标字体，图标字体呢，在这我们直接来说一下啊，在这我们写个N标注释，我们叫做一个图标字体，图标字体我们英文叫做一个icon font ion fo，呃，什么叫图标字体呢？那这个时候这里边注意的那就是什么呢？呃，在哎我们的网页中，我们经常什么呢？诶经常需要使用一些小型的一些，呃，图标当然不一定小型了，就使用一些图标，比如说像我们刚才京东看到的什么。

这个玩意儿啊，像这个像像小三角对吧，像我们这个购物车的小车是吧？像这个向左的箭头，向右的箭头，这些是不是都属于一个图标啊，哎，都属于一个图标，我们经常需要使用一些图标，那我们使用这些图标的方式呢，有两主要诶我们可以什么呢？当然我们可以通过图片，哎来哎图片诶来诶。

引入图标啊，引入图标，也就是说我可以把我们的这个图标制作成一个什么呢？制作成一个图片，但是呢，图片会存在一些问题，诶但是图片诶图片大小会什么呢？大小会比较大诶诶大图片本身呢，诶本身比较大，诶并且什么呢？并且非的不灵活，哎并且非常的不灵活，哎你要比什么较大呀，图片你是不是要占地儿啊哎占空间的啊第二一个非常不灵活，我想放大，我想缩小，我想改变颜色，都不是那么好改的啊，都不是那么好改的，所以我们采用一种方式什么呢？所以哎我们可以什么呢？哎，所以在我们这个使用图标时。我们还可以将我们这个图标诶直接设置为什么呢？设置为我们这个字体啊，直接将我们图标设置为字体，然后哎，通过我们这个放face的形式，哎face的形式哎来对我们这个图字体进行什么呢？进行引入啊进行引入，那这样我们就什么呢？哎这样我们就可以通过这个使用字体的这个形式来使用图标了，哎两个呃几个优点是吧，哎小一些。

灵活一些，哎，就主要是这两个优点，对吧，主要是两个优点，那这里边呢，也就是说白了吧，我们之前是不是引入过一个放这样的字体啊，对吧，放这个字体，那像这个字体的话，那其实我们就可以干嘛呢？哎，我就可以把我的一些图标直接制作成一个字体文件，然后我通过放个FA1户发过去，然后呢，我直接把这些图标以自己的形式去使用，那其实就会很方便了，诶至于有多方便，其实很多时候如果你没有经历过那个痛苦的年代，你不会体会到它的方便，所以现在的话，我们就不管它方不方便，我告诉你的东西，它大部分的情况下一定都是一个好的东西，基本上都是一个我们必须要使用东西，所以现在对于你来说，你就知道怎么用就行了啊，知道怎么用，但是我们现在面临的第一个问题就是什么呢？哎，就是我们这个，我怎么能把我这个图标制作成字体啊，怎么能制作呀，哎爱怎么制作。

怎么制做？哎，谁爱做谁做，反正我是肯定不做，为什么呀，因为这些事儿不是我们程序员去做的这些东西，设计字体，设计图标，把图标制作成字体，这些东西是不是应该都是我们的这个设计师去干的，我们要做的就是把这些东西拿过来直接去使用，我才不管你怎么做了，对吧？但是如果你感兴趣，你可以你懂一些设计对吧？你可以上网上找一些制作的教程，在这里我们就不说了啊，我们在网上有很多的这种东西，叫做图标字体的一个库啊，图标字体库，网上有很多这种图标字体库，这些库的特点就是我们可以直接拿过来，直接就去使用，而不用去考虑它怎么制作的，懂这意思吧，所以你要用的话怎么办？直接百度你搜一下，诶，搜一个图标字体，图标字体直接一搜，哎，那一些常用的库的话，都会给你列出来啊，都会给你列出来，那这里的话，其实我们。

国内比较多的用的比较多的icon放的啊，阿里的一个图标库啊，阿里的图标库，但是阿里这个图标库的话，待会我们也会讲，因为我们肯定要用它是吧，但是我们也讲，但是现在呢，我们先不把它作为重点，我们先不用它去讲，因为它用起来稍微的会有点麻烦，呃，如果直接去说它的话，会有点让你的这个关注点就分离了，我们讲一个，呃，也是一个国外的用的比较多的一个图标字体库，叫做一个font awesome啊found awesome这个图标字体库，这个到官网的话，我们要看的话，不要看它的这个这个这个这叫什么呀？叫中文网，中文网的版本比较旧，我们直接看它的一个英文网，我们直接搜一下，叫做放到阿总这个网站。

哎，在这啊，那这个的话，我们来看这是中文网还是英文网。这个哎呀哎呀哎呀呀，这是它的英文网，英文这中文网啊，中文网你要看啊，它的中文网的版本还是4.7.0的版本，比较旧了，不用它啊，我们看这个英文网站官方网站，所以你看网站的时候也是注意啊，尽量不要看这个中文网站，因为中文网站有时候更新的比较慢，还是以它这个英文的官网为主，那这个就是我们这个放的awesome的一个网站，这就是一个它的一个图标字体库啊，你看啊，它这个什么叫图标字体库呢？它就是把这些图标的字体都已经给你制作好了，你要做的事儿就是你需要用的时候把它拿过来直接去使用，至于它是怎么制作的，你完全都不需要考虑，懂这意思吧，那这东西怎么用啊，你看这儿啊，当你进入这个网站，首先你要用这种库的话，第一件事就得先把这个库给它下载下来啊，下载下来在这你一看的话，这有两个链接，一个叫做start for free，还有一个叫get more with pro，诶。

一个是什么呀，Free免费的对吧，免费使用，还有一个是什么？用我们这个专业版，专业版一看就收钱的，我们不用对吧，我们直接用这个免费的start for free，当你点这个start for的话，你这里边就需要，哎，它这其实会自动给你下载get start，它是不是在等诶这这这。一行代码啊，这个我看看啊，啊在这儿呢，往下啊往下它是不是一个download的呀，哎，Download的直接一点击你就下载就完事了，它会自动给你弹出这个下载框，然后让你去下载，诶然后呢，它这块应该是有一个在这儿看见了吗？Download放awesome free for for the web直接一点它就可以自动下载了，看到了吧，哎，就可以自动下载了，下载速度应该还行，本身也不大，四点四点多兆啊四点多兆，然后下载完了，你可以给它关上了，是吧，关上当然你我们就可以给它关上了，不看它了啊然后整完了以后的话，我这个提前我之前已经下载好了，在资料这有一个叫做字体放的awesome就是这个啊，现在的版本是一个5.10.2，免费版的是一个5.010.2，应该注意下载的时候，你要用的是一个外的版本啊，是我们网页用的一个版本啊，网页用的版本卸载完了就是它了，然后它还有一个文档，文档的话你直接在我们这个Z里下，还是那个。

Two do side available这搜一下放到那个库就能就能看到下载完了，我已经下载好了，我就不再多说了啊下载完了里边是这样的。

是这样的，它实际上里面对应的就是一个一个图标，稍微有点慢啊，一个一个图标啊，告诉你有哪些图标你可以用，就给你等于是一个案例吧，哎，是一个示例啊，是一个示例，那这个时候我们就来说一下怎么用，你下载完了这玩意儿啊，直接给他解压缩，呃，解压完了以后呢，你得到了一个文件夹，得到了一个文件夹，我们来看啊，文件夹里包含的东西还还挺多的，对吧，还挺多的，告诉你怎么用啊，东西虽然多，但是我们要用的话，实际上我们只要用两个东西，一个是这个CSS，还有一个是这个web fo，你需要把这两个文件粘到你的这个。项目里啊，我先给他写个。我先给你们写一个说明书啊，省着忘了放，我们来说一下它的一个使用步骤，使用步骤哎，第一步下来。

没什么说的对吧，没什么说的，诶刚才我我给关上了是吧，我看有没有这网站了。就是这个网站，我把网址啊粘给你，从这个网站去下载我们这个放到这个库啊完事了，下载完了呢，第二步解压解压，然后第三步将我们这两个目录，哪两个目录呢？将我们解压完的两个，一个是CSS，将我们这个CSS和我们这个的放，哎，干嘛呢？哎。诶，移动到我们这个项目中啊，移动到项目中，什么叫移动到项目中，就是你哪个项目用你就往哪引就完事了，那这里边啊，我为了清楚一点，我在这里边我再新建一个文件夹，我就叫做一个这个呃，叫FV吧，放到awesome吧，我们叫一个FV，我起个这么一个名，然后你要做的事儿是把这CSS还有这个web放直接放到这FA里边就行了啊就行了，添加到附着件件。

哎，直接给它复制过来就行了啊，复制过来就行了，那这里边你注意了啊，呃，你说老师我不创建这个文件夹行不行也行，这都行啊，这都行，无所谓，你创建文件夹或者不创建文件夹都行，但是我创建完了，相对来说我让它整洁一些啊，整洁一些，但是无论你创不创建，你要注意了，CSS和web放这两个文件夹必须得在一起，它俩必须得在同一级目录下，你不能说我把CSS放外边，把它放里边不行，他俩必须得在一起，不在一起找不到啊，或者你得改路径很麻烦，所以你就记住了，放在一起就完事了，这两个东西必须得在同一集目录下，好整完了以后你就不用管它了啊，你就不用管它了，然后怎么使用。

来，然后我们来说怎么使用，第四一个，我们刚才在这儿是不是复制过了一堆这玩意儿，哎一堆这玩意儿，你看你这个CSS里边是不是有一堆CSS，哎一堆CSS，我们就直接说谁呢，我们就直接引入。哎，引入，将我们这个o.CSS哎，引入到我们这个网页中，因为它这里边有一堆的CS的文件，你看什么o.CSS啊，brand.css啊，放awesome.css啊regular CS有一堆的CSS，这堆CSS代表的是不同的图标字体，而这个O就表什么呢？就表示所有，所以我们干脆就一步到二步修都引进来也行了，它也差不了什么，它这个东西也是按需加载的，你不用它也不会加载，所以直接引就完事了，所以我们这直接来一个link那个标签引入we部的CSS，引入谁呢？我们叫做一个FA下边的一个CSS，边一叫o.CSS注意两个版本，一个是o.CSS还有一个叫O点命点CSS，引哪个都行，o.CSS是没压缩过的，O点命点C是压过的小一点，现在我们就引这个就行了啊，引那个就行了，好引入完了以后，那现在这个图标字。

比我们就可以去使用了啊使用了，那怎么用使用方式，然后我们这来说一下使用，哎，我们这个图标字体，那这里的话我们先说第一种，第一种直接通过什么呢？第一种我们直接通过我们这个类名来使用我们这个图标字体啊，使用我们这个类名来使用图标字体怎么用？诶那我们这儿就需要先创建一个标签，比如说我创建一个SPA啊SPA或者其实呢，呃，我们经常使用一个标签来表示和字体，叫做一个爱标签，爱标签爱标签本来是一个斜体的意思，但是现在已经不用它去制作，很少用它去表示斜体了，对吧，那这时候呢，其实我们有时候就用了I来表示一个小图标，Icon也是I开头了表示小图标，然后呢，我们需要给它加一个class啊，Class注意啦，Class第一个我需要加一个FA啊，FA这是固定的，你就写上就完事了然。

然后后边这个你要根据这个不同内容去加了，比如说你想你要看一下文档了，你想用哪个图标啊，比如说我找一个吧，我这是不是一个零啊，哎，比如说我想用这个BI把这个名复制过来，CTRLC，你这前面写as空格，然后你这加一个什么呢？哎，加一个这个FA，这个bag这一加，然后看效果，这个零呢是不是就出来了，哎，这个零呢出来了啊，所以这个时候注意啊，它的格式基本上是固定的啊，标签是什么不重要，你是爱是死办都行啊，主要就是这个类。这个类我给你粘过来，前边这是固定的as，后边这个是你要用的那个什么呢？用的那个图标的类名啊，所以这个空格表表示两个类名，前面一个类是不是后边一个类啊，哎，你再换一个，我想用这个。

CTRLC，哎，你直接给他什么呢？直接给它粘过来就行。我复制一下啊，复制一下直接给它粘过来，然后看效果，这就保存，是不是就可以换一个，哎换一个，所以这样的话，你就可以根据你的需要去选择你的图标，但是的话并不是所有的都是ass啊，并不是所有的都是f ass，我记得应该是上边这个，比如说这个残疾人这个轮椅这个是吧，这个推轮椅这个我们复制一下这个类直接粘过来。哎，你看一出现这个了，不要着急是吧，出现这个证明什么呢？什么乱码了，一出现小方块了，一定是乱码了，那这我们写错了啊，为什么写错了呢？有一些是FA，应该还有一些我记得应该是FABFAB，你看这样是不是就行了，哎，这样就行了啊，所以它的类主要是分两种，一个是FA，一个是FAB的，那就是这两个是免费的，SLB是免费的，其他的都是收费的，所以你就记住了，前边是要么是FA，要么是FAB fas不行你就换成FABFAB不行你就换成fas，基本上这两个就就就够用了啊，就是这两个就够用了，所以你用的时候注意去改一下，而后边这个就是你具体要用的那个什么呢？具体要用的那个图标了，那这里边其实就简单了，你要用什么，你就直接去去找什么就完事了，随便找一个等下找，诶这这这个小小小青蛙是吧，小青蛙看看。

Contra it。CTRL粘过来。哎，用什么，哎乱码了，那这个应该是VS。是不是就行了啊，行了啊，所以这个就是我们图标自己一个使用方式，使用起来非常简单，起面几步一设置完了，下边事就是设置类的事儿了啊，设置类的事儿了，当然我们还要演示一下它的优点，优点就是什么呢？这这些图标字体你引入完了以后，它的大小什么的，你是可以随便改的，比如说我这个零，我希望能大一点，直接改它的什么呢？Size size你想多大，你想多大你就改多大，就完事了，我想大80像素。

是大脸，哎大脸你想改个颜色，直接来一个color color来一个red，哎是不是变成一个红色的脸，哎红色脸那下边这个也是一样，这这这比如说这个小青蛙吧，青蛙大一点，Style标签，Style标签呢size青蛙呢，一百一百六一个大青蛙是吧，哎就大了，然后呢，颜色的话来一个来一个这个绿色的吧，我们直接来一个color，我们来一个这个green银green fo对吧，哎，变成一个大青蛙对吧，可以根据你的需要自己去调整，那这个的话，你放再大，你说我来个一千六吧，这玩意儿它也不会也不会失真，因为它是一个矢量图，它总会保证一个最最最清晰的一个效果，并且颜色还可以让你随便去修改啊，随便修改，那这个就是我们图标自己一个最基本的一个使用步骤，当然还有一些其他使用方式，待会我们再去讲，但是现在你需要先做的事儿，自己来尝试着把这个图标自己给它使用一下，再。

说句题外话，你用图标字体的时候一定注意版权问题，千万不要用到那些没有版权的图标字体。好，我们先说这么多，听一下。