小菜鸡的html初步教程（第十三章使用WEB字体）

<>小菜鸡的第四篇博客

Emmm，思修课上淡定的更新博客还行
本系列文章仅仅是对基础的HTML5以及CSS进行讲解，更加详细的内容均会附上链接，以便查阅和版权保护。
本篇主要是为你的网页增加网络上的字体（让它看起来更加花里胡哨）

* 什么是Web字体
* 在哪里能找到Web字体
* 下载第一个Web字体
* 理解@font-face规则
* 使用WEB字体设置文本样式
* 为WEB字体应用斜体和粗体
* 使用Google Fonts的Web字体
8
<>1.什么是Web字体

就是在系统默认添加的字体外再添加一些额外的字体，就像给手机下载一个额外的字体包，让它从宋体变成方正喵呜体之类的。

<>2.在哪里能找到WEB字体

在网站上使用Web字体有两种方式：自托管和使用Web字体服务
自托管字体的意思是，在本地添加字体，就像你自己的服务器一样，和（图像，css使用方式大体相同）
使用Web字体服务是：让其他网站的服务托管字体为用户提供一小段代码放在其网页中。
其中，使用Web字体服务能提供更多的服务，不够有很大一部分的Web字体都是基于JavaScript，这意味这当你在加载页面时，你需要先加载
JavaScript，这意味着你的网页加熟度会变慢，这会影响你的使用体验。

<>3.下载第一个Web字体

这个具体可以自行百度，此项内容偏实践性，如果我要讲解的话，每个网站的使用方法都不同。。。。。。。。。（就是因为我懒（摊手）

<>4.理解@font-face规则

（
其实我现在在怀疑这个第十三一章讲解的必要性，因为这个真的是可以百度到，并且真的要讲的话和你拿着一个手机，想把它从安卓8.0升级到9.0，这个时候你需要的是一个专业的人给你指导怎么安装而不是让别人给你讲这个更新包括了哪些内容，而这些内容是用哪些代码实现的）

<> 不多讲。。。。

后续的一堆东西就直接讲关于具体代码了，概念性的，操作性的东西就带过了，
style{ @font-face{ font-family:"字体名称"; src:url("字体文件"); font-weight:normal;
font-style:normal; } }
这上面的代码片就是此章节需要理解的全部内容。
@font-face这个是添加字体文件必要的格式，font-family这个是字体的名称，这个会决定了你后续的引用是怎么称呼它的
font-family:Verdana, Geneva, sans-serif;
就像这样，这个是引用浏览器自带的字体，如果你加入一个font-family为hahahah的，那么你可以这么引用它
font-family:Verdana, Geneva, sans-serif,hahahah;
src:url(“字体文件”);这个是什么意思呢，作为一个看到这里的读者，你应该知道src:url(“2.jpg”);
的使用方法，对，就是这样，将你在网络上下载的字体导入你的HTML中。
font-weight:normal;
font-style:normal;这俩是定义引用的字体是否加粗，是否使用斜体，当然，你也可以在后续的代码中加入诸如
body{ font-style:italic; }

来实现斜体，不过如果你直接在字体格式中加入斜体，并且引入斜体对应的字体，那么你的最终网页中，所有的使用此字体的文字都会呈现斜体，并且呈现的是真的斜体，而不是浏览器因为没有识别到斜体文件，而设置的假斜体。那么这俩的区别在哪儿呢，当英文的
g斜体时会呈现，但是如果是单纯的浏览器字体加粗，呈现的就是这样说就能理解了吧。
这一节只花了一个多小时（确实没讲什么东西。。。。）

热门工具换一换

小菜鸡的html初步教程（第十三章 使用WEB字体）