导航栏字体

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

你必须 link 在你的 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>

导航栏字体

Navigation bar font

html

fonts

mailchimp

navigationbar