Das dynamische Laden von Schriftarten

Brauche ich rund 150 fonts für mein Projekt. Laden alle Schriften zunächst erhöht die Ladezeit der Seite.

Habe ich versucht zu googeln, konnte aber keine Antwort finden.

Szenario:

Benutzer wählen Sie eine schriftart option aus <select> tag. und auf klicken Sie auf, ich habe zum abrufen der Schrift dynamisch und stellen Sie sicher, dass die schriftart gerendert wird durch den browser und verwenden Sie dann die schriftart, die vermeiden Sie eine Flash Unstyled Text (FOUT)

Derzeit bin ich mit AJAX zu verlangen, dass die font-Datei

      $.ajax({
      type: 'GET',
        url: "font-file-url",
        async:false,
        success: function(data) {
            $("style").prepend("@font-face {\n" +
            "\tfont-family: \""+fontValue+"\";\n" + 
            "\tsrc: local('☺'), url("font-file-url") format('opentype');\n" + 
            "}");
         }
      });

Problem

Ich weiß nicht, Wann genau die schriftart wird vom browser angezeigt, so dass ich am Ende die Anzeige FOUT

InformationsquelleAutor Abhinav | 2017-01-25
  1. 6

    Vielleicht ein bisschen spät, aber ich habe es vollbracht mit Google WebfontLoader Bibliothek. Es hat den job für mich.

    Dies ist, wie ich das umgesetzt:

    Schritt 1:
    Umfassen JS-Datei der Bibliothek

    Schritt 2: Den code unten hat den trick für mich

    WebFont.load({
google: {
  families: ['Droid Sans']
},
timeout:5000,
fontactive: function(familyName,fvd){ //This is called once font has been rendered in browser
    //Your business logic goes here

  },
});

    Können Sie auch laden Sie benutzerdefinierte Schriftarten abgesehen von google-Schriften. Die Bibliothek bietet auch verschiedene callback-Funktionen und andere Coole stuffs. Sie können sich über den obigen link.

    InformationsquelleAutor Abhinav
  2. 1

    Leider laden einer schriftart wird nicht unterstützt 100% durch JavaScript. aber es ist eine Arbeit über diese Unterstützung in Zukunft:

    https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API
    https://drafts.csswg.org/css-font-loading/

    InformationsquelleAutor H Aßdøµ
Schreibe einen Kommentar