为什么我不能在我的网站中更改标题的字体？ [关闭]答案

【问题标题】：Why cant I change the font of the title in my website? [closed]为什么我不能在我的网站中更改标题的字体？ [关闭]
【发布时间】：2018-04-15 10:52:44
【问题描述】：

我正在使用 xampp 做我的第一个网站，但在更改其上文本字体的特定部分时遇到了问题。我设法更改了整个正文的字体，但我想要标题的不同字体，我所做的是在 css 中创建一个带有字体名称的规则，然后在我想要更改的部分中使用它（h1） .这可能是一个愚蠢的错误，请原谅我的无知。

body {
  font-family: 'Lato', sans-serif;
}

img {
  max-width: 100%;
}

.quitar-float {
  float: none;
}

.espacio-arriba {
  /*margin-top: 100px*/
}

.pacifico {
  font-family: 'Pacifico', cursive;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="//fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type='text/ccs'>
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type='text/ccs'>

<div class="col-nd-3 center-block quitar-float text-center espacio-arriba" id="principal">
  <img src="imgs/descarga.png">
  <h1 class= "pacifico">hello world</h1>
  <h2>This is my first website</h2>
  <nav>
    <a href="http://google.com">Galerie</a>
    <a href="http://facebook.com">About</a>
  </nav>
</div>

【问题讨论】：

不，我想更改
标签而不是网站的实际标题。
@NadiaRodriguez 它似乎工作得很好。
@Kushtrim 当我加载网站时，我对所有内容都有相同的字体。
我也无法重现该问题。能否提供该页面的链接？
@NadiaRodriguez 这类错误通常意味着其他一些 CSS 覆盖了您的 CSS，或者您的 CSS 一开始就没有得到应用。与浏览器中的inspect element tool 交朋友，看看到底发生了什么。如果您的样式被覆盖，它将显示它被划掉；如果它没有被应用，它根本不会显示。

标签： html css fonts xampp

【解决方案1】：

简单快速的回答。你做的一切都是正确的，但你的 h1 标签中 = 和 ".

试试：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="ccs/main.ccs">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type='text/ccs'>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type='text/ccs'>
    <title>The best site in the world</title>
</head>

<body>
    <div class="col-nd-3 center-block quitar-float text-center espacio-arriba" id="principal">
        <img src="imgs/descarga.png">
        <h1 class="pacifico">hello world</h1>
        <h2>This is my first website</h2>
        <nav>
            <a href="http://google.com">Galerie</a>
            <a href="http://facebook.com">About</a>
        </nav>
    </div>
</body>

</html>

它应该可以工作。

【讨论】：

【解决方案2】：

body{
    font-family: 'Lato', sans-serif;    
}
img{
    max-width: 100%;
}
.quitar-float{
    float:none;
}
.espacio-arriba{
    margin-top:100px
}
.pacifico{
    font-family:'Pacifico', cursive;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="ccs/main.ccs">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type='text/ccs'>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type='text/ccs'>
    <title>The best site in the world</title>
</head>
<body>
    <div class="col-nd-3 center-block quitar-float text-center espacio-arriba" id="principal"> 
        <img src="imgs/descarga.png">
        <h1 class="pacifico">hello world</h1>
        <h2>This is my first website</h2>
        <nav>
            <a href="http://google.com">Galerie</a>
            <a href="http://facebook.com">About</a>
    </nav>
    </div>

</body>
</html>

【讨论】：

【解决方案3】：

那个很棘手...试试这个：<h1 class="pacifico">hello world</h1> 你在class=和"pacifico"之间加了一个空格

虽然这是一个愚蠢的错误，但它每天都会发生在有经验的开发人员身上，所以别管它了。

编辑：虽然在代码中保留此空间可能适用于较新的网络服务器，但较旧的网络服务器不支持它。

【讨论】：

This post 说“允许任何数量的空格，并且可以在所有浏览器中使用”。 ¯\_(ツ)_/¯
@DeveloperTK 服务器是如何关联的？是 浏览器 呈现 HTML
过去的旧网络服务器只向您传递 HTML 文本。较新的将它们作为说明提供。所以它不适用于像 Apache 1.4 这样的一些服务器

【解决方案4】：

在你的类 .pacifico 你需要定义你正在谈论的 h1 标签。

应该是这样的：

.pacifico h1 {
font-family: 'Pacifico', cursive;
}

【讨论】：

我想更改网站上出现的第一个文本的字体，而不是实际的标题标签。抱歉，我不清楚。
@NadiaRodriguez 我编辑了我的答案，向您展示需要做什么。

标签而不是网站的实际标题。