在 cordova ios 应用程序上延迟显示外来字符

Question

我们正在使用 Webfont Loader 加载 google 字体。在 WebFont.load 的活动回调中，我们加载主脚本和 bootstrap angular.js 应用程序。

<script type="text/javascript">
WebFontConfig = {
    google: {
        families: ['Open Sans:400,700,700i,400i:latin-ext']
    },
    active: function() {
        var mainScript = document.createElement('script');
        mainScript.src = "/js/main.js";
        mainScript.onload = function() {
            angular.bootstrap(document, ['cob']);
        }

        document.body.appendChild(mainScript);
    }
};

WebFont.load(WebFontConfig);
</script>

为了让浏览器在加载 google 字体文件之前使用默认字体，我们为 .wf-active class

设置了字体

html.wf-active {
    font-family: 'Open Sans', sans-serif;
}

在 angular 运行中，我们切换应用程序并从加载程序中清除屏幕并显示应用程序。

angular.module('mymodule')
    .run([function() {
        $rootScope.appLoaded = true;
    }
]);

html

<body>
    <div class="app-loader" ng-hide="appLoaded">loading...</div>
    <div class="page-container" ng-if="appLoaded">
        application loaded. <button>GİRİŞ</button>
    </div>
</body>

我们看到 "loading..." 直到字体文件加载，然后应用程序 bootstrap 成功。但是按钮文本呈现为 "G R " 几秒钟，一段时间后“İ”和“Ş”字符加载到屏幕上，我们在按钮上看到 GİRİŞ。

我确定字体文件在应用程序 bootstraps 之前加载，因为字体在应用程序加载后不会改变。

可能无关紧要，但是，我在页面上找到了一些图像文件，并且外来字符与图像文件一起呈现。因此存在某种奇怪的屏幕渲染延迟。

我们只在 iOS 应用程序上遇到此问题，我已经在 iPhone 6 和 6s 以及 xcode 模拟器上对其进行了测试。这在浏览器（safari、chrome 和 firefox）和我们使用相同的 cordova 项目创建的 android 应用程序上按预期工作。

Answer 1

尝试了各种preload方法，正想放弃的时候，突然发现一个事实here

most browsers download fonts when they're used in a page rather than when they're declared in CSS.

该字体的 latin-ext 子集似乎被延迟，直到它在页面内部使用。

在 cordova ios 应用程序上延迟显示外来字符

Foreign characters displaying delayed on cordova ios application

webfonts

ios

angularjs

cordova

webfont-loader