文件中的字体不起作用，使用@font-face答案

【问题标题】：Font from a file doesn't work, using @font-face文件中的字体不起作用，使用@font-face
【发布时间】：2021-08-27 14:03:18
【问题描述】：

这是我的 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
-->Media --> Fonts--> Flipps --> 一个带有样式表的演示 html，以及两个名为 Flipps-regular-webfont.woff/woff2 的字体文件
--> 样式--> style.css

]

网站如下所示： Wrong font

看起来应该是这样的： Good font

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

【问题讨论】：

你确定字体的路径正确吗？

标签： html css bootstrap-4 fonts font-face

【解决方案1】：

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

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

【讨论】：

不是这样命名的，我的 VSCode 就是这样显示的，如果我添加另一个文件夹，它将看起来像这样link

【解决方案2】：

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

【讨论】：

所以我在做 url 时应该有完全相同的大小写？我现在会尝试并很快回信。编辑：它什么也没做...... :(

【解决方案3】：

我明白了！！！

这是一个错字

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

我只需要把它改正为

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

感谢您的回复：D

【讨论】：