iPad/Mac Safari 不会加载字体

Question

我在 iPad 和 Mac Machine 的 SAFARI 浏览器上使用我的应用程序（部署在IIS）。但是，每当我尝试在 Developer Tools 的 Resources 选项卡中编辑 CSS 时，字体突然自行加载然后停留。即使是 CSS 中的单个 space 编辑也会加载字体。 Windows 的 Safari 一切正常。

除此之外，如果我继续在 Safari 上处理我的应用程序的页面，字体会在随机时间（时间从 10 秒到 10 分钟或更长时间不等）后加载到页面上，然后停留在那里直到缓存被擦掉了。

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

从 @font-face 声明中删除引号，因为我在某处读到 Safari 不会加载带引号的字体。没有成功，尽管如此，firefox 停止渲染字体，因为那里需要引号。

在 IIS 上检查 MIME-Type .svg 文件类型。没有成功。

已验证字体文件中 .svg 声明中的 ID。没有成功。

将所有字体的 @font-face 声明提取到单独的文件中，并将其作为最顶部的 CSS 声明包含在 <head> 标记中。

尝试在浏览器被检测为 SAFARI 后移除并推送 CSS 标签。这东西有用，但是很讨厌。下面引用代码

代码：

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

你们能给我一些建议来解决这个问题吗？我试过用相同的字体制作测试页面和小提琴，并在相同的设备上测试它们，在演示页面上一切正常，但在我的应用程序中却不行。

Answer 1

唯一似乎有效的是在页面加载后删除并推送带有 CSS 文件的 link 标记。我的应用程序是 AngularJS 的单页 Web 应用程序，所以我不必担心 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 的回答供进一步参考。

iPad/Mac Safari 不会加载字体

iPad/Mac Safari won't load the font

html

javascript

css

jquery

font-face