0

我们正在使用Webfont Loader来加载谷歌字体。在 WebFont.load 的活动回调中，我们加载我们的主脚本和引导 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 类设置字体

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

在 angular run 中，我们从加载器切换 apploaded 和 clear screen 并显示应用程序。

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>

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

按钮的屏幕截图

我确信字体文件是在应用程序引导之前加载的，因为加载应用程序后字体不会改变。

可能无关紧要，但是我在页面上得到了一些图像文件，并且用图像文件呈现了外来字符。所以有某种奇怪的屏幕渲染延迟。

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

4

1 回答 1

0

在尝试了各种预加载方法之后，就在我考虑放弃它的时候，我在这里遇到了一个事实

大多数浏览器在页面中使用字体而不是在 CSS 中声明时下载字体。

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

我已经通过放置一个虚拟字符 (İ) 解决了这个问题，这将使它在加载屏幕上下载 latin-ext 子集

于 2017-11-17T07:17:29.917 回答