导航栏字体

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 /类/元素）一起使用

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>