Question

我一直在使用我的应用程序（部署在IIS上） iPad和Mac机的SAFARI浏览器上遇到这个奇怪的问题。但是，每当我尝试在Resources的{{1}}标签中编辑CSS时，字体会突然加载然后停留。即使CSS中的单个空间编辑也会加载字体。一切正常 Safari for Windows 。

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

我已经尝试了几件事来解决这个问题：

从Developer Tools声明中删除引号，因为我读过Safari不会加载带引号的字体。没有成功，尽管firefox停止渲染字体，因为那里需要引号。
在IIS上检查@font-face MIME-Type个文件类型。没有成功。
来自字体文件的.svg声明中的已验证身份。没有成功。
将所有字体的.svg声明提取到单独的文件中，并将其作为@font-face标记中最顶级的CSS声明。
在检测到浏览器为SAFARI后，尝试删除并推送<head>标记。这件事有效但却是一个讨厌的黑客。该代码引用在下面

CODE：

CSS

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

Answer 1

唯一可行的方法是在加载页面后使用CSS文件删除和推送链接标记。我的应用程序是使用AngularJS的单页Web应用程序，因此我不必担心在屏幕上的每次更改时都会执行JS，直到页面被明确刷新。

我从相应的文件中提取了所有@font-face声明（包括font-awesome＆＃39; s @ 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作为一种可在单线程上运行的脚本语言。在我的应用程序中没有它它会以某种方式工作。关于使用setTimeout进一步参考的 Read This 回答。

iPad / Mac Safari不会加载字体

1 个答案: