41.尚硅谷_HTML&CSS基础_字体一.avi原创

接着来说啊单位我们简单的说完了，然后呢，接下来我们来说一下样式，说一下我们这个字体的一个样式，字体的一个样式，诶字体样式有什么呀，我们来简单说一个吧，简单写这么一个P标签，来一个P标签，P点一个P一边写一个，诶我是一个这个诶P标签，然后这来个ABCDFD，诶为的就是我们要既有这个中文有英文啊简单看一下我们字体有什么东西啊，字体现在是是这样的字体，我们第一个说到的应该有什么呀？是不是字体的一个颜色呀，诶字体的一个颜色，所以这里边我们来说字体的一个设置，第一个我们来设置什么呢？设置我们这个字体颜色，字体颜色怎么设置的？哎，我们使用的是什么呀？使用的是这个color，诶使用我们这个，诶color来设置我们这个字体，诶叫做文字的什么呀，文字颜色啊，文字颜色。

直接来写一个，来写一个color，比如说来一什么呀，Red这就表示什么呀，把我们这个文字的颜色设置成红色啊，Color文字的颜字体的颜色一刷新是不是变成红色了呀？哎，或者你可以叫什么呀，这可以叫前景色啊background color是一个什么呀？背景色color是一个什么呀？前景色其实就是我们这个文字的一个颜色啊color设置字体颜色，那我们说除了颜色还有什么呀，是不是设置我们这个文字的一个大小啊哎，设置我们文字的一个大小，大小我们这块用什么呀？叫做一个放的size啊，放size，比如说我来一个20个像素一保存，咱们来一刷新走，你是不是大了呀？诶那问题来了，你说我们这个文字默认大小多大个啊？哎，我们说一般浏览器里，一般你不改的话什么呀，我们在浏览器中，诶，一般默认的这个大小，默认的这个文字大小都是什么呀，都是。

诶，16个像素啊，都是16个像素，也就说是以16个像素为什么呀为基准的，比如说你说H1是不是16个像素啊，那不是，它是以H以16像素为基准确放大的啊，去放大都是16像素啊默认好，那这里边我们现在已改成20个像素，是不是比我们这16要要大了呀，所以文字明显干嘛了，大了一些了，比如说我来一个什么呀，30个像素我一保存来看是不是又大一些呀，哎，又大一些，那我们这块要问一个问题了，那这30个像素设置的是什么呢？是不是说我这个文字本身是30个像素大小啊，一定注意不是啊，不是我们来说一下放size，它设置什么呢？Sound size设置的这个并不是文字，哎本身的什么呀？哎，本身的这个大小比是什么意思啊，什么叫文字本身大小啊，我们可以简单的去量一下，随便找一个截图工具一量就量量这我吧，我来量那些高度，高度是一多少啊。高度是一个36高度，诶高度哦，高度是20多是吧，诶二十五二十七是吧？诶27也就说是20多，实际上不管怎么量，它是远远小于什么呀，是不是小于我们那30的呀，诶小于30的啊，所以注意放size，它设置的并不是文字本身的一个大小，那它设置的什么呀，设置什么呀，那我们说文字实际上什么呢？实际上在我们这个诶页面中，哎，每个文字，每个文字都是干嘛呢？都是处在一个什么呀，一个看不见的什么呀，夸中的啊，看不见的夸中的什么意思呀，你就想象一下，发挥你的想象力，你就把它当成什么呀，当成我们上学的时候写那个叫什么填格本是吧？诶填格本每个字都干嘛呀，都在一个什么呀格里啊，每个字都在一个格里，那我们说了，我们设置什么呀，我们设置的这个放size实际上是什么呢？我们。

设置的这个found set实际上是什么呀？是设置的我们这个格的什么呀，高度啊，设置我们这个格的高度并不是什么呀，并不是我们这个字体的一个什么呀，哎，高度啊，并不是我们字体的一个大小啊，是我们这个格的高度，那我们说了，那这字体的高度跟我这个方size字体高度跟我们这格大小有什么关系呢？那我们说了，一般情况下，一般情况下，那我们想想，那咱们写字的时候也是，我们会不会说把这格写的严严密密的呀。

