尚硅谷前端基础 (76)

好，那么呃，有关于我们的这个定位的内容呢，哎，我们也就到这儿，可以先暂时告一段落了，那关于浮动啊，关于定位，那这是我们的布局的这种，这是两种常用的手段吧，但是我们在用的时候一定要注意浮动啊，是我们在宏观上大块上我们用浮动，然后一些细节上一些微调，我们用定位千万比较忌讳的是什么呢？就是你页面里全都是用的定位，你全都是用定位，当然你的元素，你的页面可能能摆放的很整齐，呃，位置很很正确，但是如果你全都是用定位的话，呃。你在写的时候可能能写出来，但是如果你以后需要去改，需要去调整，你会发现就很麻烦了，因为你那个时候需要一个元素元一个元素，一个元素去调，一个元素一个元素去去对，就会变得非常的麻烦啊，非常麻烦，所以啊呃，整体的一个思路就是大局上用浮动，然后细节上我们用定位去做一个微调，做一个补充。

那么接下来呢，哎，我们来说一下我们的一个，呃，等于是对我们的一些这个CSS的一些补充啊，补充说明一些样式啊，我们几个大的它的块吧，哎，我们来说一下我们零六啊，零六我们要说的是，呃，先说第一块东西，我们要先说的是一个，还有什么呢？我们的这个background background这两个东西呢，我们放到一起说啊，就是我们这个字体啊，Background就是我们这个背景啊背景，那我们在这来先新建一个文件，我们先来零一我们的一个字体。来，我们直接在这儿来运行一下。呃，字体的话其实也也好理解是吧，比如说我们写一个SPA啊，SPA我们写一个啊，今天天气真不错，哎，然后呢，Hello hello how are you，我们这个中文英文都写一点是吧，How are you，那这个就是我们写的一个字对吧？这那所谓的字体就是什么呢？就是对我们这些字进行设置这些样式啊，所以自己就是对字设置一些样式，我们来写一个style标签，呃，我们拿这个P标签来做演示，我们直接来一个P啊，我们来说一下我们这个字体相关的样子，字体相关的样式可能我们现在用的最多的就我们用过一个这个color，对吧，Color我可以写一个red，那这样我们的这个背景颜色，这个文字颜色就变成一个红色，所以在这儿呢，我们可以理解成color是用来设置我们字体颜色的啊，Color它用来什么呢？诶用。

在设置我们字体颜色，但是其实严格意义上讲，Color它属于叫做一个前景色啊，前景色也就是说不光是字体颜色，只要是在前面的都由color设置，像字体的颜色，其实主要就是字体颜色，还有边框的颜色啊，也就是说嗯，它实际上严格意义上讲，它不叫字体颜色，它叫做前景色，但是一般情况下，我们都是用它去设置字体颜色的啊，字体颜色的好，这是一个，然后我们还说过一个什么呢，还说过一个，我们叫做一个found size fo size呢，我们叫做一个字体的一个大小啊，字体大小，所以在这儿呢，我们可以直接写一个fo size，比如说我来一个30个像素，那这个时候自己就变成了30个像素，我写一个40个像素，那自己就变成了一个40个像素，所以方size也比较简单啊，我们就不多说了，然后唯独需要一个注意的是，我们之前提到这个提到过这个问题，我们这个正在补充一下，哎，和我们这个fund size相关的单位。

相关的单位，我们这有两个，哎，就就是一个是em，还有一个是re em啊，我们这两个单位em相当于什么呢？诶相当于我们当前元素的一个方向size啊方size，我们说了你写一个em，那就是等于一个字体大小，对吧？你现在我这是一个40像素，如果我这写1EM，那就代表是40对吧？Re em代表是80，而re em呢是什么呢？相当于哎当前元，诶不是当前元素了，是我们这个跟元素的一个方方size，所以这个时候我们说这两个单位啊，一个是em，一个是re，马上我们就会用到这两个单位，对吧？但是现在还是回顾一下这两个东西好，方size啊，这是字体大小，那我们想一下，除了字体大小以外，我们常见的还有什么？哎，就是我们这个字体的一个格式，你这个字体。

是是微软雅黑的，诶还是什么别的字体对吧，我们叫做一个fo family family这个什么呢？这是指定我们这个字典。

字体族的啊，字体族也就是我们的一个字体的一个什么呢？哎，字体的一个格式啊，你是维尔雅黑啊，你还是什么其他的一些格式，对吧？那比如说我这想换一个文字的格式，我就可以指定一个啊，我们可以指定一个，我们叫做一个found family啊放family那比如说我可以写一个微软雅黑。诶，微软雅黑，那这样自己就变成一个微软雅黑的格式，但是这你看不出变化，因为它本身默认就是微软雅黑的，或者你也可以换其他格式，比如说我们中文有什么华纹彩云吧，有这么一个华纹彩云，哎，那这个时候这个字体是不是变成这个效果了，哎，是这么一个东西啊，这也比较简单，就是你把你想设置那个字体给它写上就行了啊，写上就行了，但是这个东西我们这要着重说一下啊，着重说一下。

我们对照着我们的这个文档来说啊，文档来说，呃，打开我们这S码，我们直接搜一下，搜一下我们叫做一个font family fo family啊，我们的字体族啊字体族，那这里边呢，我们先说一下什么呢？还有这么几个值啊，有这么几个在这我们来看。哎，Values可选值对吧，Values我们直接看这。这几个，呃，它这有这么几个值啊，第一个呢，我们叫做一个syri啊srif，这个叫做一个sun syri啊sun Sri，这个叫做mono space，这叫做carle，这叫做fani啊FANI1共有这么呃五种值，这五种值实际上就是五种字体啊，五种字体我们可以演示一下，我们可以演示一下，比如说我这写一个写一个这个theif啊S哎，那这是一种字体，然后呢，我们这再写一个sun s哎，你看这又是一种字体，对吧？还有什么呢？还有我们叫做一个mono space啊mono space啊，那这又是一种字体对吧？还有什么这个castle，呃，Castle。

哎，又是一种对吧，又是这种，还有我们叫做一个fantastici fantastici，啊fantastici它又是一种字体，也就是说这四种的一个格式啊，我们来说一下可选值，可选值刚才我们看到的什么这个S，呃叫做一个SR，还有一个叫做sense s s啊since，哎，这个没拼错吧，我们来看一下啊since s啊since，还有我们叫做mono space啊mono space我就给它粘过来啊，我给它粘过去，呃，我就粘这个啊，我就粘这三个，那两个我就先不粘了，那这个是什么东西啊，这个什么东西，那这个里边注意了，这个字体这些东西，它并不是指定的说某一个字体，它不像说我们平时用的字体，像什么微软雅黑呀，像什么这种宋体呀，像什么仿宋啊，它不是这些，它不是具体的字体，这些东西指的是我们的。

的字体的分类啊，字体的分类，SR表示的是我们什么呢？叫做一个衬线字体，衬线字体这个叫做sin s叫做非衬线字体，非衬线字体，然后mono space叫做一个等宽字体啊，等宽字体，所以这些东西它实际上是我们字体的一个分类，那什么叫称线字体，我们看一下，我们写一个C称线字体，说白了就是那个字啊，它不好写，什么叫称线呢？我们来看啊，比如说我们这有一哈，你看这哈，这是本来是1L啊，哎，L你看。你看H，你看L下边是不是都多这么一个盖儿啊，哎，多这么一个盖，你看L上边是不是还出了一个冒了一个尖儿啊，哎，冒了一个尖儿，说白了什么叫衬线字体，就写这个字啊，它不好写，本来L该竖着对吧，那我干嘛呢？我前边衬线字体的话，我前边给你加个勾，后边给你加个和变成一个带衬线的，那像这个玩意儿就叫什么呢？就叫衬线，就是在那个字儿啊写完的结尾，结尾的时候干嘛呢？它它勾两笔啊，这个字好看一些，你包括我们中文也是一样，你看这个什么天气，天气本来第一个是不是应该横啊，哎，他干嘛呢？往上勾一下，这个勾就属于衬线啊，S叫做衬线字体，我们看文档里面它体现出的S。

