iPad/Mac Safari不会加载字体

我一直在面对这个奇怪的问题SAFARI浏览器的iPad和Mac机与我的应用程序（部署在IIS上）。虽然，每当我尝试编辑Developer Tools的Resources选项卡中的CSS时，字体突然加载并停留。即使CSS中的单个空间编辑也会加载字体。一切工作正常Safari的Windows。iPad/Mac Safari不会加载字体

除此之外，如果我继续在我的Safari应用程序的页面上工作，字体将在随机时间（时间从10秒到10分钟或更长时间）后加载到页面上，然后待在那里直到缓存为止擦掉。

我已经试过几件事情来解决这个问题：

从@font-face声明中删除引号，因为我读过的地方，Safari浏览器将不会加载引号的字体。没有成功，尽管firefox停止渲染字体，因为引号是必要的。
检查了MIME-Type在IIS上的.svg文件类型。没有成功。
验证ID为.svg来自字体文件的声明。没有成功。
提取@font-face将所有字体声明为独立文件，并将其作为<head>标记中最上面的CSS声明。
在浏览器被检测为SAFARI后尝试移除并推入CSS标签。这件事情有效，但是是一个讨厌的黑客。该代码下面引用

CODE：

var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; 
if (isSafari) { 
    if ($('#fontCss').length) { 
     $('#fontCss').remove(); 
     $('head').append("<link rel='stylesheet' href='assets/css/fontAwesome/font-awesome.css'>"); 
     alert('This is Safari'); 
    } 
}

你们可以请建议东西我可以尝试解决这个问题。我试过用相同的字体制作测试页面和小提琴，并在相同的设备上测试它们，一切都在演示页面上正常工作，但与我的应用程序无关。

来源

2015-09-07 Vibhor Dube

似乎工作的唯一的东西是在加载页面后删除并推送带CSS文件的链接标记。我的应用程序是使用AngularJS的单页网页应用程序，所以我不必担心JS在屏幕上的每次更改都会被执行，直到页面被明确刷新。

我从其相应的文件中提取了所有@font-face声明（包括font-awesome的@ font-face），并将它们保存在两个单独的文件中，即， fonts.css和fonts_safari.css。然后，包含在index.html的fonts.css：

<link rel="stylesheet" id="cssReplace" href="assets/css/app/fonts.css">

然后，只需body标签结束前，我加入这个JS代码片段在页面加载之后将取代CSS文件的声明。

<script> 
    $(document).ready(function() { 
     setTimeout(function() { 
      var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; 
      if (isSafari) { 
       if ($('#cssReplace').length) { 
        $('#cssReplace').remove(); 
        $('head').append("<link rel='stylesheet' href='assets/css/app/fonts_safari.css'>"); 
       } 
      } 
     }, 10); 
    }); 
</script>

PS：我使用setTimeout采取JavaScript作为一种脚本语言，它在单个线程工作的优势。如果没有它，我的应用程序无法运行。 Read This回答使用setTimeout作进一步参考。

来源

2015-10-01 13:06:13

iPad/Mac Safari不会加载字体

回答

相关问题