Question

我们正在使用Webfont Loader加载谷歌字体。在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>

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

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

在角度运行中，我们从装载机切换已装载和清除屏幕并显示应用程序。

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 ...”，直到加载了字体文件，然后应用程序引导成功。但按钮文本在几秒钟内呈现为“G R”，经过一段时间'İ'和'Ş'字符加载到屏幕上，我们在按钮上看到GİRİŞ。

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

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

我们在iOS应用程序上只有这个问题，我在iPhone 6和6s以及xcode模拟器上测试过它。这适用于浏览器（safari，chrome和firefox）以及我们使用相同的cordova项目创建的Android应用程序。

Answer 1

在尝试了各种预加载方法后，就像我考虑放弃它一样，我遇到了一个事实here

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

看起来像字体的latin-ext子集被延迟，直到它在页面内使用。

我通过放置一个虚拟角色（İ）来解决这个问题，这个角色会使它在加载屏幕上下载latin-ext子集

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

1 个答案: