Question

您好我对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

是的，我的文件客户端中的版本与脱机版本相同

Answer 1

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

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

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

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

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

更好的是，跳过http / https并使用//fonts.googleapis.com使用与页面相同的协议来请求资源

Answer 2

更改

Do Until Application.CalculationState = xlDone Application.Calculate While Application.CalculationState <> xlDone MsgBox Application.CalculationState DoEvents Wend Loop

删除http协议，使其显示为： // fonts.googleapis.com

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

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

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

Answer 3

您可以尝试更改此行：

 Dim x as String   
 x = DataGrid1.RowBookmark(row)
 Msgbox DataGrid1.Columns(cols).CellValue(x)

要：

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

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

通过离开http：off，您将允许您的页面在您的页面安全时安全地请求CSS，如果页面使用http，则使用纯HTTP。

Answer 4

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

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

解决问题的一种简单方法是更改

<input class="span2" id="datum" name="datum" type="text" value="<?php echo date("d.m.Y"); ?>" required> <button class="btn" type="button">Heute</button>

到

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

Answer 5

您可以下载字体并使用css来设置＆＃34;设置＆＃34;它，你可以在此之后将它用作普通字体。

subprocess.call(['dir'])         # for windows

然后使用它：

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

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

5 个答案: