css - 图标字体无法在 Windows Chrome 上呈现

Question

我制作了使用 Entypo Social 图标字体的社交媒体分享按钮，在 CSS 中作为“content:”插入。

在 OSX 上的 Chrome、Safari 和 Firefox 上运行良好，甚至在 Windows 上运行 IE，但在 Chrome for Windows 上运行不佳。

在 Windows Chrome 上，图标根本不会出现(没有矩形符号或任何东西)。如果我将字体更改为其他字体，它将显示矩形缺失字形符号，但使用 Entypo 作为字体系列中的第一个将什么都不显示。此外，如果我在“内容:”中键入“blah”而不是也会显示的字形代码。

如何让图标出现？

Example

HTML:

<a target="_blank" class="button" href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&via=batchbook" title="Share This on Twitter">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="text">Tweet</span>
</a>

CSS:

@font-face {
font-family: "Entypo Social";
src: url('../icons/entypo/entypo-social.eot');
src: url('../icons/entypo/entypo-social.eot?#iefix') format('embedded-opentype'),
     url('../icons/entypo/entypo-social.woff') format('woff'),
     url('../icons/entypo/entypo-social.ttf') format('truetype'),
     url('../icons/entypo/entypo-social.svg#entypo') format('svg');
}

a {
    width: 44px;
    float: left;
    margin-right: 12px;
}
.text {
    visibility: hidden;
}
.icon {
    font-family: "Entypo Social";
    font-size: 1.75em;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-twitter:before { content: "\F309"; }

@media only screen and (min-width: 481px) {
    .button {
    padding: 0.25em 0.5em;
    width: auto;
    float: left;
    .text {
        visibility: visible;
    }
}
}

@media only screen and (min-width: 768px) {
    .button {
    padding: 0.25em 1em;
}
.icon {
    margin-right: 0.5em;
}
}

Answer 1

不幸的是，这是“Entypo-Social”字体和 Chrome/Chromium 的一个已知错误，尚未修复。 来源:https://github.com/danielbruce/entypo/issues/10

您可以使用 Fontello:http://www.fontello.com/