Javascript iPad/Mac Safari赢得'；不要加载字体

我的应用程序（部署在IIS上）在iPad和Mac机器的SAFARI浏览器上遇到了这个奇怪的问题。尽管如此，每当我尝试在

开发者工具

的

参考资料

选项卡中编辑CSS时，字体会突然自动加载，然后保持不变。即使CSS中的单个空格编辑也会加载字体。在适用于Windows的Safari上一切正常

除此之外，如果我继续在Safari上处理我的应用程序页面，字体会在一段随机时间（时间从10秒到10分钟或更长）后加载到页面上，然后一直保存到缓存被清除为止

我尝试了几种方法来解决此问题：

从

@font-face

声明中删除引号，因为我在某些地方读到Safari不会加载带有引号的字体。没有成功，尽管firefox停止呈现字体，因为那里需要引号

在IIS上选中了

.svg

文件类型的

MIME Type

。没有成功

已验证字体文件中

.svg

声明中的ID。没有成功

将所有字体的

@font-face

声明提取到单独的文件中，并将其作为

标记中最顶层的CSS声明

检测到浏览器为SAFARI后，尝试删除并按下

CSS

标记。这东西有用，但却是一个讨厌的黑客。代码引用如下

代码：

var isSafari=Object.prototype.toString.call（window.HTMLElement.indexOf（'Constructor'）>0；
如果（伊萨法里）{
if（$（'#fontCss'）.length）{
$（'#fontCss'）。删除（）；
$（'head'）。追加（“”）；
警报（“这是Safari”）；
}
}

---

你们能建议一些我可以尝试解决这个问题的方法吗。我尝试过用相同的字体制作测试页面和摆弄，并在相同的设备上进行了测试，在演示页面上一切正常，但在我的应用程序中却不行。

唯一有效的方法是在页面加载后删除并推送带有CSS文件的链接标签。我的应用程序是带有AngularJS的单页web应用程序，所以我不必担心JS在屏幕上的每次更改都会被执行，直到页面被显式刷新

我从相应的文件中提取了所有

@font-face

声明（包括font-awome的@font-face），并将它们保存在两个单独的文件中，即。fonts.css和fonts_safari.css。然后在index.html中包含

font.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>

$（文档）.ready（函数（）{
setTimeout（函数（）{
var isSafari=Object.prototype.toString.call（window.HTMLElement.indexOf（'Constructor'）>0；
如果（伊萨法里）{
如果（$（'#cssReplace'）。长度）{
$（'#cssReplace'）。删除（）；
$（'head'）。追加（“”）；
}
}
}, 10);
});

PS：我正在使用

setTimeout

来利用javascript作为一种脚本语言在单线程上工作的优势。如果我的应用程序中没有它，它就无法工作回答如何使用

setTimeout

以供进一步参考

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