Question

我必须在我的网站上实施Apple符号。我已经安装了整个软件包：

AppleSymbols.woff
AppleSymbols.ttr
AppleSymbols.svg
AppleSymbols.eot

和

@font-face {
    font-family: 'AppleSymbols';
    src: url('AppleSymbols.eot?') format('eot'), 
         url('AppleSymbols.woff') format('woff'), 
         url('AppleSymbols.ttf')  format('truetype'),
         url('AppleSymbols.svg#AppleSymbols') format('svg');
}

问题是，我如何在我的网站上使用它？

Answer 1

现在您已经链接了字体，您需要做的就是

p{
    font-family: 'AppleSymbols';
}

或者您想要使用该字体的任何元素。

如果要查看该字体中的所有字符，可以在本地安装open it with FontBook (Mac)或使用Windows字符映射打开它。他们会向您展示您想要使用的任何图标/角色的unicode角色。拿这个unicode字符，然后convert it to an HTML entity.

您还应该记住，您可能没有使用AppleSymbol的许可权。我喜欢通过使用TypeKit或Google字体进行客户端工作来避免许可问题。对于符号字体，有几个很好的开放许可证，如Zurb Foundation Icons。

请注意使用@ font-face时浏览器的限制，并包括后退，如果这些图标是UI的主要元素，则包括文本标签。使用图标时，请记住屏幕阅读器/辅助功能问题。

Answer 2

您只需在网站上使用svg作为img

即可

<img src="AppleSymbols.svg" alt="Apple">

如何在我的网站上使用Apple符号？

2 个答案: