字体真棒图标在OSX Safari中不起作用

Question

我的font-awesome图标在Firefox和Chrome中运行正常，但在Safari中我只看到其中一些空白空间而不是其他人。截图：

正如您所看到的，fa-twitter，fa-instagram和其他图标只是在Font Awesome网站或我尝试与{{1}一起使用时才显示}}。

真奇怪，我已经清理了十几次我的缓存，并且无法弄清楚这里还有什么问题。

有什么想法吗？

Answer 1

可能还有另一个问题 - 我遇到了类似的问题，其中自定义生成的图标集（使用字体自定义）会显示在Chrome，Firefox和某些版本的Safari中，但不会显示iOS版本。我确保没有启用弹出窗口阻止程序，但仍然遇到了问题。

通过一些研究，我发现将此属性添加到图标字体的CSS修复了问题：

text-rendering: optimizeLegibility;

添加此属性后，所有浏览器中的渲染都能正常运行。

Answer 2

您是否在Safari中安装了广告拦截器插件？ 根据Font Awesome文档，可以使用这样的插件阻止社交网络的图标。

Answer 3

您使用的是最新版Chrome吗？他们现在有一个定制版本的网络工具包，一个名为Blink的分支，所以即使他们在Chrome中显示，如今，您可能需要检查另一个网络工具包浏览器以确定。

另外，可怕的IE是什么？他们在那里展示吗？

我通常必须实际上“重置Safari”，而不是仅仅清除缓存，清除缓存！

Answer 4

试试这个。它对我有用。

@font-face {
    font-family: 'FontAwesome'; 
    src: url('../fonts/fontawesome-webfont.eot?v=4.4.0'); 
    src:url('../fonts/fontawesome-webfont.eot #iefix&v=4.4.0') format('embedded-opentype'), 
        url('../fonts/fontawesome webfont.woff2?v=4.4.0') format('woff2'), 
        url('../fonts/fontawesome webfont.woff?v=4.4.0') format('woff'),
        url('../fonts/fontawesome webfont.ttf?v=4.4.0') format('truetype'),
        url('../fonts/fontawesome webfont.svg?v=4.4.0#fontawesomeregular') format('svg'); 
    font-weight: normal; 
    font-style: normal;
}

Answer 5

似乎Safari阻止了未签名的字体。结合使用CDN可以解决此问题：

对于很棒的字体，我使用了以下链接，该链接位于https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Answer 6

尝试清除你的缓存，我之前遇到过这种情况，并且在我清除缓存后修复了它（我使用的是Chrome）。

Answer 7

当我在一个网站上禁用Adblocker时，肯定是Adblocker我修复了它的问题

Answer 8

这发生在我们的网站上，即使是非品牌图标，FontAwesome fa-share-square-o，\ f045。这是由广告拦截器引起的。一旦我们的网站列入白名单，就会出现图标。

Answer 9

就我而言，我的品牌图标字体系列错误。

我的旧CSS：

font-family: "FontAwesome";

我新的（有效的）CSS：

font-family: "Font Awesome 5 Brands";
font-weight: 900;

这应该可以帮助使用旧代码并在显示品牌图标（Twitter，Facebook等）方面有问题的人