Question

我在正文中添加了一个谷歌字体字体系列，但它似乎并没有改变一切。事情就是当我单独放置＆＃34; font-family：＆＃39; Quicksand＆＃39;，sans-serif;＆＃34;在每个css花括号（标题，jumbotron等）中出现新字体。

那么有人可以解释一下为什么我的页面没有拾取正文字体系列吗？这真让我很沮丧。感谢

index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title></title>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
            <link href='https://fonts.googleapis.com/css?family=Quicksand:400,300' rel='stylesheet' type='text/css'>
            <link href="css/styles.css" type="text/css" rel="stylesheet"/>
            <link href="css/bootstrap.css" rel="stylesheet">

        </head>
        <body>
            <main>
                <header>
                        <div class="row">
                            <div class="col-lg-6 col-sm-1 col-xs-4">
                                <img class="logo" src="" alt="Logo">
                            </div>
                            <div class="col-lg-6 col-sm-11 col-xs-8 title">

                                <h1>Testing</h1>
                                <h4>Front-End Ninja</h4>

                            </div>
                        </div>
                </header>
                <hr id="line">
                <section>
                    <div class="jumbotron">
                      <div class="container">
                          <h1>Hello, world!</h1>
                          <p>...</p>
                      </div>
                    </div>
                </section>
                <hr id="line">
                <section id="showcase">
                    <div class="row">
                      <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                          <img src="..." alt="...">
                          <div class="caption">
                            <h3>Appify</h3>
                            <p>...</p>
                          </div>
                        </div>
                      </div>

                        <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                          <img src="..." alt="...">
                          <div class="caption">
                            <h3>Title Two</h3>
                            <p>...</p>
                          </div>
                        </div>
                      </div>

                        <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                          <img src="../images/DeathtoStock_Wired7.jpg" alt="...">
                          <div class="caption">
                            <h3>Title Three</h3>
                            <p>...</p>
                          </div>
                        </div>
                      </div>
                    </div>


                </section>
            </main>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.js"></script>
        </body>
    </html>

的style.css

html, body {
    padding: 0;
    margin: 20px;
    font-family: 'Quicksand', sans-serif;
}

header {
    padding: 30px;
}

.logo {
    height:100px;
    width:100px;
    border: 5px solid #f8981c;
    border-radius: 100px;
}

.title {
    text-transform: uppercase;
    text-align:right;
    font-weight: 900;
    margin: ;
    padding: 0;
}

#line{
  border:0px;
  height:4px;
  width:95%;
  background:#BCBBBB;
}

.jumbotron {
    background: url(../images/DeathtoStock_Wired7.jpg) center center no-repeat;
    background-size: cover;
    height: 500px;
    margin: auto;
}

.thumbnail {
    text-transform: uppercase;
}

Answer 1

将styles.css放在bootstrap.css链接之后，因为引导程序在正文上定义了一个覆盖你的字体系列

CSS：body中的font-family不适用于页面上的任何内容

1 个答案: