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不會加載字體

回答

相關問題