Preload font HTML5, JS, Kinetic.js?

Question

Preload font HTML5, JS, Kinetic.js?

j'ai une police personnalisée ( *.ttf ), que j'utilise pour écrire du texte sur la toile HTML en utilisant Kinetic.js.

malheureusement, lors du premier chargement de la page il n'utilise pas ma police personnalisée, lors du rechargement de la page tout est bon.

puis-je précharger la police?

j'ai essayé, mais ne fonctionne toujours pas:

<link rel="prefetch" href="resource/font/IDAutomationHC39M.ttf">

je Peux Cinétique.js pour le chargement d'une certaine façon?

la police est définie dans mon CSS comme ceci:

@font-face {
    font-family: "Barcode";
    src: url(../font/IDAutomationHC39M.ttf);
}

Merci d'avance pour votre soutien!

1

canvas fonts html kineticjs

demandé sur Scott Weldon 2013-03-21 10:07:02

6 réponses

score 10 · Answer 1

j'ai eu le même problème aujourd'hui.. J'ai fini par utiliser ce

<style>
@font-face {
    font-family: 'ArchivoBlack-Regular';
    src: url('../fonts/ArchivoBlack-Regular.ttf');
}
</style>

<div style="font-family:'ArchivoBlack-Regular'">&nbsp;</div>

après ça, tu pourras faire des trucs normaux de KineticJS..! En fait, il est nécessaire de charger la police avant de l'utiliser..! Je ne suis pas bon en anglais, mais j'espère que vous avez compris. Aussi jeter un oeil à ce lien: Github Lien

score 4 · Answer 2

peut-être qu'il est tard pour répondre, mais il vaut la peine de mentionner avec un exemple complet.

s'il vous Plaît noter que KonvaJS est dérivé de KeneticJS et est pris en charge, mais Keneticjs n'est pas supportée.

window.onload = function () {
var stage = new Konva.Stage({
      container: 'container',
      width: 1000,
      height: 1000
    });

    var layer = new Konva.Layer();

    var simpleText = new Konva.Text({
      x: stage.getWidth() / 10,
      y: 15,
      text: "\uf21c",
      fontSize: 300,
      fontFamily: 'FontAwesome',
      fill: 'green'
    });
  layer.add(simpleText);
  stage.add(layer);
  
}

  @font-face {
    font-family: 'FontAwesome';
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/fonts/fontawesome-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <script src="https://cdn.rawgit.com/konvajs/konva/0.11.1/konva.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="container" style="font-family:'FontAwesome'">dummyText</div>
</body>
</html>

un grand merci à @luschn pour sa grande réponse parce que comme il l'a déclaré: "timeout is bad solution".

score 3 · Answer 3

vous pouvez utiliser ce vieux hack css pour forcer la police à être disponible:

Ajouter un élément caché à la page qui spécifie la police de code à barres

<span id="mustLoadMe">

puis dans la CSS:

#mustLoadMe
{
    visibility: hidden;
    position: absolute;
    font-family: Barcode, Arial, Sans-serif;
}

enfin, utilisez jQuery pour attendre sur la police à charger avant de dessiner du texte dans votre toile.

$("#mustLoadMe").load(function() {
       // do your canvas stuff here because the font should be loaded now...
});

Note: vous pourriez devoir recourir à $(window).load() à l'étape 3 ci-dessus, pour tenir compte de certains navigateurs chargement asynchrone de polices.

score 3 · Answer 4

il fonctionne généralement dans tous les navigateurs, vous avez juste à utiliser police-face correctement. Il suffit d'utiliser un générateur comme celui-ci: http://www.fontsquirrel.com/tools/webfont-generator

il crée un fichier zip avec 4 fichiers de police (eot, svg, ttf, woff), et il y a un fichier css avec le code nécessaire:

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

j'utilise KineticJS, quand je crée l'étape après le chargement de la page il fonctionne avec la police correcte:

window.onload = function () {
    var stage = new Kinetic.Stage({
            container: 'container',
            width: 800,
            height: 600
    });
    //code for creating a layer, text and whatnot with kinetic
}

ne devrait pas être un problème si vous n'utilisez pas Kinetic, bien sûr.

Si elle ne fonctionne pas dans certains navigateurs, la police peut ne pas être chargé correctement. Utiliser un timeout serait un mauvais contournement d'imho, vous pouvez essayer d'ajouter un div caché juste après la balise opening body:

<div class="font-hack" style="font-family:'your-font';">nothing to see here, move along</div>

peu importe ce que vous y écrivez (cela ne doit pas être vide).

Je ne travaille plus avec Kinetic, mais ceci ça marche très bien avec le moteur de phaseur.

score 2 · Answer 5

J'ai eu le même problème avec FontAwesome. Voici ma solution:

//wait for fontawsome to load
setTimeout(function(){
   kineticStuff();
}, 500);

Pas besoin d'ajouter un élément à votre page.

score 1 · Answer 6

Via Google webfontloader https://github.com/typekit/webfontloader

testStrings doivent être utilisés pour déterminer si oui ou non une police avec des glyphes a été chargée. Si votre police n'a pas de glyphes ou de sous-ensembles personnalisés, vous n'avez pas besoin d'utiliser testStrings

 WebFont.load({
     custom: {
         families: ['fontFamily1'],
         testStrings: {
             'fontFamily1': '\uE600'
         },
     },
     timeout: 5000 // Set the timeout to five seconds
         ,
     fontactive: function(familyName, fvd) {
        // the font have been loaded and now you can do what you want
     },
     fontinactive: function(familyName, fvd) {
         // the font could not be loaded  
     },
 });

Las etiquetas más populares

Preload font HTML5, JS, Kinetic.js?

6 réponses