Question

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

适用于OSX上的Chrome，Safari和Firefox，甚至适用于Windows上的IE，但不适用于Chrome for Windows。

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

Answer 1

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

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

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

1 个答案: