iPad / Mac Safari无法加载字体

Question

I've been facing this strange issue on SAFARI Browser of iPad and Mac Machine with my application(deployed on IIS). 我的应用程序（在IIS上部署）在iPad和Mac Machine的SAFARI浏览器上一直面临这个奇怪的问题。 Though, whenever I try editing the CSS in Resources tab of Developer Tools , the font suddenly loads itself and then stays. 但是，每当我尝试在“ Developer Tools Resources选项卡中编辑CSS时，字体都会突然加载并保持不变。 Even a single space edit in the CSS would load the fonts. 即使在CSS中进行单个空格编辑也会加载字体。 Everything works fine on Safari for Windows . 在Windows的Safari上，一切正常。

Apart from that, If I keep working on pages of my Application on Safari, the fonts get loaded on pages after a random time(time varies from 10 seconds to 10 minutes or more) and then stay there until the cache is wiped off. 除此之外，如果我继续在Safari上应用程序的页面上工作，那么字体会在随机时间（时间从10秒到10分钟或更长时间）之后加载到页面上，然后停留在那里直到清除缓存为止。

I've tried several things to fix this: 我尝试了几种方法来解决此问题：

Removing the quotes from @font-face declaration as I've read somewhere that Safari won't load fonts with quotes. 从@font-face声明中删除引号，因为我在某处读到Safari不会加载带引号的字体。 No success, albeit, firefox stopped rendering the fonts as quotes are necessary there. 尽管没有成功，但Firefox停止渲染字体，因为那里的引号是必需的。
Checked MIME-Type on IIS for .svg file types. 在IIS上检查MIME-Type是否为.svg文件类型。 No Success. 没有成功。
Verified ID in .svg declaration from the font file. 字体文件中.svg声明中的已验证ID。 No Success. 没有成功。
Extracted @font-face declarations of all the fonts into separate file and included it as the top most CSS declaration in <head> tag. 将所有字体的@font-face声明提取到单独的文件中，并将其作为<head>标记中最顶级的CSS声明。
Tried removing and pushing the CSS tag after the browser is detected as SAFARI. 在将浏览器检测为SAFARI后，尝试删除并推送CSS标记。 This thing worked but is a nasty hack. 这个东西可以工作，但是很讨厌。 The code is quoted below 该代码在下面引用

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');
    }
}

Can you guys please suggest things which I can try to fix this issue. 能否请您提出一些我可以尝试解决的问题的建议。 I've tried making test pages and fiddles with same fonts and tested them on same devices, everything works fine on demo pages but not with my application. 我尝试用相同的字体制作测试页和小提琴，并在相同的设备上对其进行了测试，但在演示页上一切正常，但在我的应用程序中却没有。

Answer 1

The only thing which seems to work is removing and pushing the link tag with CSS file after the page is loaded. 唯一可行的方法是在页面加载后删除并用CSS文件推送链接标记。 My application is single page web-application with AngularJS, so I need not worry about the JS getting executed on each change in screen, until the page is explicitly refreshed. 我的应用程序是带有AngularJS的单页Web应用程序，因此在页面被明确刷新之前，我不必担心JS在屏幕上的每次更改都会执行。

I extracted all the @font-face declarations(including font-awesome's @font-face) from their corresponding files and kept them in two separate files, viz. 我从它们相应的文件中提取了所有@font-face声明（包括font-awesome的@ font-face），并将它们保存在两个单独的文件中，即。 fonts.css and fonts_safari.css. fonts.css和fonts_safari.css。 Then included fonts.css in index.html: 然后在index.html中包含fonts.css ：

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

Then just before the end of the body tag, I added this JS snippet which will replace the declaration of CSS file after the page is loaded. 然后在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: I'm using setTimeout to take the advantage of javascript being a scripting language which works on single thread. PS：我使用setTimeout来利用javascript是一种可在单线程上运行的脚本语言的优势。 It somehow doesn't work without it on my application. 没有我的应用程序，它就无法工作。 Read This answer on the use of setTimeout for further reference. 阅读有关使用setTimeout答案，以供进一步参考。

iPad / Mac Safari无法加载字体

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-10-01 13:06:13

iPad / Mac Safari无法加载字体

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-10-01 13:06:13

解决方案1
0 已采纳 2015-10-01 13:06:13