Question

我正在使用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>

Answer 1

简单快捷的回答。你做的每一个都是正确的，但你和/和＃34;之间的h1标签中有一个空白。

尝试：

＆＃13;

<!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>

＆＃13;

它应该有用。

Answer 2

那个很棘手......试试这个：<h1 class="pacifico">hello world</h1> 您在class=和"pacifico"

之间加了一个空格

虽然这是一个愚蠢的错误，但每天都会遇到经验丰富的开发人员，所以请忘记这一点。

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

Answer 3

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 4

在您的班级.pacifico上，您需要定义您正在谈论的是h1标签。

应该看起来像：

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

为什么我不能改变我网站上的标题字体？

4 个答案: