为你的网站选择合适的字体可以提升用户浏览网站的体验——合适的字体可以为你的品牌打造强烈的视觉识别.使用易于阅读的字体非常重要，例如为字体选择正确的颜色和文本大小。我们先来看看如何设置字体。在CSS中，我们使用font-family属性来指定文本的字体。属性值是字体的名称。字体的名称是什么？要回答这个问题，你需要了解字体的知识。在CSS中，英文字体有五种：第一种，Serif[?ser?f]：一种衬线字体，每个字母的边缘都有一个小笔画。它们营造出一种正式而优雅的感觉。例如：TimesNewRoman[?r??m?n]、Georgia[?d???d??]、Garamond。第二类，Sans-serif：无衬线字体，线条简洁，即没有小笔画。它们营造出现代简约的外观。如Arial、Verdana、Helvetica。这个Helvetica字体还被拍成一步到位的电影——《传奇字体 Helvetica》。第三类，Monospace：单行距字体，所有字母具有相同的固定宽度，因此也称为等宽字体，具有机械外观。一般我们会在代码编辑器中使用这些字体。如CourierNew、LucidaConsole、Monaco。第四类，草书：草书字体，模仿人的笔迹。比如BrushScriptMT，LucidaHandwriting。第五类，奇幻：奇幻字体是装饰性和娱乐性的字体。比如Copperplate、Papyrus，相对于英文字体，大家可能对中文字体更熟悉一些。CSS中，中文字体名称有哪些？在中文网站中，常见的中文字体有两种：微软雅黑、微软雅黑；平房SC，平房间。分别应用于Windows系统和Mac系统。说到这里你可能会问，中华文化博大精深，中文字体也琳琅满目，为什么只用这两种字体呢？因为CSS中设置的字体名称需要用户电脑上存在该字体。如果你想使用任何字体，我们会在后面的课程中给你答案。如何查看我的计算机上安装了哪些字体？以chrome浏览器为例，点击这个图标，然后点击设置，选择外观，自定义字体。有标准字体、衬线字体、无衬线字体和等宽字体的设置。单击任何下拉框以查看计算机中的字体。让我们举个例子。创建文件夹006-css-fonts，在文件夹中创建font-family-size.html文件，构建基础代码，添加h1,h3,p三个元素，分别填写一些文字。新建一个mystyle-1.css文件，定义h1选择器，声明样式font-family：PingFangSC。定义h3选择器并声明样式font-family：Copperplate。定义p选择器，声明样式font-family：仿宋体。再次强调，这里的字体名称必须在浏览器本机中存在才能生效！将样式文件导入页面。在浏览器中预览页面，标题和段落应用了不同的字体。你可能会问，如果我在CSS中设置的字体名称在用户的电脑中不存在怎么办？我们可以为他定义几个样式选项。比如用户电脑中没有h3的Copperplate，可以在前面加一个BrushScriptMT字体，用逗号隔开。让我们看看，笔刷脚本MT字体应用于文本。假设这个字体不存在，在前面再添加一个字体CourierNew。让我们再看一遍，文本应用了CourierNew字体。这说明前面定义的字体先生效。如果用户计算机上不存在定义的字体，浏览器将使用默认字体。当然默认字体也是可以自定义的。一般情况下，建议将有多个字名的字体用单引号或双引号括起来。接下来，让我们设置字体的字体大小。文字字体大小，即文字的大小，在网页设计中非常重要。它可以使网页的文字排版层次分明，易于阅读，增强用户体验。在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元素的文本大小是相对于浏览器的默认字体大小——即16px。所以，2em大小仍然是32px。在浏览器中验证，字体大小没有变化！当我们调整浏览器的字体大小时，段落的文字变大了！这表明相对单位允许用户更改浏览器中文本的大小。除了em之外，还可以使用百分比(%)的单位，它计算文本的大小相对于父元素的大小。用法和效果与em类似。例如，将p元素的字体大小定义为200%。此时，段落文本的大小仍然是32像素。刚才我们提到，em表示的文字大小是根据继承父元素的大小计算出来的。如果嵌套元素层数太多，父元素的font-size的值也在em中设置，父元素的font-size的值仍然在em中设置，这使计算更加麻烦。有更好的解决方案吗？答案是：使用相对单位rem。rem，全称是Relativetotherootelement，相对于根元素。这样我们就不用像em一样去计算那么多祖先元素的大小了。那么，html文档的哪个元素是根元素呢？没错，就是html元素。在style中，定义html元素，声明stylefont-size:16px。注释掉之前的代码，声明font-size属性值为2rem。看效果，段落文字的大小还是32像素。文章配套视频链接：https://www.bilibili.com/video...
