来自文件的字体不起作用，使用@font-face

Question

这是我的 css，我也使用 Bootstrap 4.6，但那是在 html:

    @font-face{
    font-family: fipps-regular;
    src: url(../media/fonts/flipps/fipps-regular-webfont.woff2) format('woff2'),
         url(../media/fonts/flipps/fipps-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;}

    .row h1, h2{
    color: white;
    font-family: flipps-regular, Arial, Helvetica, sans-serif;}

这是我的html:

<!DOCTYPE html>

<html lang="hu">

<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Thicc Game</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="Style/style.css">
    <link rel="icon" href="Media/Images/flushed.png" type="image/icon type">

</head>

<body class="bg-dark">
    
    <div class="container-fluid">
        
        <div class="row">
            <h1 class="mx-auto">Thicc game</h1>
        </div>

        <br>

        <div class="row">
            <iframe class="mx-auto" width="712" height="400" src="https://www.youtube.com/embed/Hnifr7k2tO4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
        </div>

        <br>

        <div class="row">
            <h2 class="mx-auto">Made by Nitro-gen Studios <img class="nitrogen" src="Media/Images/nitrogen.png" alt=""></h2>
        </div>

        <br>

        <footer>
            <div class="row">
                <a href="#" class="mx-auto"><img class="googleplay" src="Media/Images/googleplay.png" alt="Get it on Google Play!"></a>
            </div>
        </footer>

    </div>
    
    <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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</body>

</html>

我的目录是这样的：

[

Thicc Game（主文件夹）
--> Javascript
-->媒体 --> 字体--> Flipps --> 带有样式表的演示 html，以及名为 flipps-regular-webfont 的两个字体文件。woff/woff2
--> 样式--> style.css

]

1 <-- 目录图片

网站是这样的： Wrong font

应该看起来像这样： Good font

这是我第一次在 Whosebug 上提问，所以在这个问题上有些格式看起来可能不好...

Answer 1

看起来它与您的文件夹名称“fonts\flipps”有关。在您的 URL 字符串中，您有一个正斜杠，但您的文件夹名称有一个反斜杠。因此，它试图寻找一个名为“fonts”的文件夹，然后在其中寻找另一个名为“flipps”的文件夹。为了便于阅读并避免将来出现任何混淆，我会将其更改为“-”。

url(../media/fonts-flipps/fipps-regular-webfont.woff2)

Answer 2

您的“媒体”文件夹名称以大写字母（“媒体”）开头，而在 @fontface 规则的 url 中您有“../media/fonts/。 .."等等

Answer 3

我明白了！！！

这是一个错字

.row h1,h2{
font-family:flipps-regular, Arial, Helvetica, sans-serif;
}

我只需要将其更正为

.row h1,h2{
font-family:fipps-regular, Arial, Helvetica, sans-serif;
}

感谢回复:D

来自文件的字体不起作用，使用@font-face

Font from a file doesn't work, using @font-face

html

css

fonts

font-face

bootstrap-4