Question

我正在为某人创建一个简单的网站，我想在其中加入一些自定义字体，即Open Sans Condensed Light / Bold。

字体确实已加载。但不在页面的第一次加载上。您必须点击页面上的其中一个链接才能加载自定义字体，或者必须访问该网站并完成之前。

这显然是一个问题，因为第一次访问者将面对一个丑陋的网站。在firebug中检查不工作的网站时，font-family css部分有一个灰色的名称，这意味着它由于某种原因没有被激活。

我在CSS中使用以下代码：

@font-face {
    font-family: 'OpenBold';
    src: url('opensans-condbold-webfont.eot');
    src: url('opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-condbold-webfont.woff2') format('woff2'),
         url('opensans-condbold-webfont.woff') format('woff'),
         url('opensans-condbold-webfont.ttf') format('truetype'),
         url('opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSansLight';
    src: url('opensans-condlight-webfont.eot');
    src: url('opensans-condlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-condlight-webfont.woff2') format('woff2'),
         url('opensans-condlight-webfont.woff') format('woff'),
         url('opensans-condlight-webfont.ttf') format('truetype'),
         url('opensans-condlight-webfont.svg#open_sanscondensed_light') format('svg');
    font-weight: normal;
    font-style: normal;

}


body, html{
    font-family:"OpenSansLight";
    margin:0;
    padding:0;  
    background-image:url(../images/sintbg1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;    
}

我确实包含了样式表。我的<head>看起来像

<meta charset="utf-8">
<title>Sinterklaas <? echo $titel?></title>
<base href="http://www.mywebsite.info">
<link href="css/style.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">

任何人都知道我可以改变什么来使这项工作？也许我忽视了什么？我已经挣扎了近一个星期了。

Answer 1

我找到了问题的答案。它与我的基础href有关。

它曾经是我网站的href。将其更改为：

<base href="http://<? echo $_SERVER['HTTP_HOST']; ?>" />

解决了我的问题。当“www”放在href或其他东西前面时，只会加载字体。无论如何，我希望这有助于某人！几个星期以来，我一直在寻找答案。

主页首次访问时未加载自定义CSS字体

1 个答案: