在解决方案中,我指定了 font-family:Helvetica, Arial, sans-serif;。因此,浏览器首先尝试渲染 Helvetica 字体。在 Mac 上也同样适用,因为 Helvetica 是随操作系统一起打包提供的标准字体。但是,在 Windows 和 Linux 机器上,默认情况下这些操作系统可能(无法)支持 Helvetica 字体,因此浏览器会尝试使用 Arial 字体。如果没有 Arial 字体,则浏览器将使用任何可用的 sans-serif 字体。
<!DOCTYPE html>
<!-- Instructions: Replicate the same styling seen in the Udacity text below. -->
<html>
<head>
<title>Style the Font Quiz</title>
<style>
.udacity-text {
/* add CSS here */
font-family: Helvetica, Arial, sans-serif;
color: #8001ff;
text-decoration: underline;
text-transform: uppercase;
font-size: 60px;
}
</style>
</head>
<body>
<h1 class="udacity-text">udacity</h1>
</body>
</html>
font-family 属性用于将字体更改为 Helvetica、Arial 或者是安装在操作系统上的默认 sans-serif 字体。
接下来,font-size 属性用于放大字体, text-transform 和 text-decoration 属性用于将文本变成大写形式和为文本加下划线。
最后,color 用于将颜色更改为在如下解决方案图片中所看到的紫色。
请查看更改颜色前后的对比:

网友评论