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

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

该网站 eliasmalik.com，有问题的文字是"开发中"

以下是该网站的索引.html和主要.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);
    }

这是页面应该如何显示的屏幕截图：https://i.stack.imgur.com/bxsyg.jpg

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

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

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

混合内容："https://eliasmalik.com/"处的页面已加载 HTTPS，但请求了一个不安全的样式表 'http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|达米恩'。此请求已被阻止;内容必须通过 HTTPS 提供。

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

或者，从下面的头发葡萄干中获取非常合理的建议（我忘记了）：

更好的是，跳过HTTP/HTTPS，只需使用//fonts.googleapis.com 使用与页面相同的协议来请求资源

更改

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>

删除 HTTP 协议，使其读取：//fonts.googleapis.com

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>

删除协议允许您的文件在需要时请求 http，并在需要安全文件时自动更改为 https。

因为您有 SSL，所以您需要确保所有引用都是安全的。它阻止了非安全源（您的字体），因为您指定了要通过 http 而不是 https 提供的字体。

您可以尝试更改此行：

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>

自：

<link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>

我怀疑您的浏览器可能会阻止加载该样式，因为您的页面是https（安全），但您正在从不安全的来源（http）请求CSS。

通过关闭 http：，您将允许页面在页面安全时安全地请求 CSS，如果页面使用 http，则使用纯 http。

您的 Web 浏览器正在阻止加载混合内容 - 在 https 站点上加载 http 资源。

https://developer.mozilla.org/en-US/docs/Security/MixedContent

修复它的一种简单方法是更改

http://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion

自

https://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion

您可以下载字体并使用 css "设置"它，之后您就可以将其用作普通字体。

@font-face {
font-family: yourfontname;
src: url(Yourfonturl.woff2);
}

然后使用它：

#yourid {font-family: yourfontname}

相关内容

最新更新

热门标签：