小菜鸡的第四篇博客

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字体）相关推荐

小菜鸡的html初步教程（第十二章初步构建响应式网站）
小菜鸡的第三篇博客今天是3/19,天气不错,跑到自习室来更新博客. 本系列文章仅仅是对基础的HTML5以及CSS进行讲解,更加详细的内容均会附上链接,以便查阅和版权保护. 昨晚我思考了下,决定对 ...
2017.2.12 开涛shiro教程-第七章-与Web集成
2017.2.9 开涛shiro教程-第七章-与Web集成(一) 原博客地址:http://jinnianshilongnian.iteye.com/blog/2018398 根据下载的pdf学习. ...
python 教程第十三章、特殊的方法
第十三章. 特殊的方法 1) 特殊的方法 __init__(self,...) 这个方法在新建对象恰好要被返回使用之前被调用. __del__(self) 恰好在对象要被删除之前调用. __st ...
Flask 教程第十三章：国际化和本地化
本文转载自:https://www.jianshu.com/p/e2923f4042d6 这是Flask Mega-Tutorial系列的第十三部分,我将告诉你如何扩展Microblog应用以支持多种 ...
史上最简单的spark教程第十三章-SparkSQL编程Java案例实践(终章)
Spark-SQL的Java实践案例(五) 本章核心:JDBC 连接外部数据库,sparkSQL优化,故障监测史上最简单的spark教程所有代码示例地址:https://github.com/My ...
Flask 教程第十三章：国际化和本地化 1
本文转载自:https://www.jianshu.com/p/e2923f4042d6 这是Flask Mega-Tutorial系列的第十三部分,我将告诉你如何扩展Microblog应用以支持多种 ...
C#图解教程第十三章委托
委托什么是委托可以认为委托是持有一个或多个方法的对象.当然,正常情况下你不想"执行"一个对象,但委托与典型对象不同.可以执行委托,这时委托会执行它所"持有" ...
数学分析教程第十三章学习感受
这一章讲的是场的数学,也就是梯度,散度,旋度的基本知识.梯度在图像处理中边沿检测还用到过,而且是离散的差分形式,其他就没咋用过了,到时里面的很多公式在数理方程中似曾相识(不过工作中我也用不到了).不过 ...
史上最简单的spark教程第二十三章-运行第一个机器学习Java和Python代码案例
[提前声明] 文章由作者:张耀峰结合自己生产中的使用经验整理,最终形成简单易懂的文章写作不易,转载请注明,谢谢! 代码案例地址: ?https://github.com/Mydreamandrea ...

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

小菜鸡的第四篇博客

1.什么是Web字体

2.在哪里能找到WEB字体

3.下载第一个Web字体

4.理解@font-face规则

不多讲。。。。

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

最新文章

热门文章

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

小菜鸡的第四篇博客

1.什么是Web字体

2.在哪里能找到WEB字体

3.下载第一个Web字体

4.理解@font-face规则

不多讲。。。。

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

最新文章

热门文章

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

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