Question

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

可以找到网站的实时链接HERE，但是对于将来的用户，我会在问题得到解答后立即将其删除

css font

<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

您已在CSS中调用了字体font-family: 'myfamily';，但您在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一个名字（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;
   ...
}

希望这会有所帮助

为什么@ font-face无效

5 个答案: