我们学习CSSGoogle字体和CSSIcon图标。当我们使用font-family属性声明样式字体时，除了可以使用HTML中的标准字体外，还可以使用Google字体。GoogleFonts是免费使用的，有超过1,000种字体可供选择。我们再也不用担心用户电脑上是否安装了某种字体。要使用Google字体，只需在
元素中添加一个特殊的样式表链接，这在CSS中可用。创建一个font-google-icons.html文件，构建基本代码，添加一个h1元素和三个p元素。填写一些文字。在head元素中添加一个link元素，href属性值为googleapi的css地址（https://fonts.googleapis.com/css）。在css后面加一个问号（？）来定义属性family等于一个字体名，比如Sofia。再新建一个mystyle-3.css文件，定义body选择器，声明样式font-family，值为引号Sofia和逗号serif。body{font-family:"Sofia",serif;}将这个样式文件导入页面。在浏览器中查看效果，所有的文字都应用了Sofia字体。要使用多种Google字体，只需使用管道字符(|)分隔字体名称。修改样式表链接的字体为Audiowide,verticalline,Sofia,verticalline,Trirong(Audiowide|Sofia|Trirong)（查看效果看网址：https://fonts.googleapis.com/...|outline|emboss|shadow-multiple)为三个p元素定义了class属性，取值分别为a、b、c。在样式中，定义p.a选择器并声明样式：font-family:"Audiowide",sans-serif。定义p.b选择器并声明样式font-family:"Sofia",sans-serif。定义p.c选择器并声明样式font-family:"Trirong",serif。让我们看看，三个段落应用了不同的字体。除了引用不同的字体，GoogleFonts还可以随心所欲地添加字体样式。在链接字体定义效果等于火后添加&（发音为and）符号。然后给h1添加一个class属性，值为font-effect-fire。让我们看看，标题着火了！当然，也可以像引用字体一样，通过竖线（|）引入多种效果。比如把effect的值改成neon,verticalline,outline,verticalline,fire,verticalline,shadow-multiple。(neon|outline|fire|shadow-multiple)分别给三个P标签添加class属性，取值为font-effect-neon\font-effect-outline\font-effect-shadow-multiple，看下又是效果，太炫酷了！除了GoogleFonts之外，还可以使用图标库轻松地将图标添加到我们的HTML页面中。首先给大家介绍一个图标库网站fontawesome.com（发音为fontawesomedotcom），点击登录图标。如果您没有帐户，请单击注册以注册一个。输入您的电子邮件地址，然后单击发送验证电子邮件。输入您的邮箱，打开邮件，点击验证按钮。输入密码，然后再次输入相同的密码。单击按钮。您可以输入一些个人信息，当然也可以跳过。此时，点击“CopyKitCode”按钮，复制左边的代码。返回到我们的html页面，右键单击并粘贴到链接下方。你完成了！然后你就可以使用图标了。在页面三段开头，添加三个i元素，都定义了class属性，取值为fasfa-cloud（注意中间有空格，读出来），fasfa-心，快车。看效果，你会发现每个段落的开头都加了一个小图标。更多图标，您可以访问此地址获取它们。(https://fontawesome.com/icons)你可能会想，我可以用图片来做！Icon字体图标的强大之处在于，你可以把图标当成文字，任意添加样式。为心形图标i元素定义一个样式属性，值为color:red。你会惊喜地发现图标变成了红色！如果使用img，我们必须导入另一个图像文件。字体图标在网站开发中非常有用，我们将在后续课程中更深入地研究它们。文章配套视频链接：https://www.bilibili.com/video...