11.尚硅谷_css3_自定义字体&字体图标.wmv原创

啊，那选择题这一块我们就翻篇了啊，来讲C3第二个点自定义啊字体啊，讲自定义字体之前来看一下一个自定义字体的一个运用。啊，比如说我去百度啊，去淘宝3W点。啊，先百度吧，F f12。先去移动端。刷一下是不是，你看这两个站点其实不一样的，OK，比如说我们找淘宝。淘宝网是不是啊，呃，我应该要看淘宝PC端的啊，有点二了，打开移动端干嘛。把它换成3W点淘宝点com是不是好，大家觉得这两个东西是什么鬼啊？一个新兴购物车是不是图片。是不是啊，那这底第一个感觉肯定是图片是不是啊好，你要是不感觉他的图片的话，我就觉得你不正常啊，来看一下到到到底是不是图片，只有你点它是不是OK，是不是图片。是个什么鬼？是个span span里面是个方块。

是不是完了我们看，比如说color，我要改成我喜欢的颜色啊，不行，Color了，是不是我要改成PI，我的天呐，变成PI了，看见没有，是不是再来看，把你变大一点，帮他。Size变成100PX，我的天呐，购物车这么大，有没有看见他是个什么东西字体？啊，这叫字体图标，想想这有什么好处？啊，性能肯定高，不用发请求了，也是请求只要发一次了，为什么发一次呢？大家想想啊，你现在看。这边是不是，你看这个星星期是一样的，是不是啊，只有你。OK，来看这个星星啊。只有你来看这个星星是不是好，这个星星你看我还是一样color来最最喜欢的颜色，第一拍pink你是不是放大方size是不是为100PX走，你看见没有，是不是第一个他操作更加友好。

第二个，现在我问你是不是我只要下一个字体包就行了。这种图片我一个字体方式就可以搞定，需要发多个请求吗？降低了网络的负担。提高了我整个应用的性能，是不是还有一点，大家看我放大它有没有失真不失真嘛，矢量图不失真。能不能理解啊，我们平常看到这些图叫什么图啊？你看这边我们说说的卖家。你看这这些图是不是一个一个像素的，这些图叫什么图啊。叫位图啊，位图放大是为什么。失真的能解矢量图放大，它是不会失真的，矢量图跟位图比起来，首先你矢量图的色调比较单一的。你的矢量图不可能做的特别什么特别炫，是这种社交不可能做特别什么丰富的懂不懂，因为矢量图都是要靠人画图。

这能理解吗？好，那首先理解了，我问你这种字体图标。必不必须要用它。要不要用它好不好吧，就问你好要不要用，要用能乱用吗？不能适合的场景再去什么用他吗？像这种图标，像购物车这种信息色调是比较单一的，那我让UI把它这个购物车干嘛，给我画一个指标图。我把它变成一个自定义字体图标行不行啊，那这节课我们就干这个事情啊，那我们要讲这个自定义字体图标，首先要从这个自定义字体开始讲起，什么是自定义字体啊，大家知道我们这个操作系统里面字体都在哪。是不是我们这个C盘，C盘底下有个window吧，Window底下有个东西叫放，是不是我们能用的字体是不是都在这个，都在这个底下，是不是，那来看一下我们那操作系统里面这个字体前端外部前端就能用吗。

还不一定，你看你浏览器支不支持是不是啊，来看一下这你。比如说我们来个自定义字体worker d01啊，这个都是什么。啊，这个这个都是选择器啊，刚刚讲了好，这是选择器的东西啊，好选择器啊，这个目录帮你们理理好啊，你们好复习，只你这是选择题的东西拎进去好第二个点叫什么。自定义字体自定义字体好，什么是自定义字体呢？比如大家看现在我来个DEMO。OK。零一好，自定义自定义，诶这好像是周冬雨自定义字体，好，这你来看一下自定自己怎么玩，比如说现在，嗯。

