TypeScript webfontloader.load函數代碼示例

 return new Promise(function(resolve, reject) {
   load({
     google: {
       families: ['Lato', 'Montserrat']
     },
     active: resolve,
     inactive: reject
   })
 })

window.onload = () => {
  WebFont.load({
    google: {
      families: [fontFamily]
    },
    active: init,
    inactive: init,
    timeout: 2000
  });
};

export function main() {
  // Load fonts async
  // https://github.com/typekit/webfontloader#configuration
  loadWebFont({
    google: {
      families: ['Droid Sans']
    }
  });

  return platformRef.bootstrapModuleFactory(MainModuleNgFactory);
}

export function loadThemeFonts() {
    const state = getDeferredStoreState<ICoreStoreState, null>(null);
    if (state !== null) {
        const assets = state.theme.assets.data || {};
        const { fonts } = assets;

        if (fonts) {
            const webFontConfig: WebFont.Config = {
                custom: {
                    families: fonts.map(font => font.name),
                    urls: fonts.map(font => font.url),
                },
            };

            if (webFontConfig.custom && webFontConfig.custom.urls && webFontConfig.custom.urls.length > 0) {
                WebFont.load(webFontConfig);
            }
        } else {
            // If the theme has no font config of its own, load the default.
            WebFont.load(defaultFontConfig);
        }
    }
}

  preload () {
    WebFont.load({
      google: {
        families: ['Nunito']
      },
      active: this.fontsLoaded
    })

    let text = this.add.text(this.world.centerX, this.world.centerY, 'loading fonts', { font: '16px Arial', fill: '#dddddd', align: 'center' })
    text.anchor.setTo(0.5, 0.5)

    this.load.image('loaderBg', './assets/images/loader-bg.png')
    this.load.image('loaderBar', './assets/images/loader-bar.png')
  }

function start() {
    WebFont.load({
        custom: {
            families: ['moonhouseregular'],
            urls: ['assets/fonts.css']
        }
    });

    (document.querySelector(".overlay") as any).style.display = "none";
    let game = new Phaser.Game(800, 600, Phaser.AUTO);
    game.state.add("boot", Boot);
    game.state.add("loader", Loader);
    game.state.add("game", Phase1);
    game.state.start("boot");
}

window.onload = () => {
    let webFontLoaderOptions: any = null;
    let webFontsToLoad: string[] = GOOGLE_WEB_FONTS;

    if (webFontsToLoad.length > 0) {
        webFontLoaderOptions = (webFontLoaderOptions || {});

        webFontLoaderOptions.google = {
            families: webFontsToLoad
        };
    }

    if (Object.keys(Assets.CustomWebFonts).length > 0) {
        webFontLoaderOptions = (webFontLoaderOptions || {});

        webFontLoaderOptions.custom = {
            families: [],
            urls: []
        };

        for (let font in Assets.CustomWebFonts) {
            webFontLoaderOptions.custom.families.push(Assets.CustomWebFonts[font].getFamily());
            webFontLoaderOptions.custom.urls.push(Assets.CustomWebFonts[font].getCSS());
        }
    }

    if (webFontLoaderOptions === null) {
        // Just start the game, we don't need any additional fonts
        startApp();
    } else {
        // Load the fonts defined in webFontsToLoad from Google Web Fonts, and/or any Local Fonts then start the game knowing the fonts are available
        webFontLoaderOptions.active = startApp;

        WebFontLoader.load(webFontLoaderOptions);
    }
};

import * as path from "path";
import { load } from "webfontloader";

const fontFolder = ["..", "node_modules", "nteract-assets", "fonts"];

load({
  custom: {
    families: ["Source Sans Pro", "Source Code Pro"],
    urls: [
      path.join(...fontFolder, "source-sans-pro", "source-sans-pro.css"),
      path.join(...fontFolder, "source-code-pro", "source-code-pro.css")
    ]
  }
});

// TODO: There is the potential to have a Flash-of-Unstyled-Content since this is
//       now async
import { load } from "webfontloader";

load({
  google: {
    families: ["Source Sans Pro", "Source Serif Pro", "Source Code Pro"]
  }
});

import 'reflect-metadata';
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'ts-helpers';

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { QtAppModule } from './app.module';

const WebFont = require('webfontloader');

WebFont.load({
  google: {
    families: [
      'Roboto:400,500,700',
      'Playfair+Display:400,700',
      'Material+Icons',
    ],
  },
});

if (__PRODUCTION__) {
  enableProdMode();
} else {
  require('zone.js/dist/long-stack-trace-zone');
}

platformBrowserDynamic().bootstrapModule(QtAppModule);