Question

我想在标题中使用名为socicon（http://socicon.com/）的字体，而不是使用.png的社交图标。因此，我可以更轻松快速地设计我的图标。

所以我按照socicon网站上的说明进行操作，这是我的代码示例

// HTML

<section class="social">
                <ul>
                    <li><div class="container"><a href="https://twitter.com/xxx" target="_blank" class="icon" id="twitter">a</a></div></li>
                    <li><div class="container"><a href="https://www.linkedin.com/pub/xxx" target="_blank" class="icon" id="linkedin">j</a></div></li>
                    <li><div class="container"><a href="https://www.facebook.com/xxx" target="_blank" class="icon" id="facebook">b</a></div></li>
                </ul>
            </section>

// CSS

@font-face {
font-family: 'socicon';
src: url('fonts/socicon-webfont.eot');
src: url('fonts/socicon-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/socicon-webfont.woff') format('woff'),
     url('fonts/socicon-webfont.ttf') format('truetype'),
     url('fonts/socicon-webfont.svg#sociconregular') format('svg');
font-weight: normal;
font-style: normal;
}

.icon {
color: #ffffff;
font-family: 'socicon' !important;
font-size: 28px;
text-decoration: none;
position: absolute;
top: 1%;
padding-left: 17px;
padding-right: 17px;
padding-top: 30px;
padding-bottom: 60px;
transition: all .4s linear;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
-ms-transition: all .4s linear;
}

但是，不是想要的图标，字母a，j，b不断出现。我尝试在我的操作系统中安装字体，然后显示图标，但是一旦字体不在系统上，@ font-face调用似乎不起作用。

我错过了什么吗？

Answer 1

src必须包含../fonts/，而不仅仅是fonts/。后者适用于html，但显然不适用于CSS。

Answer 2

[...]一旦字体不在系统上，@ font-face调用就会出现似乎不起作用。

如果查看@font-face规则，您会看到src设置为相对路径（例如fonts/socicon-webfont.eot），因此，如果字体位于此位置，字体将无法解析，因此，如果字体尚未放置在您的系统/此位置，则它将无法按预期加载。

src: url('fonts/socicon-webfont.eot'); /* Local location of font */
src: url('fonts/socicon-webfont.eot?#iefix') format('embedded-opentype'), /* Local location of font */
     url('fonts/socicon-webfont.woff') format('woff'), /* Local location of font */
     url('fonts/socicon-webfont.ttf') format('truetype'), /* Local location of font */
     url('fonts/socicon-webfont.svg#sociconregular') format('svg'); /* Local location of font */

Answer 3

您需要设置自己的路径，Socicon存储在您的服务器上。也许你把Socicon字体放在一个名为stuff的文件夹中。并且你的css在他们自己的文件夹中。然后你必须写：../ stuff / socicon-webfont.eot 或者使用绝对路径：http://www.yoursite/stuff/socicon-webfont.eot

此致

昆汀

Socicon字体不显示@ font-face

3 个答案: