Question

我正在尝试在CSS中添加自定义字体，但它不起作用。

我的HTML：

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Shout!</title>
    <meta name="author" content="Jordan Baron">

    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  </head>
  <body>
    <div>
      <img src=images/logo.png alt="logo" height="54" wdth="133" class="logo">
      <hr class="divider">
      <h1 id="wis">Shout!</h1>
    </div>
    <script src="scripts.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">    </script>
  </body>
</html>

我的CSS：

@font-face {
  font-family: SanFran;
  src: url(SF-UI-Display-Thin.otf);
}

div {
  text-align: center;
}

.divider {
  margin: 0;
  padding: 5px;
}

.logo {
  margin: 0;
  padding: 5px;
}

.wis {
  font-family: SanFran;
}

我在Mac OS X上使用Bootstrap 3.我正在使用Chrome。当我不使用Bootstrap但是当我使用Bootstrap时字体不会改变

Answer 1

它不会改变，因为您在<h1>上使用了ID，但是您尝试定位的是.wis类，而不是#wis的ID。

尝试更改

.wis {
  font-family: SanFran;
}

到

#wis {
  font-family: SanFran;
}

自定义字体不适用于Bootstrap

1 个答案: