html - 离线和在线时 h1 中的字体不同

您好，我对 HTML 和 CSS 还很陌生。我刚刚开始托管我的网站，自从为它安装了 SSL 证书(无论是否相关)后，我的标题字体已恢复为默认字体。当我离线打开 html 文件时，标题是适当的“Damion”字体，但是当我转到域时，情况并非如此。

该网站是 eliasmalik.com，有问题的文字是“正在开发中”

以下是该网站的 index.html 和 main.css 文件:

<!DOCTYPE html>
<html>
<head>
    <title>Elias Malik</title>
    <link rel="stylesheet" href="main.css">
    <link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
    <link rel="shortcut icon" href="diamond.ico">
</head>

    <body>
        <div class="bc">
            <h1>Under development</h1>
        </div>

                <div id= "footer">
            <div>
                <ul class ="social">
                        <li class="facebook"><a href="https://www.facebook.com/elias.malik.7"></a></li>
                        <li class="instagram"><a href="https://instagram.com/eliasrmalik"></a></li>
                        <li class="linkedin"><a href="https://uk.linkedin.com/in/eliasrmalik"></a></li>
                </ul>
        </div>

    </body>
</html>

和

 html
    {
        background: url(devbc.jpg)no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

    }

    body
    {
        position: fixed;
        overflow-y: scroll;
        width: 100%;
    }
    .bc h1
    {
        font-family: 'Damion', cursive;
        top: 40%;
        left: 49%;
        position:absolute;
        transform: translateX(-40%) translateY(-49%);
        color: white;
        font-size: 62px;


    }

    #footer{
        width: 105%;

    }


    ul
    {
    list-style-type: none;
    }

    ul.social
    {
    width: 202px;
    margin: 555px auto 0;
    height: 52px;
    }

    ul.social li{
    float: left;
    position: relative;
    height: 52px;
    margin-right: 12px;
    }

    ul.social li a{
    display: block;
    width: 52px;
    height: 52px;
    }


    ul.social li.facebook
    {
    background-image: url(facebook.png);
    }

    ul.social li.instagram
    {
    background-image: url(instagram.png);
    }

    ul.social li.linkedin
    {
    background-image: url(linkedin.png);
    }

这是页面应该如何显示的屏幕截图:
http://imgur.com/Xngv2Me

是的，我的文件客户端中的版本与离线版本相同

最佳答案

字体是 http: 不是 https:，所以它会因为不安全而阻止它。

我使用 Chrome 访问了您的网站，打开了开发工具 (F12) 并重新加载了页面。控制台中显示以下错误。

将您的字体链接从 google 更改为 https，它应该可以工作。

或者，从下面的葡萄干中获取非常合理的建议(我忘记了):

关于html - 离线和在线时 h1 中的字体不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29925856/