为什么@ font-face无法正常工作

Question

我有一个非常令人沮丧的问题。 我正在尝试将字体安装到我正在构建的网站上，但是该字体似乎不起作用。 对于所有不同的浏览器，我都有所有不同的字体格式。 我的代码如下。

您可以在此处找到该网站的实时链接，但是对于将来的用户，一旦问题得到解决，我将立即删除它。

CSS字体

<style>

@font-face {
font-family: 'myfamily';
src: url('segoeuil.eot');
src: url('segoeuil.eot?#iefix') format('embedded-opentype'),
     url('segoeuil.woff2') format('woff2'),
     url('segoeuil.woff') format('woff'),
     url('segoeuil.ttf') format('truetype'),
     url('segoeuil.svg#segoe_uilight') format('svg');
font-weight: normal;
font-style: normal;

}

HTML代码

<ul class="bxslider">
<li style="background-image: url(images/slide1.png);"><div style="text-align: center;">
<div>
  <h1 style="font-family: 'Segoe UI Light'">we are the blah blah blah</h1>
</div><h2>we are blah blah blah.</h2>
</div>
<div id="apDiv2"></div>
</li> 
<li style="background-image: url(images/slide2.png);"></li>
<li style="background-image: url(images/slide3.png);;"></li>
<li style="background-image: url(images/slide4.png);"></li>
<li style="background-image: url(images/slide5.png);"></li>
</ul>

Answer 1

您只是在调用错误的font-family名称

您需要将CSS更改为：

CSS

@font-face {
    font-family: 'Segoe UI Light';
}

使它与您的HTML中的内容匹配：

HTML

<h1 style="font-family: 'Segoe UI Light'">we are the blah blah blah</h1>

Answer 2

您已经将字体称为字体font-family: 'myfamily'; 在CSS中，但您将其引用为font-family: 'Segoe UI Light' HTML中的font-family: 'Segoe UI Light' 。

这看起来像问题。

Answer 3

设置字体家族名称相同，并且服务器字体中存在

@font-face {
font-family: 'Segoe UI Light';
src: url('segoeuil.eot');
src: url('segoeuil.eot?#iefix') format('embedded-opentype'),
     url('segoeuil.woff2') format('woff2'),
     url('segoeuil.woff') format('woff'),
     url('segoeuil.ttf') format('truetype'),
     url('segoeuil.svg#segoe_uilight') format('svg');
font-weight: normal;
font-style: normal;

}
h1,h2,h3{
  font-family: 'Segoe UI Light';
}

<ul class="bxslider">
<li style="background-image: url(images/slide1.png);"><div style="text-align: center;">
<div>
  <h1 style="font-family: 'Segoe UI Light'">we are the blah blah blah</h1>
</div><h2>we are blah blah blah.</h2>
</div>
<div id="apDiv2"></div>
</li> 
<li style="background-image: url(images/slide2.png);"></li>
<li style="background-image: url(images/slide3.png);;"></li>
<li style="background-image: url(images/slide4.png);"></li>
<li style="background-image: url(images/slide5.png);"></li>
</ul>

Answer 4

在CSS中，给字体家族起一个名字（ font-family: 'myfamily'; ），然后在HTML中，您尝试使用其他名称作为字体的目标...使这项工作有效的正确代码是：

@font-face {
font-family: 'myfamily';
src: url('segoeuil.eot');
src: url('segoeuil.eot?#iefix') format('embedded-opentype'),
     url('segoeuil.woff2') format('woff2'),
     url('segoeuil.woff') format('woff'),
     url('segoeuil.ttf') format('truetype'),
     url('segoeuil.svg#segoe_uilight') format('svg');
font-weight: normal;
font-style: normal;

}

接着

<ul class="bxslider">
<li style="background-image: url(images/slide1.png);"><div style="text-align: center;">
<div>
  <h1 style="font-family: 'myfamily'">we are the blah blah blah</h1>
</div><h2>we are blah blah blah.</h2>
</div>
<div id="apDiv2"></div>
</li> 
<li style="background-image: url(images/slide2.png);"></li>
<li style="background-image: url(images/slide3.png);;"></li>
<li style="background-image: url(images/slide4.png);"></li>
<li style="background-image: url(images/slide5.png);"></li>
</ul>

Answer 5

从字体名称中删除单引号...

@font-face {
    font-family: 'myfamily';
    ...
}

更改“ myfamily” tpo就像我的家人一样...

@font-face {
   font-family: myfamily;
   ...
}

希望这可以帮助