html - 如何更改样式表中所有页面的字体？

Question

我正在建立一个基本的网站，我已经走得很远了，但我偶然发现了一个问题:我希望我所有的标题都使用“Arvo”字体，但出于某种原因，只有索引页标题中有 Arvo。因为我所有的页面都链接到样式表，所以我应该能够将每个 h1 更改为这种字体。

这是我的样式表的样子，里面可能有一些不必要的代码，但我完全是个初学者。

body {
  background: url("https://www.xmple.com/wallpaper/streaks-lines-red-stripes-1920x1080-c4-7f2a33-972c36-b02c39-cb2b3b-l4-45-72-116-187-a-135-f-1.svg") center center repeat;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
}

#wrap {
  width: 54%;
  margin: auto;
  background: #fff2f9;
  overflow: hidden;
  padding: 15px;
}

div {
  width: 300px;
  height: 2000px;
  background-color: white;
  box-shadow: inset 0 100px 100px #ffffff, 0 10px 15px #000;
}

p {
  color: black;
}

h1 {
  font-family: 'Arvo', Georgia, Times, serif; 
  font-size: 59px;
  line-height: 70px;
}

p {
  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 25px;
}

b {
  font-family: "verdana", sans-serif; color: gold;
  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

a {
  font-family: "verdana", sans-serif; 
  color: black /* unvisited link */
}

/* visited link */
a:visited {
  color: black;
}

/* mouse over link */
a:hover {
  color: gold;
}

/* selected link */
a:active {
  color: black;
}

}

要更改所有 HTML 页面上的字体，我还需要做什么？

Answer 1

也许样式被覆盖了，因此使用 !important 来修复它。对所有标题使用以下 CSS:

h1, h2, h3, h4, h5, h6 {
font-family: Arvo, Georgia, Times, serif !important; 
font-size: 59px;
line-height: 70px;
}

如果您只想将它​​应用于 h1，请删除其余标题。因此，在您说“所有标题”的问题中，我添加了所有标题级别。

更新:尝试将字体链接到您的页面，将以下内容放入 head 元素中:

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Arvo" />

或者导入字体。将以下行放在 CSS 的最开头:

@import url('href="//fonts.googleapis.com/css?family=Arvo');