Question

我的自定义CSS

@font-face {
    font-family: 'DINAlternateBold';
    src: url(./fonts/din/DINAlternateBold.otf);
    }

h4.DINAlternateBold-font {
    font-family: 'DINAlternateBold', sans-serif !important ;
    }

html标记

<h4 class="DINAlternateBold-font text-uppercase">Dashboard</h4>

当前其在控制台中的显示如下，但我想用自定义字体文件覆盖

font-family": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'

Answer 1

确保指向css的链接位于指向引导的链接之后，这将有助于您覆盖它。例如：

<html lang="" dir="ltr">
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="style.css"> <!-- Your Style -->
  <body>

  </body>
</html>

Answer 2

使用!important会覆盖引导程序定义

@font-face {
    font-family: 'DINAlternateBold';
    src: url(./fonts/din/DINAlternateBold.otf);
    }

h4.DINAlternateBold-font {
    font-family: 'DINAlternateBold', sans-serif !important ;
    }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<h4 class="DINAlternateBold-font text-uppercase">Dashboard</h4>
<h4 class="text-uppercase">I am without override</h4>

但是您可以在没有!important的情况下将样式表文件链接放在引导程序链接/脚本之后

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
//Your file link
<link rel="stylesheet" href="yourStyle.css">

如何覆盖引导字体家族？

2 个答案: