图标字体未在 Windows Chrome 上呈现答案

【问题标题】：icon font not rendering on Windows Chrome图标字体未在 Windows Chrome 上呈现
【发布时间】：2014-05-23 00:02:02
【问题描述】：

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

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

在 Windows Chrome 上，图标根本不会出现（没有矩形符号或任何东西）。如果我将字体更改为其他字体，它将显示矩形缺失字形符号，但使用 Entypo 作为字体系列中的第一个将不会显示任何内容。另外，如果我在“content:”中输入“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;
}
}

【问题讨论】：

可以添加源代码吗？
我们需要看代码，最好包括@font-face声明。
更新源代码
添加 woff 放在第一位...eot 应该放在最后

标签： css webfonts

【解决方案1】：

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

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

【讨论】：