导航栏字体

Question

我在为 Mailchimp 上的电子邮件模板创建的自定义导航栏方面需要一些帮助。我不是编码员，但我设法创建了一个链接到我的网页的导航栏。但是，我相信当前在导航栏中显示的字体是 Times New Roman，我非常想将其更改为 Source Sans Pro。

当前代码如下：

<style>

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}
</style>

我要添加什么来使当前字体更改为 Source Sans Pro？

任何指导将不胜感激。

Answer 1

您必须将其链接到您的 HTML 中

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">

然后在你的 CSS 中使用任何选择器（ID/Class/Element）

font-family: 'Source Sans Pro', sans-serif;

使您的整个文档采用这种字体：

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<style>

* {
  font-family: 'Source Sans Pro', sans-serif;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}
</style>