Question

我正在使用Font Awesome图标。所有图标都在Chrome中完美呈现。

但在Safari中，“某些图标”无法渲染。当我说它不渲染时，它不是通常的方框。它更像是为图标隐藏的CSS可见性。

当我更改开发者工具中图标的任何属性时，会显示图标。这是桌面行为。

在Ipad中，当我更改属性时，它会显示出来。此外，所有图标在横向模式下渲染完美。但在纵向模式下，某些图标不会显示。我必须将方向更改为横向，然后再返回纵向以渲染图标。

不确定如何解决？

Answer 1

我的目标是Font Awesome 4.2.0，在IIS网络服务器上本地托管。

奇怪的是，我发现使用缓存破坏程序后缀Font Awesome CSS库的路径修复了这个问题。 e.g。

font-awesome.min.css?v=1234

Answer 2

您可以为图标字体添加“text-rendering”CSS属性。

  -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{

 UIImage *image=info[UIImagePickerControllerEditedImage];
 [self emailImage:image];

[self dismissViewControllerAnimated:YES completion:^
 { 
     //perform anything after dismissing image picker controller
 }
 ];
 }

浏览器强调了渲染速度和几何精度的可读性。这样就可以使用特殊的字距调整和可选的连字信息，这些信息可能包含在某些字体的字体文件中。

Answer 3

当我遇到同样的问题时，我发现如果您安装了 adblocker 插件，可能会在safari中发生这种情况，因为font-awesome文档明确指出此插件可能会阻止某些字体很棒的图标。 / p>

您可以检查一下，但对我来说这个插件没有安装，所以我找到了第二个解决方案，它对我有用。

尝试在你的css中使用它

text-rendering: optimizeLegibility;

某些字体很棒的图标无法在Safari中呈现

3 个答案: