除了 Chrome，字体外观无法正常工作

Question

我在我的网络应用程序中使用了 Lufga 字体，但该字体在 Safari 或 Firefox 上无法正常工作。我试过使用@font-face 但它似乎不起作用，文本仍然以默认字体呈现。

对于上下文，如果相关，我会在 VS Code 上使用 Django。该项目正在开发中，尚未生产。

这是我的 styles.css （P.S。当我 cmd+单击 URL link 时，我确实找到了正确的文件，所以我想位置很好）

@font-face{
    font-family: 'Lufga';
    src: url("../styles/Lufga-Regular.otf") format("Regular");
    font-style: normal;
    font-weight: normal;
}

.Logo
{
    position: absolute;
    width: 519.61px;
    height: 135px;
    left: calc(50% - 519.61px/2 + 0.3px);
    top: calc(50% - 135px/2 - 60px);
    
}

.ComingSoon
{
    position: absolute;
    left: 38.59%;
    right: 38.59%;
    top: 51.88%;
    bottom: 44.78%;

    font-family: 'Lufga';
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 28px;
    /* or 117% */

    text-align: center;

    color: #FFFFFF;
}


.Inquiries
{
    position: absolute;
    width: 487px;
    height: 36px;
    left: calc(50% - 487px/2 + 0.5px);
    top: calc(50% - 36px/2 + 320px);

    font-family: 'Lufga';
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    /* or 156% */

    text-align: center;

    color: #FFFFFF;
}

.EmailLink
{
    font-family: 'Lufga';
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    color: #FFFFFF; 
}

这是我的 homepage.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
<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>XXX</title>
    <link rel="icon" type="image/png" href="{% static '/favicon.png' %}"/>
    <link rel="stylesheet" href="{%  static  'css/style.css'  %}">
</head>

<body>
    <div class="BackgroundShapes">
        <img src="{% static '/Background Shapes.svg' %}" alt="BackgroundShapes Not loading2">
    </div>
        <div class="Elements">
            <div class="Content">
                <nav>
                    <ul class="DocumentContent">
                        <div class="Logo">
                            <img src="{% static '/Logo.svg' %}" alt="logo not loading">
                        </div>
                        <div class="ComingSoon">
                            <p>Coming Soon...</p>
                        </div>

                            <div class="SocialMediaLogos">
                                <a class="LinkedinLogo" href="#">
                                    <img src="{% static '/Logo Linkedin.svg' %}" alt="logo not loading">
                                </a>

                                <a class="TwitterLogo" href="#">
                                    <img src="{% static '/Logo Twitter.svg' %}" alt="logo not loading">
                                </a>

                                <a class="SnapchatLogo" href="#">
                                    <img src="{% static '/Logo Snapchat.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="InstagramLogo" href="#">
                                    <img src="{% static '/Logo Instagram.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="FacebookLogo" href="#">
                                    <img src="{% static '/Logo Facebook.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="TikTokLogo" href="#">
                                    <img src="{% static '/Logo Tik Tok.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="GithubLogo" href="#">
                                    <img src="{% static '/Logo Github.svg' %}" alt="logo not loading">
                                </a>
                                
                                <a class="YoutubeLogo" href="#">
                                    <img src="{% static '/Logo Youtube.svg' %}" alt="logo not loading">
                                </a>
                            </div>

                        <div class="Inquiries">
                            <p>For any inquiries, please contact <a class="EmailLink" href="mailto: info@XXX.com">info@XXX.com</a></p>
                        </div>

                    </ul>
                </nav>
            </div>
        </div>
    
</body>
</html>

提前感谢您的帮助

Answer 1

尝试将格式设置为 opentype。您使用的是 Open Type 字体，因此您需要指定要使用的格式。

@font-face{
    font-family: 'Lufga';
    src: url("../styles/Lufga-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}

除了 Chrome，字体外观无法正常工作

Font Face is not working except on Chrome

html

css

browser

django

font-face