javascript - 为什么我的字体只出现在我网站的一个部分

Question

所以基本上我使用的是来自 dafont.com 的名为 merkur 的字体，我下载了它并将其添加到我的文件中。后来字体出现了，但发生了一些奇怪的事情。我视频顶部的文字变得很奇怪，但当我查看视频顶部的字体时，字体很好。发生了什么事，我该如何解决这个问题

我已经检查过是居中问题还是字体大小问题。

<div class="bgsection">
        <div class="video-container">
            <video autoplay loop muted>
                    <source src="BGVIDEO.mp4" type="video/mp4">
            </video>            
        </div>

        <div class="color-overlay"></div>

        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <img class="logo" src="\Ahmed,Shahriyar\2019-2020\Computer-Science-3\Assignments\01-Project-Portfolio\3-Logos-and-Layout\Logo1.png" width="150" height="70">
                    <span class="open-slide">
                      <a href="#" onclick="openNav()">
                        <svg width="30" height="40">
                            <path d="M0,8 40,5" stroke="black" stroke-width="6"/>
                            <path d="M0,17 040,14" stroke="black" stroke-width="6"/>
                            <path d="M0,26 40,23" stroke="black" stroke-width="6"/>
                        </svg>
                      </a>
                    </span>
                </div>
            </div>  
            <div id="mySidebar" class="sidebar">
                  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
                  <a href="#">Home</a>
                  <a href="#">Portfolio</a>
                  <a href="#">About</a>
                  <a href="#">Contact</a>
            </div>
        </nav>
        <div class="text-overlay" >
                <h1>KS DESIGNS</h1>
        </div>



  </div>
 <center>KS DESIGN  KS DESIGN KS DESIGN KS DESIGN KS DESIGNS </center> 
<script>
    function openNav() {
      document.getElementById("mySidebar").style.width = "450px";
      document.getElementById("main").style.marginright = "450px";
    }

    function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.marginright= "0";
    }

      // Show loading animation.
      var playPromise = audio.play();

      if (playPromise !== undefined) {
        playPromise.then(_ => {
          // Automatic playback started!
          // Show playing UI.
        })
        .catch(error => {
          // Auto-play was prevented
          // Show paused UI.
        });
      }


</script>

CSS

    @font-face {
        src: url("Merkur.ttf");
        font-family: Merkur; 
        }
    body {
      font-family: "Merkur";
      margin: 0px;
      overflow-x:hidden;
      font-size: 72px;
         }
    ul {
        list-style-type: inline;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: -webkit-linear-gradient(left, #00d2e9 0%,#045962 100%);
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        wth: 100%;
        z-index: 99;
         }

    li {
        float: left;
        margin-right: 80px;
        font-size: 30px;
    }

    li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none ;
    }

    li a:hover {
       background-color: #000000;
       color: white;
    }
    .sidebar {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      right: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
      opacity: 0.9;
      text-align: center;
    }

    .sidebar a {
      padding: 50px 8px 8px 32px;
      text-decoration: none;
      font-size: 50px;
      color: white;
      display: block;
      transition: 0.3s;
    }

    .sidebar a:hover {
      color: #a38313;
    }

    .sidebar .closebtn {
      position: absolute;
      top: 0;
      right: -25px;
      font-size: 36px;
      margin-right: 50px;
    }

    .openbtn {
      font-size: 20px;
      cursor: pointer;
      background-color: #111;
      color: white;
      padding: 10px 15px;
      border: none;
    }

    .openbtn:hover {
      background-color: #444;
    }

    #main {
      transition: margin-right .5s;
      padding: 16px;
    }

    /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
    @media screen and (max-height: 450px) {
      .sidebar {padding-top: 15px;}
      .sidebar a {font-size: 18px;}
    }
    .navbar{
        background-color: #f6c399; 
        margin: 0px; 
        padding: 0px;
        z-index: 2;
        top: 0;
        width: 100%;
    }
    .logo{
        margin: 0px;
    }
    .video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1; 
    }
    .bgsection {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      overflow: hidden;

    }
    .bgsection nav{

      height: 80px;
    }

    .video-container video{
        min-width: 100%;
        min-height: 100%;

    }
    .color-overlay{
      height:100vh;
      position: absolute;
      top:0;
      left:0;
      width:100vw;
      z-index:1;
      background-image: linear-gradient(#a38313, black);
      opacity:0.55;
    }
    .open-slide{
        margin-top: 25px;
        right: 20px;
        position: absolute;
    }
    .text-overlay{
      align-self: center;
      text-align: center;
      width: 100%; 
      z-index: 2;
      position: absolute;
      font-size: 72px;
      color: black;
    }

Answer 1

声誉低，无法添加评论

我的调试建议:
我熟悉 Chrome，所以我建议打开开发人员工具，选择标题文本并使用属性窗口查找字体系列的设置方式。一个可能的问题可能是 <h1>被其他一些 css 设置为不同的字体系列

您可以通过创建一个显示正在发生的事情的 jsfiddle 或笔来改进您的问题