不会吧，很少，我们顶格顶底的写，一般情况下什么呀，一般情况下文字都要干嘛呀，都要比这个格干嘛呀，诶要小一些啊要小一些，所以这里边你设置的虽然是30PX，但是实际上字体干嘛呀，诶字体要比我们这30要干嘛呀小一些，但是也有一些特殊情况，也有时会嘛呀，也有时会比什么呀，会比格大，但是这种情况干嘛呀比较少啊叭较少，那这东西到底它是比格小，比格大由谁决定啊，浏览哎其实也不是浏览器的事儿，干嘛呀根据我们这个字体的什么呀不同，诶显示效果嘛，诶显示效果也不同，我自己不同啊，你可能咱们举个例子，举例子我用微软雅黑，微软雅黑它就干嘛呀，他就可能要比我们这格要小一些，可能还有一个叫微软雅白，那他可干嘛呀，比我们这格要干嘛呀大一些，比如说它这个字体的比格大还是比格小有什么呀。

由这个字体决定，这个字体是谁设置的，它的大小由谁设定啊，由谁设定，但是普通的一般情况下都是比我们这格干嘛呀小的啊，一般情况下都比我们这格小的，所以注意啊，方size设置是我们那个字体那个格的大小，而不是字体本身啊方ET，但是这个格啊，还是那句话，这格我们实际上是干嘛的呀，看不着的啊，格我们是看不着的啊好，这是我们说的一个字体的一个大小啊fo size，那我们这里边大小我们看到了，除了字体的大小，文字的大小，我们还有什么呀，是不是还有字体啊，哎，字体我们先来看啊，来打开我们这个chome。

再打开我们这个IE，我们来看看，诶你会发现我这个火火狐里这个字体啊，它应该明显应该是一个什么呀，这是不是应该是一个雅黑啊，诶是一个微软雅黑，但是在我们这个什么呀，在我们IE里，你看这是应该是个宋体啊，哎，宋体，然后看我们Chrome里，诶Chrome里是不是跟IE一样啊，这是不是应该也是一个什么呀，宋体，我们会发现在我们火狐还有在我们IE里，它默认的字体干嘛呀，不一样，为什么呀，这就是因为浏览器设置的不一样，在火狐里就设置什么了，雅黑了，而在我们酷还有这个IE里设置的都是什么呀，宋体，那这个东西我们能不能改呀？诶那肯定能改对吧？诶我们有一个属性叫什么呢？叫做found family啊found family来我们来说，哎，通过我们这个found family可以干嘛呢？可以指定我们这个文字的什么呀？哎，文字的一个字体啊，文字的字体，那比如说现在我们这里边都是什么呀。

括狐是雅黑，而我们这个chome是一个什么呀，宋体，呃，我们这个IE也是一个什么呀，宋体，那干嘛呢？我直接给他写一个，写个什么呢？咱们就写中文了，微软雅黑，我是不是直接写成微软雅黑了，那这表示什么呀？表示配置我们的所有字体，为什么呀，为微软雅黑啊为微软雅黑来看我们火狐一刷新走，你没变化，它本来是不是就是啊，诶本来就是来看GROUP1刷新是不是也变成雅黑了呀，诶变成雅黑了啊，再看我们这个IE1刷新走，你是不是也变成雅黑了呀？哎，可以通过它来指定我们的这个字体啊，来指定字体，那我们来说说，那这东西除了指定雅黑，我能不能指定别的呀，是不是想指定啥种值啊，哎，比如说我有一个这个arow这个字体保存，我们这一刷新走你诶你看字体是不是又稍微有一点变化了，哎又有点变化了，咱们再看什么呢？RO，我这一刷新，诶发现什么了，诶字母变了，但是汉字干嘛呀，是不是还是。

宋体啊，哎，还是宋体，然后看不IE1刷新走，你是不是一样啊，字母变了，汉字还是宋体，那是为什么呢？诶因为我们这个ari这个字体是一个什么呀，是一个英文字体，它里边有没有汉字字体啊，没有，那没有汉字字体怎么办？就使用什么了，哎默认值啊默认值所以注意啊，所以注意当什么呢？当采用某种字体时，诶如果什么呢？如果我们这个浏览器支持，或者说这个字体支持我这个文字，则什么呢？则使用什么呀，使用该字体，如果什么呀，如果我们这什么呀字体不支持，则什么呢？诶则使用我们这个默认字体，所以你看我们用这个errorrow这个字体，对于我们火狐来说，这个东西它只支什么呀，只支持英文，所以英文是不是变成这个A了，但是发现什么了，中文还是什么呀。

还是雅黑啊，还是雅黑，而对于我们这个来说，英文变成这个I了，但是中文变成什么了？是不是变成宋体了呀？哎，变成宋体了，为什么呀？因为宋体是我们这个Co的一个默认字体，同理IE是不是也是这样啊，但是这给我们带来个问题，什么问题了，是不是效果又不统一了呀？一个用雅黑，是不是一个用用宋体啊？诶，那我们现在就希望什么呀，我希望如果你有ari，你就用这个arow，如果你没有干嘛呀。哎，没有你就用什么呀，你是不是就用雅黑啊，哎，没有你用雅黑，那我们想想我这一块我能不能同时指定多个字体啊，能不能啊，哎，那你看他名叫什么呀，Fo family简直叫family，那一个人叫不叫family啊？哎，Family叫什么呀？是不是家庭家族的意思呀？哎家庭家族意思，所以注意我们说该属性干嘛呢？该样式可以什么呀，可以同时哎指令多个字体啊，可以同时指定多个字体，那我们来说，比如说我这来一个艾瑞，我再来什么呀，逗号再写一个，来一个这个微软雅黑，诶那问题又来了，我指定两个自己，他到底用哪个呀，到底用哪个呀？诶我们先看效果啊，先看效果火狐没变化对吧？看我们CHOME1刷新走你，诶你看是不是跟火狐的效果一样了呀？诶，英文用我们那个arow，而我们那个中文用什么呀。

是不是用雅黑了，哎用雅黑了，所以注意什么呢？哎，可以同时指定多个字体，多个字体之间干嘛呢？使用我们这个逗号干嘛呀，分开啊，使用逗号分开当什么呢？当采用多个字体时，浏览器会干嘛呢？浏览器会，诶优先使用什么呀？哎，前边的这个字体，如果前面没有什么呢？如果前边没有在干嘛呀，再尝试哎下一个好，再尝试下一个，如果下一个，诶如果这还不行怎么办？是不是就默认的了？哎，那我说我能不能再写一个呀，我是不是可以接着往下写呀？哎，我可以写多个字体啊，可以写多个字体啊，所以一定要注意可以写多个字体，比如说我们来看看这个效果啊fo family，我来写什么呢？写一个有一个字体叫华文，华文彩云是吧？诶，华纹彩云来保存，我们先看效果一刷新走你诶发现什么了，是不是变成这个效果了呀？诶这是我们华纹彩云的这么一个效果。

诶chome也支持，诶我们这个什么呀，IE也支持啊，华为彩云，而且这个自己干嘛呀，它是不是既支持中文又支持英文呀，诶那我现在如果是这么写，写一个AR华为彩云来一个逗号，来一个A，然后再逗号来一什么呢？微软雅黑，那这是一个什么效果，诶先尝试用华彩云，如果有就用，如果没有就用什么呀？诶下一个下一个如果有就用，如果没有就用什么呀，再下一个，再下一个后边是不是没了，没了就用什么呀，默认的啊默认的，然后我何不再写啊，诶可以无限去写啊，无限写，但是这里边由于什么呀，由于华为产余是不是都支持啊，所以这两个用得上，用不上，诶用不上了啊，用不上了，我这一保存已保存刷心是不是用不上了，哎，用不上了啊，所以注意可以指定多个字体啊，可以指定多个字体，那这里边我们来看就带来一个问题，那这字体它哪来的呀？哎，我这写一个写一个这个写一个超体走你哎呦它不支持是吧，为啥。

不支持啊，这我刚限编的是吧，哎，刚限编的他不支持这个字体，那这字体跟的为什么华人彩云就支持我那字体就不支持了，哎，因为是不是电脑里有啊，所以注意啊，我们这个浏览器干嘛呢，使用的这个字体。嘛呢？诶默认就什么呀，就是我们这个计算机中的什么呀，计算机中的这个字体如果什么呢？计算机中有则什么呀，则使用，如果什么呀，如果没有是不是就不用啊，诶没有就什么呀，诶就不用啊，没有就不用，所以注意这个字体我们之所以能用，是因为在我们这个计算机里有吧，那么假设这是一个客户的计算机，客户计机里啥呢？没有华为彩云这个字体，那怎么办？所以就换下一个呀，诶换下一个啊，所以注意这个字体是由什么呀，由这个客户计算机里的字体决定的，如果客户计算机里没有这个字体干嘛了，就用不了了啊，就用不了，当然还有一些下载字体，我们今天不管这个问题，我们就考虑这个问题啊，那我们来说，那我们这字体。

它在哪呢呀，我想看我这个计算机里有什么字体，我怎么看呀？诶我们来看看在我们这个C盘，C盘有一个什么呀，有一个Windows啊，Windows打开看这叫什么呀，Fonts fonts是不是就是我这字体啊，我们计算机里边所有字体都在这个文件夹里边，一打开，诶你看我这字体就完了。诶，就这么多一堆，那这一堆字体，一般来讲在我的计算机里干嘛呀都是可以用的，但是由于一些格式的原因，可能有些格式什么呀不支持，可能有些格式火狐不支持，可能有些格式IE不支持，但是它的兼容性可能不是那么的好，比如说咱们找一个字体吧，找一个可爱一点的。

诶，这个这个是不是英文都不知道，找一个。这这这字都这太普通了是吧，就有一个跟那个特别特别特别特别潇洒这么一个字体。这这是英文吗？哎，我那字跑哪去了，我也找不着那字了，我以前就爱用，用一个字来就先先用它吧，用它吧，这字也挺好玩的是吧？来那这里边我们是先看这个字的名啊，这字叫一个cur lz MT是吧？哎，这名儿起的吧，还是挺倒霉的，关键我还没有地儿复制去，我们来看这叫这他都自己觉得这个CU lz一个什么呀，MT，那所以我要用这个自己怎么用啊，这玩意儿还不一定能用呢，咱们看它的格式啊，来一个fo family，我得写它这个名叫什么呀，叫做一个哎，CU curl，诶这还有cur lz MT吧，直接一回车是不是就出来了呀，但是注意了，这种名比较特殊，你看它的名字之间是不是有一个空格啊，那这种特殊的名字，最好给它加上一个什么呀，引号表示它是一个什么呀，整体啊，它是一个整体。

这一保存咱们来看效果一刷新走你诶诶它是不是也是只支持英文啊，你看这字就挺嗨，这这这小弯拐的很很好玩是吧，很好玩啊，这么一个效果啊，来我们来看看我们这个CHOME1刷新，诶是不是也是这个效果呀，那这效果还不错，这效果应该浏览器都支持啊，这个自己浏览器都支持啊，但是这里边我们来说，像这种太奇怪的字体，我们用不用啊，哎不用啊，我们这里边来说一下啊，在我们这个开发中，哎如果什么呢？哎，如果我们这个字体太太太奇怪或者什么呀，或者说太少用的人。

太少了，完了尽量干嘛呀，尽量不要使用，为什么呀，你这用了，但是用户电脑里干嘛呀，没有这个字体，他可能干嘛呀，是不是达不到你想要那个效果呀，啊可能变得很很难看啊，很难看，所以这种奇怪的字体呢，尽量别用，但是这个字体没准还还挺多的是吧，我也没装过，这应该都是我们这个系统里默认带的啊，默认带的，但是这种东意奇怪，自己尽量干嘛呀别用，因为有可能什么呀，有可能我们这个用户的什么呀，诶电脑里边没有，诶就什么呀，就不能达到我们这个想的效果，所以一般我们用的字体比较多的什么呀，宋体呀，雅黑呀，哎，这是我们用的会比较多的一些字体叭，较多的一些字体，那同学说了，那我们这个工作里边的设计就用这么一个字体，我这设计就用这么一个倒霉字体。

不用不行是吧，不用可能这个设计效果达不到，那怎么办呀，那像这种特别特殊的给他干嘛呀，诶截个图，放个图片都能显示了，或者干嘛呀，以后我们还会说有些什么呀，网络上的字体让用户干嘛呀，一一连这个字体就自动联网去下载，当然那个兼容性的有的时候也不是特别的完美啊，所以这个东西呢，尽量能避免使用，这种奇怪的就避免使用啊，不过这字体还是都好看的是吧，跟这个女孩这个头发似的是吧，还拐个弯是吧，刘海是吧，嗯，来咱们这里边是我们说这个放family啊，可以同时指定多个字体啊，可以同时指定多个字体，好，那这里边我们是说了一个这个字体的一个大小，还有一个颜色，还有一个这个就是字体本身啊，体本身那下边呢，我们先来停一下，给你们点时间把这个东西稍微。