我来个div是吧，Div底下这个叫test吧，T test test test底下比如说什么这个东西吧啊。好走你style是不是，比如说干嘛我们说这个test底下，嗯，不要整周冬雨，我们整圆滚滚吧，圆滚滚秋海风啊，整点中文整点英文单词是不是好来看一下，如果什么都不写，你看那上来是不是就是圆滚滚去海光是不是来看一下，如果我这个test词，我说里面是不是可以写放的，这个放是不是一个简写属性啊，要注意干嘛。这个简写属性是不是以以方size为中心点啊，后面可以跟什么方吧，前面呢，加粗啊倾斜是不是啊，可是我们说加速清洁在放节点里面可以省略，可是方能不能省略。

不能，你必须得有方，Size跟什么方办不了，不然方方是不起作用的。我这个我们这个应该讲过吧，是不是只有你们来看。哎，这个是不是就那个字体啊，来，我们来换一个好玩一点的字体。这个吧，BU。A us是不是怎么挑这么难读呢？BA，有什么鬼？B，有，是不是这个鬼哦，来看一下。有作用吗？什么鬼啊，怎么没作用？还要加九三不应该啊啊，这个B是不是小写啊。有作用吗？

不支持是不是啊，那我们换一个。换一个我们来看。哪个，我们换这个吧。行B什么？不能复制的B什么ad吧，Bad吧，照你那个应该可以用啊，可以用吧，是不是啊，是不是你看有些字体可以用，有有些字体没办法用啊，是不是啊，那如果现在我一个UI狗上面这个字体，而是我自己字体设计这个字体怎么办？我UI给你设计这个字体，现在我需要每个用户都要用这个字体。因为我体验得一样嘛，是不是啊，那我们说是不是最好不能让用户去依赖于你自己操作系统上面的字体是不是啊，这个字体应该在哪。

服务器上是不是我让你发请求，把我服务上这个字体干嘛拿下来是不是，那比如说刚刚哪个字体我没我没没办法用的。是不是他是不是。CTRLC干嘛？贴到我的木头底下来。可不可以啊？Fort放着吗？是不是你们现在把这个文件就当做是什么，是服务器上的行不行，是不是，你看这不是一个字体吗？那怎么办？是不是我6693哥哥看试一试啊，是不是我6693，哎不是我6693嘛，就是不能用是不是啊，OK，那怎么办，那我们说那我们干嘛，CSS3就给我们提供了一个功能，叫自定义字体啊，这个字体的名字我就叫达。哎，你能拿我怎么办，是不是来看一下怎么办，我们说来个方。

不啊C我们C在里面提供一个叫found啊，可以写一个family吧，就是你让你起个名字达姆行不行，OK，我说待我这个达姆就是个字体，是不是，字体在哪，让UI给你写，给你设计懂不懂，最终你把这个字体拿到就行了，那这那这边怎么写。吧。底下什么？怎么找不到？CTRLC不管了，拎过来吧，看行不行。Oh my god，可不可以，可以了吧，是不是这样有什么好处？问，你现在他看要不要去下这个字条。刷一下。哦。

刷一下要不需要这个字体啊，现在你们看到的文件夹是不是都在本地啊，其实我的内部给你自己去起一个服务器吧，只不过你是这个服务器，就是你这台自己的电脑呗。是不是要不要走网络的，走的是一个回路，网络吗？懂不懂你要不要走网络，要走的你看这边不是去下了吗？那平常使用的字体需要你下吗？我们来我们来试试么？我不去使用这个字体是不是啊，只有你我说这个什么test只你放是不是。100片。微软雅黑需要你下吗？刷一下需要下吗？需要下字体吗？不需要下字体。这能没理讲OK，那这种自定义自己是不是要去去服去服器上去拿的，是不有什么好处。每个用户都能拿到这个字体，那是不是百分百去还原我的UI设计，这能不能理解啊？OK，有什么坏处啊，增加网络负担能理解，可是我说在你不，你不想增加网络负担，很简单，你写个空白页面。

是不是我们说是应用需求重要还是性能重要？你脱离脱离业务，你谈什么性能，懂不懂就是我们第一考虑点应该是需求，就是我们的业务，业务要放在首位，在实现业务的基础之上再去考虑性能啊，为什么叫性能优化优化。不叫性能开发，懂吗？就是在东西做完之后才需要去考虑性能优化的，这能不能理解？OK，那这是我们一种，这个叫什么自定义字体，要知道它的好处，我们来看它的好处什么。艾方艾方的face允许网页开发者未取网页指定在线字体，通过这种作者自备字体的方式，可以消除用户对电脑字体的依赖。

这能不能理解啊啊，我这边多写的X方啊，给它删掉懂不懂，那里面两个东西要切记，一个是方family面，一个是啊。Src方就是干嘛所指定字体名字将会被用于放或者放family的属性，懂吗？OK啊，Src字体的资源啊，注意不能在一个CS的选择器中去定义啊。放在face什么意思啊，就是你这个东西不能放到选择器，也就不能放到声明方的内部啊，这么定义是不可以的，好像编辑器也没有给你报错，是不是找你看什么都没有，能不讲，他必须得出现在。外部这里。看见没有，懂吗？好，这叫自定义字体CSS3给我们新提供的一种功能，懂吗？OK，那这个自定义字体身上，好，它有衍生出来的一个很重要的一个技术，叫做字体图标，我们来看一下什么是字体图标。

好，这是自定义，自定义字体吧。那我直接新建一个吧，零三字体图标，好，什么叫字体图标啊，我们来看一下，刚刚我们看到淘宝上面用的就是什么字体图标吧，好，现在我给你们手动做一个字体图标啊，我我做一个稍微丑一点的啊，OK，那首先给大家去介绍一款工具叫AI。啊，这个是我们的UI或者E，他们会用会用的工具叫AIAI是专门画矢量图的啊，OK，我们来看打下来啊，这个我不需要你们去太精通它，看一下这个过程就可以了，懂不懂这回对你这个自己读的理解的话会有帮助的啊OK。打开来有点慢，这个是谁你知道吗？三三个眼睛啊，二郎神呢，好，新建哮天犬那太犬哦，来点击确定是不是好，他会给你新建一个面板。

OK，是不是这边是一个面板啊，好，比如说我来画一个叫什么，画一个圆滚滚吧。元。喂。滚，画一个大圆圈是不是OK，这个就是一张矢量图，咱们就可以不用动了，矢量图就画完了，懂不懂？只不过我现在画不出，画不出这个购物车而已。你们讲我要是这个绘画工地好一点，我就画个什么购物车出来啊，很可惜啊，不会画啊，那我就先先画个这个东西，你们就把它想象成是购物车就行了，那讲给这是一个图啊点困难，把它想象成购物好，反正现在这是一张什么张图是是好再来看好再来推荐个工具好叫方。啊，放内部是干嘛用来做字体的，讲好现在看着好，我在这边去新建一个。

六是不是比如说我找到Q。秋的秋吗？是我点击这个Q双击一下，他会应该挑个面板出来不跳，说明我电脑卡了，看一下好像真不掉，哎，嗯。好，出来了，出来了，来看一下现在我现在我干件事情，我肯L。你看我肯LC，我把整个图干嘛，直接贴过来，东西是不过来了，现在我是不是把一个矢量图跟一个字母Q绑定到一块去了，能不理解，我能不能多把定几个也是可以的啊，你画嘛，你画画星星啊，画月亮啊，就是跟这些字母去做。绑定码绑定完一块是不是要生成字体，现在我只是跟一个字符绑定到一块吧，看着这边按钮这边有没有叫生成字，生成的意思嘛，生成放放的嘛，来点击生成字体是吧，比如说这个字体我就叫什么。

秋海风是不是啊，好，我点击保存。关掉关掉好，这些都可以不要了，弄好关掉。否。清除都不要全部关掉，OK，看有有没有给我做成一个字体啊，这种字体一般让谁去做。以外给你去做，让他给你画跟一个字字符放完你反正你反正问他需要这个字体就行了，懂不懂，OK，现在我是不是有了字体了，你拿到自己之后怎么办。你要把它生成字体图标是不是怎么做，OK，有一个站点。OK，来看一下好。制定字体一个站点啊，我打开这个站点啊，这个站点我课件上面都有啊，你们先不用记好，他让你这边干嘛上传。字体是不是好，我把我的字体。

桌面是不是这个字体啊，传进来是不是OK，那这个时候他在帮你做编译，他的后台再帮你进行进行一系列的工作等等，看完看最终它会给你生成什么东西啊，稍微等一等。嗯，好慢啊，OK5KB吧是不是。去哪下载的？啊，这边要什么，这边是不是有一个协议啊，同意这个协议啊，才会出来这个按钮去下载一下。啊，5KB你看要下多久啊，你们这网是极烂啊，下了1KB了。好，上完了，OK，是不是完了啊，错怪你们了，18KB了整你看一下。还没上完啊，只有你。好，是不是这个东西啊，CTRLX给它切出来。好，关掉，切到我的桌面，好，我问你现在我是不是有一个字体，我把一个字体传到了一个在线的网站上面，这个网站最终帮我去生成了一个包，看一下这个包是什么鬼。

好，看一下这个包里面都有些什么东西？是不是这么多东西啊，好，我把这个包直接贴到我的项目里面去C。C。走，你这是我们的字体啊，好来看一下他给我们生成什么东西啊，这个是一个test的文件啊，不要管。你给我关掉来看下，哎，你看他是不是给我生成了两个新的字体啊，啊，这是给我生成的兼容性比较高的一些字体啊，这个文件最重要。什么东西是什么？这个是什么自定义字体吗？给你起了个名字吗？这名字，这个名字能不能改，我改成。可能去海风吗？去风可以吧，是不是引用的这两个字条，你们讲放在外头normal放吗？懂不懂，OK，那其他文件我就可以全部。

关掉了，我不要他，这些都是DEMO嘛，这DEMO自己写。懂不懂，现在干了一件事情，什么事情，我把一个字体传到一个在线网站，经过这个在线网站的处理，他帮我生成出来的一个自定义字体，这个自义字体这个包怎么来的，就是根据你这个字体来的，那么讲，当初我在做这个字体的时候，我是把一张矢量图绑给了一个字符Q吧。能不能理解啊，OK，好，那我们来看。我在这边写个什么index点。HTML。是不是啊，OK，现在我来一个死掉T死掉吧，比如说我给这个玻璃是不是啊，刚刚不是有一个样样式吗？CTRLC，我把这个样式直接。

贴进来，贴到这个index点里面去，是不是我自定义那个字体是不是OK来看一下，我说这个字体叫做邱海鹏吧，好，那我给body来一个放100PX字体用什么邱海峰是不是走你。好，我刚刚我问了，刚刚我说了，我们说我在做这个字体的时候，我做了几个字，做了几个字符，就一个字符，我就给这个Q绑定了一张矢量图，其他字我都没动。是不是现在它出来的是一个什么。整套一个字体吧，字体里面是不是包括好多好多字的，那么大家看现在如果这个玻璃底下我是A，有用吗？没有。因为在你这个字体包里面，我有对这个A字字符去做处理吗？没有，他就使用默认的字体会黑吗？有没见，可是Q呢。

Q，就不一样了，走，你看一下。这是什么东西，这是什么东西啊，圆滚滚是不是一个圈啊，只不过他们画的是什么购物车嘛，我现在是不是画的这个东西，你没讲OK，大体的逻辑是大体逻辑什么样的。首先我要准备一套矢量图，再把这个矢量图跟不一样的字符绑定起来，一一绑定是不是，最终我说干嘛通过工具也好，站点也好，是不是你把这个矢量图跟这个字符绑定起来，东西干嘛生成出一套字体，是不是是一套自定义字体。能不理解，最终我把这套字体在页面上面去引用，这个字符就会跟一张矢量图绑绑定在一块。是不是这意思啊？再来看淘宝，希望你们理解。啊，不开。

好，来看淘宝。走，你这个购物车是不是大矢量图啊，他把矢量图跟这个口干嘛。绑定在一起吗？再来看我这个星星呢。还是跟这个口绑定在一起吧，只不过是不是class不一样，你看这边这class就什么never state，什么never I come，是不是你购物车呢？什么吧，是不是不一样的。是不是啊，Never-I杠哈嘛，是不是啊，OK，那是不是我们刚刚做的还是一个小儿科是吧？来看真正的做法怎么做啊，OK，那这个东西啊，我也不给你们网上自己自己去什么啊，这个自己这个包我要给你们。这个我就不给了。是不是这个我就不用给了。

这个我就不给了，这个字体是不给你们是不是OK自己给你们。对，没有那个软件可以画嘛，和这个字体去生成这个图标，这个事情你要自己做吧，是吧，再看好现在我给你一套矢量图啊，比如说什么现在你的UI啊，给了你一套矢量图CTRLC。CTRLV，好，SVG就是什么。矢量图。怎么打开了？完美啊，什么东西都没有完美啊。打开方式。它不支持SVG啊，我们打开chome，你看这是不是一个加二是不是你看。这个肯定是关了。看见没有曹操吗？是不，这都是有爱给你画的，能不讲好，那这是不矢量图，那有了这些矢量图之后，我要不要把这些矢量图跟一个字符去绑定到一块，需要吧，好，刚刚我们那个站点还是比较low的啊，现在推荐一个比较好，比较好一点的站点，叫做爱康木。

专门做矢量图标的，好有个叫爱康字体图标啊，这个概念你们不用记，我科技上面都有啊，好可以给你们看看。没有啊啊有你看这边有都有软件啊站点啊，我都有懂不懂，OK，好来看一下，现在是不是就是出来这个站点啊好，这个站点是不是有个爱康APP啊，点击这个爱康。好，进入一个loading的界面，好让它loading搂一会儿。好像有点慢。OK，搂你搂一会儿。好像还是有点慢。啊，等一等啊。啊，你们会跟面试官也会有这么尴尬的一段时间，就是你也不讲话，他也不讲话啊，那怎么办，你要讲话呀，是不是啊，啊，你要想面试面三到四个小时呢，两个小时都在你主动攻击知道吗？嗯，OK，来看一下，现在这是爱克木这个站点给你提供的什么。

他自己的一些字体图标懂不懂，那如果UI给了你矢量图了干嘛，你就不要用它这些了，用你们UI给的，那干嘛导入这些icon，就是让你去导入那些图标。好，我那图标有没有在哪。在哪？CTRLC我放到里面去。这些SVG我全部放进来是吧？OK，打开这个站点导入吧，OKD01里面这些SVG吧，Ctrl a全部打开，你看是不是全全部都进来了，好，OK，全部都进来之后，是不是现在矢量图已经准备完了，矢量图都在这边吧，OK，一定要选中所有的摄像图啊，不要傻乎乎的不选中，把它全部选中是不是，看下面有没有叫生成字体。

大小，你一点这个按钮是不是给你去生成字体了，你看他是不是已经把我生成完了这个过程，我点击那个按钮的这个过程在干什么事情。对啊，矢量图是不是已经准备好了，你来看一下吧，矢量图，矢量图都在这边，你看我在这边干嘛，生成字体吧，我一点击生成字体，其实我在那点的那一下，我干什么事情，不是我干了什么站点帮我干了什么事情。把每一张矢量图都跟一个字符去做了绑定，是不是具体哪个字符我们是不是不知道。反正他肯定去做这个事情了，那不讲那怎么办。字体有没有生成啊，生成了是不是改个名字吧，改成打我是不是OK。

好，去把这个包荡下来。OK。看一下，好，还没全部打完，OK，把这个包拿到。好，拿到的包直接暂停，全部关掉。好把它干嘛？解压一下是不是解压完了之后，大家看这里面是不是这么多东西啊好怎么办，CTRLC0到这个什么。自己读到里面来吧，是不是这个SBG就不要了。删掉。好，来看这是不是都是DEMO，这个节省文件是不是也可以不要啊，这个节省文件也是一些信息可以不要。什么？呃，CTRLZ啊，这个达姆是干嘛，我又粘了一个是吧，这个其实。嗯，瑞蜜也可以不要吧？

是介绍嘛。杰森呢，不要。是不是这个样式要留着吧，你看是这是个啥哦。自定义字体嘛，是不是啊，你看这些字体包赢了对吗？放里面这些都是什么兼容兼容的自定义字体吗？懂不懂？OK，来看这个DEMO，打开这个DEMO。F。这些东西熟不熟啊？这个应该是刚刚我们看到了叉叉，我们也看到了，是不是还有星星哦，来看一下星星有没有。我们有没有信心啊？SVG里面有没有星星啊，星星星星在哪里？哦，大，你看到大了，我怎么没看到。镜头肯定有。叉叉，爱心吧，有没有？

在我们这里面是不是你看。都在这块了是不是啊，看他是什么鬼，来看一下。我们就看这个什么加加吧，是不是，你看他给了个什么。伪元素吧，伪元素肯定的是个什么。是不是一个字符，这是不是一个字符编码。是不是问你这是不是一个字符是不是，而且他看有没有用样样式。这边是不是有个样式啊，问你这是不是一个文本。是不是在我span里面的一个文本在身上，在这个SPA身上运用的所有的关于文本的样式，是不是就作用到这个before元素身上，能不理解，你看很明显这个before元素就是一个字符是吧，而且大家看，而且这个字符是不是使用了一个字体叫达摩。是不是想想一个字符使用了一个字体叫做达姆，是不是啊，达姆这个字体里面其实干了什么事情啊？

就是把你这个制服跟一张矢量图去做保电，就是跟这个家家去做宝典。能不能理解是不是这样的，那家看是不是我这个字符最终就会变成这张什么图。能理解吗？懂不懂钥匙在哪边？钥匙是在这个元素身上吗？他会继承到这个样式的是吧，你看found family是不是必须得是达，而且是杠一波的。这能不能讲这个就叫什么。字帖图标能解吗？我把它放大。看失真吗？永远都不失真，能理讲，OK，因为你都是矢矢量图吗？不会失真的，能不讲好？到现在能不能从头到尾理解自己读高到底是个什么玩意儿，一步一步怎么来的？能明白你们需要让你自己去画自己图标吗？不画懂不懂，要么UI给你们，要么就用现成的，不懂现成的有没有？

有啊。网上好多现成的呢，来看一下我们刚刚这个站点里面是不是有啊。你看我们说点击这个APP的时候。打开来。这是我们自己的吧，你看这是什么？免费的，这些年能不能用点一下照样干嘛？生成吗？人们讲基本上常用的里面都有啊，你如果嫌这个站点还不够，阿里巴巴也给我们提供了啊，找一下马云爸爸就知道了，阿里巴巴。字帖。字体图标库。是不是？你看这些什么，还给你画成了小兔子啊？是不是，那这些图标库都在这边，懂不懂，自己慢慢去玩，以后你们项目当中肯定会用到自己图标的，那么讲那自己图标跟C3的自定制有没有关系啊。

有关系吧，是不是完全就是靠自定义自己干嘛做出来的吗？是不是自己图标的优势在哪里？不失生，肯定的可以降低网络的负担，是不是啊，更易于我们开发者去操作，是不是你像放大啊，换个颜色啊，分分钟的事情是不是啊，OK，那这是我们讲的自体图标啊，一定要知道自己图标的一个好处，能不能解啊，好，这些东西我都不给你们。自己去搞啊，应该没有太大问题是不是啊，我不给也得给呀。这边是不是有啊。是不是给你个SVT就就就应该可以了，是不是啊，这个操作必须要自己去做一遍啊，这个叫达姆，这个就换成达姆。OK。