css 字体在OSX Safari中不工作的真棒图标

kuuvgm7e  于 2023-01-14  发布在  其他
关注(0)|答案(9)|浏览(197)

我的font-awesome图标在Firefox和Chrome中运行良好,但在Safari中,我只看到其中一些图标有空白,而其他图标则没有。屏幕截图:

正如您所看到的,fa-twitterfa-instagram和其他图标没有显示,无论是在Font Awesome网站上,还是在我尝试将它们与<i class="fa fa-instagram"></i>一起使用时。
真的很奇怪,我已经清理了我的缓存十几次,不能找出还有什么可能出错。
有什么想法吗?

vsnjm48y

vsnjm48y1#

可能还有另一个问题在起作用--我也遇到过类似的问题,自定义生成的图标集(使用字体自定义)会在Chrome、Firefox和一些版本的Safari中显示,但在iOS版本中不会显示。我确保我没有启用弹出窗口拦截器,但仍然遇到这个问题。
通过一些研究,我发现将此属性添加到图标字体的CSS中可以解决这个问题:

text-rendering: optimizeLegibility;

添加此属性后,在所有浏览器中的呈现都可以正常工作。

u5i3ibmn

u5i3ibmn2#

您是否在Safari中安装了广告拦截插件?
根据字体真棒文档,社交网络的图标可以用这样的插件阻止.

ergxz8rk

ergxz8rk3#

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">
gcxthw6b

gcxthw6b4#

你使用的是最新版本的Chrome吗?他们现在有一个定制版本的web-kit,一个叫做Blink的分支,所以即使他们在Chrome中显示,现在,你可能需要检查另一个web-kit浏览器来确定。
还有,可怕的IE是什么?它们在那里显示吗?
我通常必须真正“重置Safari”,而不是仅仅清除该高速缓存才能真正清除缓存!

ux6nzvsh

ux6nzvsh5#

试试这个,我很喜欢.

@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;
}
1rhkuytd

1rhkuytd6#

在我的情况下,我有错误的字体家族的品牌图标。
我的旧CSS:

font-family: "FontAwesome";

我的新(工作)CSS:

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

这应该有助于任何人谁是使用旧代码和有问题显示品牌图标(推特,Facebook等)

iq3niunx

iq3niunx7#

尝试清除您的缓存,我有这样的事情发生在我身上一次之前,它是固定的后,我清除我的缓存(我用的是Chrome浏览器虽然)。

j0pj023g

j0pj023g8#

我发现,如果有一个覆盖svg样式的width: auto; height: auto,svg(或字体真棒图标)将不会显示在Safari中。
设置宽度和高度值或使用width: inherit; height: inherit

mfpqipee

mfpqipee9#

我知道已经过去很多年了,但是对于仍然处理这个问题的任何人来说,您只需在href of
之前:

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

之后:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css?v=1234" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

感谢@animaster提供答案:www.example.comhttps://github.com/FortAwesome/Font-Awesome/issues/7770#issuecomment-346301072

相关问题