html - 为什么我的@font-face 不工作？

Question

我很困惑为什么这段代码对我不起作用。我正在尝试将图标添加到我的标签中，但是当我从我的网站文件中调用该字体时，它们似乎无法用于我尝试放入的任何内容。我正在尝试将图标插入到我的 . showMenu ，但由于某种原因，它不起作用。我已将字体文件上传到我的服务器，@font-face 中的 url 是正确的，但它不想工作。请帮忙!

HTML:

<div class="column">

<span class="showMenu" id="showMenu"></span>

</div>

CSS:

@font-face {

font-weight: normal;

font-style: normal;

font-family: 'icomoon';

src:url('../fonts/icomoon/icomoon.eot');
src:url('../fonts/fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/fonts/icomoon/icomoon.ttf') format('truetype'),
    url('../fonts/fonts/icomoon/icomoon.woff') format('woff'),
    url('../fonts/fonts/icomoon/icomoon.svg#typicons') format('svg');

}

.showMenu {

font-size: 22px;

padding-left: 10px;

padding-right: 10px;

background: #ed8151;

font-family: 'icomoon';

border: 1px solid #e86a32;

border-radius: 3px;

}

.showMenu:before {

content: "\e6b8"

}

Answer 1

我四处寻找，发现每个字体文件都需要一个完整的文件路径，而不是一个缩短的路径。它应该是这样的:

CSS:

@font-face {

font-weight: normal;

font-style: normal;

font-family: 'icomoon';

src:url('http://yoursite.com/fonts/icomoon/icomoon.eot');
src:url('http://yoursite.com/fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
    url('http://yoursite.com/fonts/icomoon/icomoon.ttf') format('truetype'),
    url('http://yoursite.com/fonts/icomoon/icomoon.woff') format('woff'),
    url('http://yoursite.com/fonts/icomoon/icomoon.svg#typicons') format('svg');

}