共计 2693 个字符，预计需要花费 7 分钟才能阅读完成。
为你的网站抉择正确的字体，可能进步用户浏览网站的体验——失当的字体能够为你的品牌发明一个弱小的视觉标识。应用一种易于浏览的字体，比方为字体抉择正确的色彩和文字大小，都是十分重要的。
咱们首先来理解如何设置字体。
在 CSS 中，咱们应用 font-family 属性来指定一个文本的字体。属性值是一个字体的名称。
字体都有哪些名称呢？要答复这个问题，就须要理解一下字体的常识了。
在 CSS 中，英文字体有五类：
第一类，Serif[ˈserɪf]：有衬线字体，在每个字母的边缘都有一个小笔划。它们发明了一种正式和优雅的感觉。比方：Times New Roman[ˈrəʊmən]，Georgia[ˈdʒɔːdʒə]，Garamond。
第二类，Sans-serif：无衬线字体，有洁净的线条，也就是不附带小笔画。它们发明了一种古代和简洁的外观。比方 Arial，Verdana，Helvetica。这个 Helvetica 字体还被拍成了一步电影——《传奇字体 Helvetica》。
第三类，Monospace：单空格字体，这里所有的字母都有雷同的固定宽度，因而又叫等宽字体，它们发明了一种机械的外观。个别咱们在代码编辑器中会应用这些字体。比方 Courier New，Lucida Console，Monaco。
第四类，Cursive：草书字体，模拟人类的手写体。比方 Brush Script MT，Lucida Handwriting。
第五类，Fantasy：空想字体，是装饰性、娱乐性字体。比方 Copperplate，Papyrus
绝对于英文字体，你可能更相熟中文字体。在 CSS 中，中文字体名称都有哪些呢？
在中文的网站中，比拟通用的中文字体有两个：Microsoft Yahei，微软雅黑；PingFang SC，苹方简。别离利用于 Windows 零碎和 Mac 零碎。
这里你可能会问，中华文化博大精深，中文字体也目不暇接，怎么只用这两个字体呢？因为在 CSS 里设置的字体名称，得须要用户的电脑里存在这个字体。如果你想应用任意的字体，咱们在前面的课程里给你答案。如何查看本人的电脑里都装置了什么字体呢？
以 chrome 浏览器为例，点击这个图标，再点击设置，抉择外观，自定义字体。这里有规范字体、有衬线字体、无衬线字体、等宽字体的设置。点击任何一个下拉框，就能看到本人电脑里的字体了。
咱们来做个例子。
创立一个文件夹 006-css-fonts，在文件夹里创立一个 font-family-size.html 文件，构建根本代码，增加 h1，h3，p 三个元素，别离填入一些文本。
再创立一个 mystyle-1.css 文件，定义 h1 选择器，申明款式 font-family: PingFang SC。定义 h3 选择器，申明款式 font-family: Copperplate。定义 p 选择器，申明款式 font-family: 华文仿宋。
再次强调，这里的字体名称，肯定要在网页浏览者本人的电脑里存在才能够失效！
在页面里引入款式文件。
在浏览器中预览页面，题目和段落都利用了不同的字体。
你可能会问，我在 CSS 里设置的字体名称，一旦用户的电脑里没有怎么办？咱们能够给他定义几个款式备选。
比方，h3 的 Copperplate，假如用户的电脑里不存在，能够在后面再增加一个 Brush Script MT 字体，用逗号分隔开。
咱们看，文字利用了 Brush Script MT 字体。
假如这个字体也不存在，在后面再增加一个字体 Courier New。
咱们再看，文字利用了 Courier New 字体。
这阐明，先定义的字体优先起作用。如果定义的字体用户电脑里都不存在，浏览器就应用默认字体了。当然，默认字体也能够自定义设置。
个别状况下，多个单词名称的字体，举荐应用单引号或者双引号引起来。
接下来，咱们来给字体设置字号。
文本字号，也就是文本的大小，在网页设计中是很重要的，它能够使网页文字布局有层次感，便于浏览，加强用户体验。
在 CSS 中，通过 font-size 属性设定文本的大小。属性值能够是相对大小，也能够是绝对大小。
相对大小。将文本设置为指定的大小，不容许用户在所有的浏览器中扭转文字的大小。
举个例子，如果我视力不佳，把浏览器的字号设置的比拟大时，页面的字号会同比放大。
在 p 元素上申明款式 font-size: 20px。
这里须要提醒一下：如果不指定字体大小，失常的文本，比方段落，会继承先人元素的大小，如果先人元素没有设置字体大小，就会应用浏览器设置的默认字号，大小为 16px。
回到浏览器，你会发现，无论用户把浏览器的字号设置为多大，段落的文字始终都是 20 像素。
这难道通知咱们，不要把元素的大小设置为绝对值吗？当然不是了，当页面输入的物理尺寸已知时，相对大小是很罕用的。那绝对大小如何设置呢？
绝对大小，也就是绝对于四周元素的大小，应用 em 这个单位来设置。个别状况下，会依据继承下来的父元素尺寸计算失去。
比方，这个页面的 p 元素的父元素是 body，咱们给 body 申明 font-size 为 16px，给 p 元素申明 font-size 为 2em。转化为相对大小为 2 乘以 16px 等于 32px。
在浏览器里察看后果，用尺子量一下，果然是 32 像素！
如果在 body 元素里没有申明 font-size，p 元素文字大小就绝对于浏览器默认的字号——也就是 16 px。所以，2em 大小还是 32px。
在浏览器里验证一下，字体大小果然没有发生变化！
当咱们调整浏览器的字号时，段落的文本变大了！
这阐明，绝对单位容许用户在浏览器中扭转文本大小。
除了 em，还能够应用百分比 (%) 这个单位，它是绝对于父元素的大小来计算文本尺寸的。应用办法和成果与 em 相似。
比方定义 p 元素的 font-size 为 200%。
此时，段落文字的大小仍然是 32 像素。
方才咱们提到，em 示意的文本大小，是依据继承下来的父元素大小计算失去的。如果元素嵌套层数太多，父元素 font-size 的值也用 em 来设置，父元素的父元素 font-size 的值还是用 em 来设置，这样计算起来就比拟麻烦了。有没有更好的解决方案呢？
答案就是：应用 rem 这个绝对单位。rem，全称是 Relative to the root element，绝对于根元素。这样，咱们就不必像 em 那样，计算那么多先人元素的大小了。
那么，html 文档哪个元素是根元素呢？
没错，就是 html 元素，
在款式里，定义 html 元素，申明款式 font-size: 16px。正文上一个代码，申明 font-size 属性，值为 2rem。
查看成果，段落文字的大小依然为 32 像素。
文章配套视频链接：https://www.bilibili.com/vide…