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');

}

Answer 2

看起来你的路径不正确。尝试：

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

为什么我的@ font-face无效？

2 个答案: