Невозможно настроить шрифты Google в css - PullRequest
Новая
       50

Невозможно настроить шрифты Google в css

0 голосов
/ 01 августа 2020

Я добавил шрифты Google в свой код. и я не могу настроить его как font-family:"Montserrat-Black или тонкий или легкий, как требуется. Я попытался связать обычный стиль, а затем изменить его, но все еще не работает. Вес шрифта тоже не работает, я также использовал bootstrap 4. весь мой код приведен ниже

HTML

  <meta charset="utf-8">
  <title>TinDog</title>

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">

  <!-- CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/7258ec066a.js" crossorigin="anonymous"></script>

  <!-- Bootstrap Scripts -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>

<body>

  <section id="title">
    <div class="container-fluid">

      <!-- Nav Bar -->

      <nav class="navbar navbar-expand-lg navbar-dark ">
        <a class="navbar-brand">tinDog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>


      <!-- Title -->
      <div class="row">
        <div class="col-lg-6">
          <h1>Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>

    </div>
  </section>

CSS

  background-color: #ff4c68;
  color: white;
}
body{
  font-family: 'Montserrat-Thin', sans-serif;
}

.container-fluid{
  padding:3% 15%;
}

h1{
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  line-height: 1.5;
}


/* Navigation Bar */

.navbar{
  padding-bottom: 4.5rem;
}

 .navbar-brand{
   font-family:"Ubuntu";
   font-size: 2.5rem;
   font-weight: bold;
 }

 .nav-item{
   padding:0 18px;
 }

 .nav-link{
   font-family:"Montserrat-Light";
   font-size: 1.2rem;
 }

В этом коде я выбрал семейство montserrat-black. В теле font-family:"Montserrat-Thin" работает, а в .nav-ссылке font-family:"Montserrat-Light" - нет. почему это так?

Ответы [ 2 ]

1 голос
/ 01 августа 2020

Семейства шрифтов не называются по весу. Вы должны использовать font-family: 'Montserrat', sans-serif; для всех из них и использовать объявления font-weight отдельно, чтобы установить вес. Например: 

font-family: 'Montserrat-Thin', sans-serif;

становится: 

font-family: 'Montserrat', sans-serif;
font-weight: 300;

Это станет ясно, если вы прочитаете CSS, который Google Fonts фактически дает вам (открыв ссылку в браузере) - вы можете видеть, что все блоки @font-face названы "Montserrat".

(Конечно, вам также нужно добавить вес 300 к ссылке Google Fonts, как сказал @Jontee: <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap" rel="stylesheet"> )

0 голосов
/ 01 августа 2020

Значит, вы импортировали только один из шрифтов. Это должно импортировать их оба: 

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap" rel="stylesheet">

Здесь вы можете выбрать шрифты, а затем выбрать встроить, и он исправит создание ссылки для вас. https://fonts.google.com/specimen/Montserrat?preview.text=monster&preview.text_type=custom&query=montserrat&sidebar.open=true&selection.family=Montserrat:wght@300

Это то, что имел в виду Мэтт. Плотность шрифта 100 - тонкая. Плотность шрифта 300 - легкая. Плотность шрифта 900 - черная. Если вы посмотрите ссылку в файле Html, она покажет различный вес. wght@100;300;900

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;900&display=swap" rel="stylesheet"> 

<style>
    .one{
        font-family: 'Montserrat', sans-serif;
        font-weight: 100
    }
    .two{
        font-family: 'Montserrat', sans-serif;
        font-weight: 300
    }
    .three{
        font-family: 'Montserrat', sans-serif;
        font-weight: 900
    }
</style>
<body>
    <h1 class="one">
        Thin
    </h1>
    <h1 class="two">
        Light
    </h1>
    <h1 class="three">
        Black
    </h1>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...