22.尚硅谷_css2.1_字体.wmv原创

来，我们来看一下我们现在要讲什么，讲一些文字跟文本上面一些东西，好好这个我们是有课件的，好我们把这个课件打开了，OK，我们来看一下字体相关方赛方赛之前有没有讲过。有讲过吧，好，方的size里面有几个单位啊，其实方的size的单位有很多，懂不懂，那我需要大家去掌握几个呢？必须掌握这三个PX en以及。百分比是不是？想想这个烟大家知道它是根据谁来参照的吗？根据什么？是不是根据自己的方。这个一一个一案是不是就等于自己的一个方式在这能不能理解啊，那PX不是干嘛，你给它指定多少值，它是多少值百分比呢。参照副元素的。自己大小懂不懂好的，烦就烦在这块，那CSS里面百分比参照于谁，每个都是不一样的，明白吧，呃，记得住吗？肯定记不住，最重要的几个你给我记，记住懂不懂，像这种百分比遇到的时候怎么办？去找规范啊，不需要你去记住，OK。

我们来写一个好。好，讲我们今天第13个内容。文字呃，不不不，字体与文字，呃，字体与文本。好，第一个防。好，叫做字体大小。好，零一字体大小字体。字体大小好来看一下，我们随便来写一个吧，就来一个div吧，好，我们就来个内联吧，Style好方为。30PX吧，好里面来一个叫什么邱海峰，好这里好来看一下。

啊，这个是不是一个30PX一个大小，可是你们来看一下。我放上去的时候，他告诉我是多少。那我自己当时到底是30还是40？怎么看好以后的任何的C属性怎么去看，特别是一些简写属性，你不知道它到底怎么简写的，怎么办？选中这个元素，找到这边把它拉大一点好，这边是不是有一个computer的完全的意思啊，点开它里面所有的属性值都在这边，懂不懂不要相信自己拆的，永远给我上这个嘛，要么上规范去找，要么就干嘛。来这边看，这是浏览器最终渲染成，渲染出来的东西懂不懂，你到底到页面上长成什么样，都在这一块了，能明白吗？好，我们来看一下这个高度到底为多少。D hat吧，我们啊，我们设的是方程set是吧？哎，找到方程set，方程set对吧？很明显方程set就是30，可是为什么最终显显示成了40啊，看它的高度为多少。

Hat。Head在哪边？完了，O PQ r ST o rt。I，哎，完了，背不出来了。ABCDEFG是不是在这块，诶，高度为多少？高度是为40啊，为什么高度为40啊，也就说你最终这个方的size啊，是不是还得加点东西才能算到它的高度上面上能明白吗？其实这个问你现在是不是一个div啊，其实它的高度应该靠谁来称他哪个大学。嗯。是不是有个东西叫行高啊，你看行高的值是不是叫什么，那么具体渲染成多少，其实它就渲染成40，这个行高就把整个。

整个元元柱的高度给撑开了，能不能理解啊，老师说你最终干嘛，你不能点上去，你看到这边是事实，你说这这是方，这不对的，明白吧，这是行高，其实懂吗？好，我们来看一下，好，那在C底下其实字体大小最小应该有多少？最小是为12来看，29是在变小变小变小变小出是不是变瘦了，好走你。16、15。哎，不让受了吧，是不是，你看你变成一个负值，它其实干嘛变成它一个默认值吧，Co底下的默认值为多少，自己上的默认值为多少。16最小为多少？12小于12都会渲染成12，如果是个负值，直接给你渲染成默认值为16，能不理解？OK，好，这是我们说的字体大小，其实字体大小这一块的话。嗯。零的时候呢，零的时候呢就没了，懂不懂，你看如果是一呢。

哎，变大是不是一啊，一的时候其实大家想想这个这题答案应该有多少，12你看二不变，三不变，四不变，五不变，六不变，七不变，八不变，九不变，十不变，11也不变，12是不是也不变，诶13是不是就变大了？好，最小是12，懂不懂，OK，那默认是多少？默认是16，懂吧，OK，那这是我们什么方size上的一个东西，呃，那方size还有其他单位，比如说我现在来个什么方S为二一，好，告诉我这个，这个时候整个div，整个秋海风它的这个方程参数应该为多少？应该有多少32吗？想想方程是不是可计承属性啊，你默认自己大小不是16吗？那我divp现在这个自体大概为多少，不就是16吗？现在你把它的方程size改成了二一案，这个一案一个一案是三角解大自己的方程size是吧？那是多少？二乘以16等于32嘛，最终再把这个30方重给自己的方程size是吧？是不是啊，是不是，是不是稍微有点绕啊，就就是这样的导来看一下。

周年。好，F12来，顶上去。走，你。那怎么看，找谁？Size多少？32是不是OK，那如果是百分之。200呢？比如说我这个玻璃的方size给它改掉，我说你的方的size为10PX，那200%为多少？应该是为20吧，来看一下是不是为20。CDF。哎，是不是就是22是不是好，具体变成什么样的，你们跟着自己的思路走，懂不懂，只要几个规范你知道就可以了，懂不懂好自体到这边没什么说的，好吧，OK，这是字体大小，好，然后我们说什么，说一个字体的style吧，Found style吧，Found style属性允许你干嘛选择found family下的什么？

斜体这两个其实都代表斜体，那这两个有它有什么区别呢？一种斜体是靠你的字体，你字体做出来的，本来就是斜体，能明白吗？这种斜体呢，是靠着你一个变化，什么变化，你把这个字体，本来这个字体当中本身就没有设设置设置成斜体的，他让你干嘛。倾斜了一下能明白吗？一种是靠字体本身的一个鞋底来展示的，一种是靠什么倾斜的，两种不一样的机制是不是啊，可是你们不用去理解啊，这个太细了，能明白吗？就这个东西干嘛，你就知道他们俩是斜底，长得差不多，我们可以来看一下，比如说干嘛你来这边干嘛，再来写一个CTRLCCTRLV02。好，字体什么类型吧，这叫类型吗？T体style不管了，好，来个什么好，这个给它干掉。

啊，全部干掉好，这个给他干掉好，这边来一个掉为多少呢。是不是叫frontstyle fostyle味道，比如说正常的normal，哎，那你就是一个正常的字体，是不是好让你邱海峰动一动是不是，嗯，叫什么？是不是一个什么是它来看一下走你是不是变斜了，再来一个O开头的是不是好来看一下是不是感觉是一模一样的，是不是，只不过内部的机制是不一样的，这种是通过什么让字体倾斜，另外一种呢。是通过你自己本身干嘛，本身你自己就带这种倾斜自体的，能明白吗？一种是靠自己本身一种设计，另外一个干嘛，是你自己本来是正的，我让你倾斜一下而已，懂不懂好，可是最终效果就是这样的，你明白吧，OK，那这是字体资料，也没太多可以讲的啊，好，放在位上啊，放在位置可以稍微去说说。

好，加粗不加粗吧，是不是OK ctrl c ctrl v03，我们说来一个东西叫做字体加粗好，到底这个字体能不能加粗好，我们来看一下，好，比如说我这边再来一个好，我不要你写题了。好，我来个方他。放在位上。没找到方特，喂他好，嗯，给他加度数。反正拼命出就行了，是不是好？好，是不是又变胖了，哎，很好。好OK，但是那我如果它分它它分几种情况，一个是正常，一个是加速吧，好看一下normal normal某是不是就代表正常的，好好像没有什么可以讲的是不是啊好可以来看一下，其实整个。

方位分了几个等级？一到900分了九个等级，我们可以来看一下，比如说你这边写100。好。是不是好像更细一点啊，是不是啊，比前面是不是要更更细一点啊，好来看或走你直到它是不是啊，比如说变成。哎，不让动啊，变成200，他有没有变。一位表变成300，一位表变成。400是不是比之前要粗了，变成。500再看变成。600是不是更重了，变成？700再来看变成800，变成900，是不是越来越粗大，是不是好，可是我告诉你好，这九个等级并不是每一种字体都会给你提供九个等级，明白好，我们操作系统里面有有多少字体，可以来看一下每个字体看打开你的C盘，C盘里面有个什么叫。

放出的字体，呃，这是什么鬼，刷一下。Windows底下诶。好，Windows底下有没有个东西叫做放置放置放置放置，我完了，你们看见了吗？完了，我瞎了。哪边好，在这边是不是好，这是这是你Windows里面带的所有的字体通道，好，你如果你页面当中你用一个字体，如果这个字体你操作系统里面没有，那怎么办。这个事情它能被用上吗？用不上，他会选择你操作系统那个默认字体，能明白吗？好，你可以来这边去看一些字体，你可以干嘛，打开你的记事本，记事本这边是不是有个格式啊，格式这边有个字体，那这些都是你操作系统上面带的字体，能明白吧，OK。

好，那为什么说这个字体呢？好，我们说正常情况下，你一个做的比较好的字体，应该要给我分成粗细，上面要分成九个等级，懂不懂，可是并不是每个字体都有这种九个等级的，那有些字体它只给你提供两种模式，要么正常，要么。活着懂不懂？所以说有时候你们如果在一个字体上面，你发现100 200 300 400 500 600 700、800、900，就是当初可能100~500，诶都是一样粗细的，600~900，哎，是一样粗细的，不要惊讶，说明这个字体没有给你提供九个等级，明白吗？它只给你提供了两个等级，要么正常，要么加粗，懂吗？好，而且一般情况底下这些字体的加粗啊什么的都不需要你去量以外会帮你量好要，但我们会去看好不好？OK，我们来看一下回退句是如果一个字体只有nova跟BORDER2种粗期来选择的话，那你如果指定一到一百十个实际选项就是normalva，懂不懂？如果指定600~900实际选项就是波的，这可不可以理解啊？OK，那这是我们说的这个什么方Y是什么几个值了，Normal波跟100~900这几个等级吧，它还给你提供了两个等级，要么是更细，要么是更粗，懂不懂更细跟更粗代表什么？好，相对粗细值的解析。如果。

你现在继承的值是100，也就是说你现在字体是100，更粗代表400，更细代表100，对不对，这个这一套东西存在的一个前提，你必须这个字体也要，也要对你这个字体粗细分九个等级，明白如果没有分九个等级，还是走这个。回退机制可不可以理解啊，好，要么是出，要么就是正常，懂吗？好，这是方程位置上的一些东西啊，那说了就是。食之无味，弃之可惜，是不是这些东西知道一下就可以了？OK，那说完前三个基本上比较简单的东西是什么？说过去了，好，我们再来说个方family。

好ER是用来干嘛的？是不是代表你的字体足啊，你应该使用哪一个字体啊，是不是啊，好，放在翻面干嘛，我们刚刚也说了，你现在写页面，你夸张点一个字体，你说你仔细写个字体叫邱海峰是不是啊？好，如果你操作系统上面有邱海光这个字体，那是不是？哎，你这个页面到我这个操作面显示的时候就使用邱海峰字体啊，那想你做的页面是不是很多人都在用啊？那你能保证一台机器上面字体都一样吗？你能保证你现在指定的这个自己他们的基础上有吗？不能保证吧，所以这个时候怎么办？我们给大家提供了一个方翻盘的属性，这个属性是用来干嘛的？是不是指定字体的，它能指定。一排好，我们来可以看一下，好，比如说来一个方。

翻不了，好，我这边来一个方针，我把这个粗细也给他干掉吧。好，我这边来个方他，哎方family是不是好，比如说第一个未然雅黑是不是好，你如果本质上有未来雅黑的就可以用，是不是我本质上有微染雅黑二嘛。肯定没有吧，来看一下，那这个时候字体就不显示了吗？是不是使用默认字体啊，能理解吗？好，再来看，那看一下它使用的字体到底是什么。怎么看？有没有family？有没有用的是微软雅黑二？天呐，真有微软雅黑二。不会吧，是不是指定给大家，只是未未来，本质上他有用未来吗？我还不信了，我我写一个，我写个我自己。说一下他有变吗？他有变吗？没有变来看一下，其实他用的字体是不是还是我的名字。

哇，真的是吧，可是它默认渲染上去是不是，是不是这个字体啊，操作系统肯定有这个字体吗？这个微软封了，他还专门帮我做个字体啊，不可能吧，是不是，所以说他还使用的是他默认字体吧，可是我们说你这样不行啊，你不能老是用默认字体啊，你是不是应该给我们的用户干嘛去提供一组字体让他去选啊，是不是啊，好，那一般我们怎么写呢？这个方程范里面我们会写一长串，好，那可能是这样写的。好，你可能写的时候你看，哎，这样来一下。好，CTRLC教你。好，你可能这边干嘛来的什么一大段字体吧，你操作下是什么，如果有就给我用一个，如果没有呢，用你默认的能明白吗？好，可是这里面有几个要说头前面这两个叫做。字体后面这个叫做。字体。

足，什么叫字体足？说明你是一个族嘛。你底下管理的什么一类字体能明白吗？比如说你前面这两个字体，如果你操作系统面没有，那就从这个组里面给我挑出一个来去用，能明白吗？OK，其实这边还给大家说说一个事情，我问你，那这是不是代表一个字体啊，其实它底下也分了很多东西，有什么，有出体的这个字体，有斜体的这个字体懂不懂，可是本质上你就认为它是一种字体就可以了，懂不懂这个叫字体图，后面这个叫字体图，懂不懂，OK。好，那我们来看一下那字体组有哪几种好？我们来说CS2属性的方程范围允许您通过给定的一个有先后顺序的由字体名或者字体族名组成的列表来为选定的元素设置字体，明白吗？OK，属性值用逗号隔开，浏览器会选择列表中第一个该计算机上有安装的字体来使用。

对吗？OK，那默认值根据你的用户代理来决定，用户代理是谁。现在我们前端开发的用户代理是谁？浏览器，浏览器是不是装在操作系统上面，其实真正的用户代理是操作系统，能明白吗？OK，好，而且这个值是可集成的，好，我看取值一个字体的名字，比如说times啊，这个叫hellokitty吧，不，Hellokitty不是hellokitty啊，Hello完了，Hellokitty是不是？好，这是东西代表什么，代表字体名字，并不是字体族名字懂不懂好底下的底下这个代表的是通用字体族，它是一种备选机制，什么好这个东西叫做什么带衬线的字体，这是一个字体足，懂不懂它底下有这么多字体。这些字体都是属于这个类型的，能明白吗？好，第二个呢叫无衬线字体，第三个叫等宽字体，第四叫草书字体，第五个叫艺术类的，艺术类的就是效果比较炫，草书呢。

就是比较乱等宽呢，每个字体是一样宽的，好，那这个称线跟非衬线，它它代表什么呢？看一下称线是什么。衬线字体，它们有个共同特点，就是两端有角。嗯，有有没有看见脚。来好好的看一看一下它们的两端是不是有是不是有角。呃，怎么放大给你们看。这怎么放大？看一下有没有角，你看这个T2头是不是有，是不是有角的，这叫衬线字铁明白白吗？好，再加角。什么叫非衬线字体非称线是就有两端没有角。啊，什么叫等宽字体，就是什么一样宽的字体能明白吧？啊比如说我们可以玩一个。怎么玩呢？我来找到我的字体。

我这里面应该有艺术字体啊好。因为长得比较抽象，字体用的也比较抽象，来看一下好这边是不是我们来玩一个，比如说这个吧，是不是这叫什么，反正我也不认识，就是什么就是什么什么九三是不是好，那直接给他干嘛。还不让我直接复制啊。呃，就是这个九三嘛，是不是啊好。好不管了，来看一下，好我现在干嘛，如果我前面这几个，诶这个肯定没有吧，这个也肯定没有吧，好这个是不是也会没有的，好干嘛，我在后面再来一个CTRLB是不是这个。呃，我们还是直接写吧，因为它当中存在空格是不是啊，好，记住，如果字体存在空格的话，你一定要用引号给它包起来。

等等，不然你不然是不认识的，能明白吗？好，前面大写的话，BA，什么BA BA bau haus吧，Aus。Baus，是不是啊，来看一下走，你是不是现在是邱海光啊？是没有变啊，为什么？因为这是一个英文用的字体，懂不懂你怎么办？秋秋秋好，就你看一下有没有。刷一下好像也没有，这是为什么？是不是拼错了，Babusus没有拼错啊，是不是好，这边是不是多了个分号。是不是好走，你好，这时候再来看一下。还是没有。是不是不要这个九三。最后是不是有个引号，需要引号吗。

是不是就可以了，哪个前头了。哦，我里面是不是用了双引号，那这里面是不是应该用单引号了，因为我style身上是不是有一个双引号，那这边是应该是一个单引号，那单引号这边是不是最终应该有个双引号。这边应该给个是不是就可以了，好把这个九箱给他加上，好玩个之前玩坏了，诶这不出来了，好贼丑是不是啊，OK，呃，OK，那是不是前面都没有啊，如果前面有呢。是不是就用前面的，那么就讲好，这是我们的方程分布了，好，这叫字体足好再来看好，那讲完这么多之后，好，其实这个行高并不算我们字体里面内容这个算。

文本的属性懂不懂，所以说暂时我们先不讲，好我们来看一下，那讲完这么多之后，诶，一般我们说属性多的话，都会提供一个简写属性嘛，好有一个叫放在简写属性，那这个简写属性有点奇怪啊，这个简写属性哪边奇怪呢？他脾气比较大啊，来看一下丙五。好，我们说比如说把刚刚这个东西直接给他什么拎过来，好，Ctrl a ctrl b，是不是我把这个调给他干嘛，这个事情这个之前有没有讲过。好，如果有东西讲过的话，你必须告诉我，好OK来，比如说我给这个什么div，好来方在这里，好现在这些东西如果比较乱啊，好，我直接拿一个什么。放的属性来处理下是不是怎么处理好，首先比如说哎，我就上来先来一个什么呢？好，还来一个这个九三，我就喜欢这个九三是不是好，记住一定要用什么引号包起来，还有一个事情，只要是主类的，你不要给我用引号包起来，如果是竹类的，你用引号包起来的话，他会认为你是你是你是在去找一个字体，而不是，而不是要去我这个组里面挑一个字体，能明白吗？这个时候就会废掉的，懂不懂，所以说像这种竹类的东西啊，千万不要用引号给它包起来，OK啊OK。

这个九三，那这个要用引号报起，因为它不是一个主任嘛，是不是啊，好比如说你来个九三，然后我再来什么20PX是不是好用空格给它分开来吧，好你要给我加粗。然后呢？还有什么，你给我是一个斜体，是不是看有没有运用上。很好，一个都没有用上，有没有发下，是不是用的都是默认的，为什么好，所以你们是不是讲过尴尬了，来看一下，好，这个放在这一块干嘛？推进的形式怎么办？一定是干嘛，首先你记住以谁为中心点。

以方size为中心点，懂不懂它前面必须得跟什么still跟white这两个顺序你可以换，不过这两个东西必须要在我方的size前面，而且你这个方的family一定要在我方size后面，一般就写在最后，能明白吗？好，那一般怎么写呢？一般上来你如果想要用这种结节属性怎么办？首先你上来把这个什么方的size你给我写好，然后呢，前面写斜底或者加粗，这个顺顺序随便你定能明白吗？比如说我来一个。加粗是不是再来一个斜体found family写在这个fo size的后面啊，来看一下这个时候。有没有用上，是不是出了也变斜了，自己是不是也是22好，以谁为中心点，方的下水为中心点，往前往后你给我去写，能明白吗？OK，再来看，如果把这个波的写在这个后面行不行，没问题，走你。

是不是还是一样的，你把这个不会的写在方size后面，那对不起，哎，我不认账了，只有你还加粗吗？加不了了能明白吗？好，这个东西必须写在方程三的前面后，你喜不喜欢用简体简减属性？喜欢建议啊，能不用就不要用，懂不懂，第一个你自己写起来麻烦，第二个别人如果不知道这个顺序，维护起来更麻烦，能明白吗？像背景啊，字体啊，这个结节是不是特别特别长啊，一般都不不推荐使用简简接数性能明白，除非这个项目从头到尾你跟在写。几几十年之后也是你一个人在维护，那你就随便你怎么玩，懂不懂，项目是要交接的，就是干嘛就最好让这个可维护性稍微高一点，懂不懂，就像这种简写属性，我推荐是不要用的太多啊，OK，那这是我们说的这个方法啊，OK，这是这个简写属性，那应该没有什么其他东西了，好，这里面还有个东西还可以加行高，那行高的加法也是跟着这个方程算式走，我们可后面可以跟个斜杠，然后你给他来一个30的行高，可以看一下。

你看这个比起之前的那个行高给大一点，来个80的行高。整你是不是就就撑开来了，能明白吗？就是你这个后面还可以跟行高懂不懂，你要是这种写法，你要是让一个小白看见的话，他是不是得炸，他一得去文档上面一个个查每个属性到底是干嘛的，能明白吧，OK，这是我们说的这个什么方family，好，那讲到这一块的话，只是稍微去讲一些细节啊，好，那我们要讲一个重要的东西啊，下面。