啊来这跟我们的一样是吧，也是写完这个字它都带个勾对吧，都带那个结尾啊，开头都尾带个勾，这个勾就叫做一个衬线字体啊，就做一个衬线字体，那这个呢，还有一个我们对比一下，其实可能会更明显，Since CF叫做非衬线字体，也就是说since CF的话，它的感觉就是什么呢？你看我结尾就是什么，横平竖直的，干净利落是吧，你写个H就是H，我不会说我这再加一个什么呢，加个个这个衬线对吧，叫做一个SCF啊所以CF叫做衬线字体，SCF叫做一个非衬线字体，那注意了，这个东西它并不是一个字体格式，它是一个字体的分类，比如说我们有十种字体是吧？诶，ABCDEFG，那可能ABABC属于什么呢？属于衬线字体，然后呢，诶，EFG属于什么呢？属于非衬线字体，也就说你叫A式衬线字体，你叫C式衬线字体都行，你叫F式衬线字体，叫G式衬线字体也都行，它是一个。

大的分类啊，它是给我们那个字做一个分类，然后这个mono space呢，叫做等宽字体，什么叫等宽字体呢？因为你要注意了，呃，诶我写的是啥呀，Model space model space叫做等宽字体，什么叫等宽字体呢？就是我们的字母跟字母之间的宽度是一样的，比如说我们写，比如说我们英文里边有有L对吧，有L还有什么呢？还有这个H，很明显L跟H的宽度是不是不一样啊，哎，不一样，所以如果你像我们如果用这个sin c负的话，你看一下效果。

Sense s你看效果实际上很明显，这个L比其他的要窄很多，对吧，L比其他要窄很多，也就是说我每一个字母的宽度，它是它是不一样的啊，它是不一样的，那这个时候就会带来一个问题，那你每个字母的宽度不一样，那可能我第一行我写了十个字母，第二行呢，我也写十个字母，那可能我这两行的宽度它并不一样，也就是说导致我这两行对的时候，是不是可能对不齐啊，哎，对不齐，而我们这个model space叫等宽字体，它可以确保什么呢？它可以确保我每一个字母的宽度是一样的，比如说你在这儿，你看诶L虽然是不是窄啊，哎，但是它在里边加一个衬线，加上衬线以后呢，它的宽度跟它们这个H的宽度实际上是什么呀？是一样的，所以等宽自己的意思就是让我的每一个字母的宽度是一样的，这样我们在写一些内容的时候，对齐起来就比较方便，因为你你上面写十个，你下面写十个，只要是十个宽度一定是一样的，因为是。

董宽嘛，包括标点符号啊，包括空格啊，都是一样的，所以叫做短宽字体啊，懂宽字体当然对于我们中文来说没什么意义，中文中文是方块字对吧，你什么字体，我肯定每个字都是一边大的啊，中文没什么意义，那这个等宽字体的话，其实一般什么场景我们会用的比较多，我们在编写程序的时候，我们所写的代码一定全用的是等宽字体啊，这一定全都是等宽字体，那这样我们代码对齐起来会比较什么呀，会比较方便，所以这个时候我们代码时候就比较常用的等宽字体啊，S since model space啊，衬线非衬线还有等宽。然后呢，看一下文档，除了这两个呢，还有什么castle，还有这个fantastici啊，Castle叫做草书字体，你看这就这玩意儿草书字体是吧，有点这种艺术字的感觉啊，艺术的感觉，这fantay呢，叫做一个虚幻字体，他这也不知道他是怎么评价这东西就算虚幻的是吧，反正就这玩意儿，你看虚，虚不拉几的，幻不拉几的是吧，我也我也我也我也，我也不太清楚他是怎么怎么评价的，但是呢，这两个东西我们一般也不用啊，这两个东西我们一般也不用，那这个是干嘛的，这个是我们一个大的字体分类，什么叫大的字体分类呢？它是代表某一个字体的类别啊，字体类别，比如说我写一个since s表示什么呢？表示说我写我我就写一个S啊，我写一个S，表示说我想用一个衬线字体啊，我想用一个衬线字体，至于说具体用哪个衬线字体，由谁决定，由浏览器来决定，也就是说你只是告诉浏览器我想用衬线。

至于用哪个浏览器，你自己说了算，懂这意思吗？哎，所以这个东西很简单。这个东西是干嘛的呢？诶这个是一个什么呢？诶这个是啊，我们常用的就这三个，那两个什么卡O啊，Fantastici啊，不怎么用啊，指定我们这个字体的一个什么呢？类别，浏览器会什么呢？浏览器会自动，诶自动什么呢？诶使用诶该类别下的这个诶字体啊，该列一下的字体，那比如说我这个S字体有十种是吧，浏览器可能就选一种用啊S有有二种，我就从二种里选，选一种来用，就是浏览器决定具体的字体类型，而你决定什么呢？哎，决定我们这个字体的一个这个自己的一个这个呃分类大的类别，所以这个时候用它的话，一般情况下我们这么直接用的话，不不会这么直接用，为什么不会直接用呢？因为这个东西。

你比如说你指定一个衬线字体，可能在我们的这个，呃，在我的Chrome里边，它用的是一种字体，可能到了IE里边又变成了另一种，也就是说它可能不同浏览器所选择字体是是不一样的，那这个时候就会带来一些这种这种兼容性的问题，对吧？你显示效果不一样，哎一在group里边是那么一个字体，在IE里呢，又变成另一个字体，显示效果不同，所以一般像这种情况下直接写，我们是不会这么写的啊，我们是不会这么写的，那我们怎么写啊，那我们怎么写，那这里边注意fo family family什么意思，家庭或者叫做一个家族，我们这些写名了叫做一个字体族，既然叫字体足了，是不是说我们这儿只会写一个纸，不会哎，我们往往都会写很多值，比如说举个例子啊，举个例子，我直接给它粘过来啊，直接给它粘过来。

哎，那这里边呢，我们来看一下，实际上现在啊，其实它会有一个提示是吧，有这么一些常用的格式，那这个时候你看这个放到family指定了几种字体，诶指定三种实验算式，哎，你看他们之间用一个逗号来隔开，这是一种字体，这是一种字体，这是一种字体，而且你要注意你像这个字体，它之间是不是加了一个引号啊，为什么加引号，因为字体的名字之间出现了空格的，加了个引号呢，确保它没有问题是吧？有空格的，有特殊符号的就需要加引号，像这种的就不需要加啊，就不需要加，那这里边我们的放的family，我就指定了三个字体啊，指定三个体，那这三个字体什么顺序，诶，它优先使用什么呢？使用第一个是吧，优先使用第一个，诶，然后呢，第一个如果没有，哎有没有可能没有啊，很有可能你电脑里，你的计算机里没有安装这种字体，那是不是就没有啊，哎没有你就再使用什么呢？再使用第二个啊第二个，那第二个要没有呢，就使用第三个。

懂这意思吧，所以我们这里边是什么呢？我们这个字体足我们放的family，我们这个放的family，哎，可以同时指令多个字体，哎，多个字体间使用我们那个什么呢？使用逗号隔开啊，使用逗号还是我们这个英文逗号啊，使用逗号隔开啊，使用逗号隔开，那我们这个字体生效时啊，字体生效时优先使用第一个，第一个没有，第一个无法使用，诶无法使用则什么呢？诶则使用第二个，哎，依此类推，哎，以此类推，先优先用第一个，第一个没有用第二个，第二个没有再用第三个，懂这意思吧，哎，所以你看我第三个写的是什么，第三个写的就是一个model space啊，Model play什么意思？懂宽字体，这两个字体都是懂宽字体是吧？我这意思是什么呢？哎，你先用这个，这个没有。

看哎，你就用第二种，这两种你都没有，那我也不知道你该用什么了，就这样吧，你从你的电脑里，你有什么等宽字体，你就拿一个随便用就完事了，所以最后这一个自己等于是一个兜底的啊，等于是一个兜底的，所以就是你有哪个用哪个，你实在都没有，OK，你随便随便你选一个等宽自己就行了，所以像这种东西啊，什么C呀，什么S啊，什么model space呀，一般情况下都是写到一个最后的啊，都是写到最后的，我们看看别的网站的例子啊，比如说我们看京东。

哎哟，我们直接来检查我们的这个字体。包底看一下，一般这玩意儿都在这个包底指定啊，这我们直接给它粘过来，这是我们这个，呃。在这CTRLC这是京东的指定的一个字体，一个格式，我再粘过来，我怎么还跑这个香港来了。哎，是这样啊，我们来看看中文站，刚才跑到那个繁体网站的啊，我们来看一下body，一般自己都是设置在bodyy上，其实它的个格式基本上是一样的，我们直接给它粘过来啊，呃，这其实是一样的，没有变化。

你看看对吧，稍微有一点微调对吧，有一点微调，所以这个时候我们来看京东的话，它就给我们指定了几种字体，你看第一个Microsoft雅黑是不是微软雅黑啊，诶第二个什么黑体SC，你看这里边这个字体之间有空格，有空格，但是京东在写的时候呢，它也没有加引号对吧，所以这引号其实也是可选的，写不写都行，但是最好的话写上，像这种方式它有可能有可能出问题是吧？有可能出问题我们只能说啊，所以有特殊符号，有空格这种最好把这引号给它写上啊，然后这个字体，然后这个字体，然后这个字体，也就是说它也指定了一堆，对吧？诶优先使用微软雅黑，然后是黑体SC，然后是这些字体，然后这些字体，最后最后肯定有一个sense CF，也就是说如果前边这一堆字体你都没有，没有怎么办？没有你就给我用一个非衬线字体，所以我们最后那个是一个兜底的啊，是一个兜底的，那这个我们就不多说了啊，这个我们就不多说了，也比较的简单啊，比较简。

那那真正我们在开发的时候就是呃，写的时候其实格式也基本上固定，像我们一些商业网站基本上全都用，呃，威尔雅黑啊，宋体啊，就主要是威雅黑，威尔雅黑会多一些，为什么用威尔雅黑就多一些呢？你们要注意我们用的这个字体，这个字体能不能用由什么决定，由我们的用户的计算机里是否安装了这个字体来决定，我们的字体装在哪儿了，我们来找一下计算机C盘，C盘我们有一个Windows Windows下边有一个fonts，你像这个fo里面现在显示的就是我的计算机里所安装的字体，那为什么我的电脑里能用微软雅黑，那么一定是我电脑里已经安装了微软雅黑，如果没装我就干嘛了，用不了了，我们来看看有没有Microsoft雅黑。

在这这是不是就有一个这是雅黑UI，那我们就我就我就不管了，是吧，这都类似的，这应该是都都都是他们一系列的Microsoft雅黑，那他应该写的就是VI黑，我看过。诶，在这儿是不是有位啊黑暗，所以我之所以能用这个字体，原因是由于我的计算机里安装了这个字体啊，安装字体如果你没装这个字是不能用的，所以比如说你自己，哎，找到了一个特别偏门的字体是吧，特别干净的一个字体，这个字体一般人。都没有，哎，比如说这个字体的名字就叫今天天气真不错，这字体就你电脑里有，别的电脑上都没有，OK，你设置这么一个字体，那用户能不能用，哎，注意了，用户是用不了的，因为在用户的电脑里，他并没有去安装这个字体，所以他就。

用不了，懂这意思吧，所以我们选择字体的时候，一般我们指定的都是一些比较常见的，很少很少，说我要指定一些比较少见的字体，这里一定要注意啊，这里一定要注意啊，然后再说一个就是诶有同学说老师那假如说我现在就有这么一个比较少见的字体，哎，比如说我在这儿有个字体，字体在这儿呢，哎，我有这么三种字体，叫什么什么什么什么字体是吧？诶我也忘了叫什么字体了是吧，这PDF文件都是我们字体文件啊，这一双击一点击安装就可以安装了，但是我们就我就我就我就不装了啊，我不是为了不是为了装字体，而是掩饰这个问题，那比如说我现在就想用这个字体啊，或者说什么呢，或者说我现在就想用这个字体，对吧，那这个时候我想让用户可以使用这个字体，但是问题来了，我要是指定这个字体，我的用户的电脑里有没有安装过这个字体啊，没有。

半砖卧，所以这个时候用户能不能用呢？不能用，所以这个时候我们可以通过一种方式让用户可以去使用，我们本就是我们在服务器上的字体，怎么办呢？我们来看一下啊，在这儿啊，我新建一个定夹，我叫一个放。哎，这玩意儿。放啊，然后呢，把我这三个字体啊，我给拖进去。哎，现在这三个字体肯定用不了啊，肯定用不了，因为我们用户肯定没装，我都没装对吧，我从网上随便下的这么一个字体，哎，但是我现在希望什么呢？希望这个字体用户可以用啊，用户可以用，那这个时候我们怎么办呢？啊，在这里边我们直接说一下，呃，在我们这儿啊，我们有一个属性，一个是干嘛的呢，可以。

放face，哎可以什么呢？放就是字体是吧，Face就是这脸是吧，哎脸放就是一个，呃它的就是等于是一个字体的一个这个外观，这么一个意思啊方face可以什么呢？诶可以将我们这个服务器中的这个字体，哎字体干嘛呢？诶直接诶直接提供给什么呢？诶提供给我们这个用户去使用啊用户去使用它是干嘛的，其实也很简单，就是比如说我现在就希望你用户，哎要用什么呢？要用这样一个字体，但是你现在在电脑里干嘛呢？你又没装这个字体，那怎么办呀？哎，那只有一个选择，就是我让你从我的服务器上把这个字体下载下来，你是不是就可以用了啊，你可以用了，叫做一个fund face啊face，那fund face里边有两个值，一个叫做fund family，还有一个叫src，我们写完了以后，他就把这个结。

都给我创建出来了，放到family这是干嘛的呢？这是来放到family是指定我们这个字己的一个名字的，注意了，这个放到family跟下面就不一样了，下边那个是指定你要使用的自己的名字，而这个放到family是指定什么呢？是指定的我们的这个你就是你给这个字起的一个名字啊，起的一个名字，比如说我这就起一个，我这叫一个什么呢？我这叫一个买放啊，买放就叫放，那这个时候我这个字体的名字就叫我的字体啊，叫做一个买放的你起个名，这是你随便起，起什么都行啊，起什么都行，尽量还是这种纯英文的好一点啊，卖放的起源这个名字以后呢，下边一个东西叫做SRCSRC什么意思？我们说了，我是想把我服务器上的一个字体，是不是提供给你的本地去使用啊，哎，我把我服务器上的字体提供给你的本地上去使用，那这个时候我就得给写一个什么呢。

写一个路径啊，写一个路径，这个src是什么呢？是我们这个服务器上，服务器中我们这个字体的一个路径啊，你要写一个路径，那我这个字体呢，就在这个放到下边对吧？放到下边，所以我就可以直接写一什么呢？直接写一个叫做诶点斜杠啊放下边的，我们看看叫一个什么呢？叫一个复制一个吧，CTRLC我直接给它粘过来，哎，给它粘过来。Contrait。直接给它粘过来，那这样我在这里边是不是就配置了一个路径了，哎，那这样我的这个字体就算给它配置完了啊，所以注意我们再说一下啊，这是一共是，哎，我看看这个没错啊，没错，这一共是我们这两个东西，一个叫放family，你在这需要给他指定一个自己的名字，一个叫做我们src，你需要指定一个自己的路径，也就是告诉浏览器，当你要使用这个自己的时候，诶你没有也没关系，你可以直接从我的服务器当中去下载啊下载，所以这个时候你再用字体，我就可以不写这个了，我可以直接写什么呢？我可以直接写一个font family，我写什么呢？我这是不是已经起名了，就要买放呀，哎，买放了，所以我把这买放的就要写上，那这个时候你再看这个字体是不是就变成了。

这样了，哎，变成这样了，这是哪个字体，就是我所指定的，也就是这个字体啊，这个字体，当然你这个路径你可以换是吧，你可以换别的字体啊，你想用哪个你就可以换哪个是吧，CTRLC。哎，那这个字体是不是是不是又变了，哎，那这样的效果就是我们可以去指定这个字体啊，你想用什么字体，那就都可以用了，就可以确保你这个自己一定可以用啊，一定可以用，但是这个东西它也会存在一些问题啊，但是你先记住怎么写啊，放face里边两个东西，一个叫做放family，还有一个叫做src啊src那这个呢，放到family是指的名，自己起一个就行了，Src指的是路径，是你服务器上那个文件的路径，它也会有问题，为什么呢？因为你的这个文件是存到你的服务器上的，用户要用的话，他得先从你服务器上去下载，下载就需要花费一定的时间，所以有的时候你的网速比较慢的话，你会发现有的时候这个字体一上来，它一下子还没加载出来，没加载出来它就可能还是那个默认那个字体，然后它可能过一会儿加载完了，然后这个字体哗一下就变了啊，哗一下变了，它可能会有一个闪的情况出现，但是只是第一次，当你加载过一次，第二次就没有什么问题了啊。

所以它会有一个加载速度的问题啊，所以这个呢，用的时候呢，呃，慎重一点啊，慎重一点，所以这个东西呢，放到FA可以指定我们这个服务器中的字体供用户去使用，那注意啊，它会有两个问题，两个问题，第一个问题就是我们这个加载速度的问题，就是可能加载速度比较慢，它会出现这个字体的一个切换的这么一个效果啊，加载速的问题，第二个也是一个比较重要的问题，叫做一个版权的问题啊，版权的问题，那这个是我们的这个，呃，字体，字体都是我们这些，呃，设计师啊，他们设计出来的啊，设计出来的东西，设计出来的东西，只要是人做的东西，他都会有一个东西叫做知识版权的问题，也就是说，比如说我辛辛苦苦设计完一个字体，可能我是一个比较有开源精神的人，对吧，我愿意你去用，OK，你拿过去直接去使用就完事了，直接去使用就完事了啊，然后呢，但是有一些人是我觉得什么呢？我。

自己做的东西，我辛辛苦苦做出的东西，我不愿意别人去免费使用，至少我希望你使用过程当中我是有一个收益的，那我有一个版权的问题，那这个时候这种字体如果你没有付费，没有经过授权就去用的话，那有可能会有人去干嘛呀，去告你，他要告你，那你可能就得去赔他的什么呀，赔他的钱，懂这意思吧，所以是一个版权的问题，像我用这个字体都是我从网上找的，应该都是一些呃，免费使用字体，所以这种字体我们可以放心使用啊，当然你用的时候你得确定它确实是免费的是吧，别用完了告诉你是收费的啊，免费使用字体，但是如果是收费字体，而你又没有经过别人的授权去使用的话，那别人可能会告诉你侵权，会收你这个使用费啊，会收你使用费，所以这个一定要一定要注意啊，一定要注意，但是这里面关于版权这个问题，我们还要再说一下，你像我们的比较典型的我们比较常用的字体，Microsoft的雅黑，它叫微软雅黑，像微软雅黑这个字体。

哎，微软雅黑这个字体它就是有版权的啊，它就是有版权的，甚至好像这个版权我印象里应该都不是属于微软的，它是属于那个中国那个方正的吧，哎，方正专门设置字体好像是啊，我的印象是那这个都不是一个免费的字体啊，这个都不是一个免费字体，那很多同学说了，那老师威雅黑不是一个免费的字体，那我在放的family，这用薇雅黑，那是不是会有人告我侵权呀？哎，注意我们说的这个版权在哪体现，主要是在这儿体现出来，在放到family，这无所谓，为什么无所谓呢？为什么？因为我们放family这个东西，实际上给的是一个字体的建议，比如说这儿这儿这儿我们给的是一个字体的建议，我们建议用户使用这个字体，建议用户使用这个字体，我建议你使用这个，至于你用不用谁说了算，哎，你浏览器自己说了算，我告诉你用。

威尔雅黑我只是建议你用，但是如果你的电脑里没有薇尔雅黑，你会不会用啊，不会用，所以我只是给你提供建议，这个字体是你自己安的，你自己安的，你自己用的，所以如果你用的是放在family去指定字体，这个东西没有任何版权问题啊，不会存在任何版权问题，你只直接用就好了，因为它是用户自己的字体啊，你没有给他提供下载，但是如果你用这个found face给他提供字体，由于用户是通过你的服务器去下载的这个字体，这个时候就可能会涉及到版权问题，因为这个字儿是你给他提供的，对吧，他自己下的，OK，他搞不过来对吧，但是如果是你给他提供的，他可能就能去告你，所以你用放费的时候一定要注意版权问题啊，一定是确认是免费的，或者是确实花钱了是吧，获得到这个授权了，你再去用它，诶一些涉及到违约的东西一定要尽量避免去使用，虽然可能也没有几个钱是吧，但是也要避免去使用啊。

好，这是一个，然后的话这个的话，这是第二个问题，版权的问题，还有一个问题就是我们这个字体的一个格式的问题啊，字体也就说我们这个字体文件呀，它还有很多的格式，什么ttf呀，什么WOTT吧，很多很多的格式，也就说像这种格式基本上啊，基本上现在ttf的兼容性比较好，基本上所有的浏览器都支持，但是你不可避免的可能有一些奇怪的浏览器不支持某个字体格式，那不支持ttf，那如果你需要所有浏览器都支持，那这块你可能得提供什么呢？好几个格式，就像我们那个视频音频的时候，我们讲的，我们需要通过sa去指定多个格式，那这个时候如果它不支持这种格式，那你就需要下边再指令啊，再指令，那我们直接看例子。

他下边应该会有例子。不是。这方。直接点开它，你看这你像这个字体放个face前面也是顶一个名，然后src呢，你看逗号是不是就指定了两个值啊，哎，指有两个值，一个是WTTF2，还有一个是w of，指定两个格式，也就是说呃，他们之间用逗号隔开，那也就是说其实这两个字体就是优先使用第一个，第一个如果你不支持，你再使用什么呢？使用第二个，哎，它会给你一个选择啊，给你个选择这种格式呢，还挺多的啊，还挺多的，我就不一次说了，因为你兼用的浏览器不一样，你到时候真正用的时候，你自己考虑一下，一般情况下也没有这个问题啊，一般情况下我们都拿一些现成直接用，很少说我去自己去弄一个自己用，很少啊，很少，但是你用的时候一定要考虑这个自己格式，就说你要把你兼你需要兼容的那几个浏览器都试一下，不支持的格式你自己再找一下，自己再上网去转一下，直接百度一搜，一堆啊一堆，然后还有一个就是后边的话还多了一个format，你看这是不是还多了一个format，我们。

这也可以写直接空格for MAT啊的什么呢？这我们应该写的是一个出tte，出type，这指定的是我们一个自己的一个格式，呃，什么意思呢？默认情况下这东西都不是用写的，都不用写，默认情况下浏览器一看tdf，它就能识别出这个文件是什么格式，他自己能认识啊，一般情况下都能认识，而这个form ma的什么意思，它有点多此一举了，它的意思就是告诉浏览器我这个自己的一个格式叫做出type啊，做出type，然后浏览器就会以这个格式去解析了，这个基本上只是一个保险的措施，确保浏览器可以正常的去识别，但是它不是一个什么呢？不是一个必要的啊，不是一个必要的啊，不是一个必要的措施，写不写都行啊，写不行，那至于有的格式，我们来看，这应该给你列了，你看什么w of啊，W of2啊，然后出type呀。

呀，哎，都给你写了是吧，根据你的需要，你去选择这个格式就行了，这个东西嗯，一般真正写的情况下很少，所以在这儿我们写也是希望你呢，你先认识他啊，认识它以后我们用的时候，你知道它是怎么回事就完事了啊好，这个是我们说的一个放的family，那等于我们其实就说主要说了一个东西，就是found family，我们的字体字己族，好我们来停一下，那会自己来尝试着去设置一下这个字体。