javascript - usar - no hay fuentes disponibles para la regla font face

¿Utiliza jQuery para saber cuándo se cargan las fuentes @ font-face?

Question

Estoy usando @ font-face y odio que Firefox muestre la fuente predeterminada, espere para cargar la fuente @ font-face y luego la reemplace. Entonces toda la página parpadea con la nueva fuente.

Los navegadores Webkit simplemente no muestran el texto hasta que se carga la fuente y tiene un aspecto mucho más limpio.

Entonces, me pregunto si jQuery podría ayudarme a saber cuándo se cargan todos los datos de la página, incluido el archivo @ font-face, para poder mostrar mi texto. ¿Hay algún método jQuery que me diga cuándo todo está cargado?

Answer 1

No deberías usar $(window).bind(''load'') - eso esperará a que se cargue la página completa (que quizás sea lo que quieres), y no solo la fuente. Si desea controlar el proceso de carga de @ font-faces use WebFont Loader, desarrollado por Google y Typekit.

Puede usarlo con Google Font API, typekit y su propio proveedor de fuentes web: usted (aunque nunca lo intenté yo mismo como usuario de Typekit.

Lea sobre esto aquí: http://code.google.com/apis/webfonts/docs/webfont_loader.html y aquí: http://blog.typekit.com/2010/05/19/typekit-and-google/

Answer 2

Ok, fue bastante fácil. Básicamente acabo de configurar mi texto para:

a.main {visibility: hidden;}

y luego agrega:

$(window).bind("load", function() {
       $(''#nav a.main'').addClass(''shown'');
});

Luego, asegúrese de que lo siguiente también esté en mi archivo css:

a.main.shown {visibility: visible;}

Answer 3

Quizás..

Cree un índice z: -10 div y llénelo con mucho texto (con una fuente ''normal''). En document.ready () u otro evento:

var originalnumber = $( div ).width() + $( div ).height() + $( div ).offset().top + $( div ).offset().left;

$( div ).css( ''font-family'', ''MyPrettyWebfont'' );

var interval = setInterval( function() {
    var number = $( div ).width() + $( div ).height() + $( div ).offset().top + $( div ).offset().left;

    if ( number !== originalnumber ) {
        // webfont is loaded and applied!
        clearInterval( interval );
    }
}, 10 );

Answer 4

Tengo el mismo problema y estoy intentando con la función readyf (), la función bind () y algunas otras que encontré, pero ninguna de ellas funciona. Finalmente encontré una solución, solo aplicando un retraso antes de que se cargue la animación ... así:

$(document).ready(function() {

setTimeout(function (){
   // The animation
},150);

}); // end ready

Sé que esta no es la mejor solución, así que ¿alguien puede decirme una mejor?

¡Gracias!

Answer 5

Tengo el mismo problema. Y de alguna manera no puedo hacer que Google webfont loader funcione con la fuente ttf (especialmente fuentes chinas) o enviar una respuesta jquery cuando se carga la fuente.

Así que se me ocurrió una solución más básica, útil cuando se cambia la fuente dinámicamente después de cargar la página. muestra cuando la cara de la fuente está cargada correctamente.

Primero creo un dummy div y luego lo llene con ''abcd'' y luego le doy un tamaño de letra 40, anote el ancho del div. Cuando el evento ''cambiar fuente'' se invoca a través de un botón o cualquier cosa, debe rastrear los cambios del ancho div falso. Los cambios de ancho representarían que la fuente ha cambiado.

CÓDIGO HTML

<style>
    @font-face {
     font-family: ''font1'';
     src:url(''somefont.ttf'')  format(''truetype'');
     }
</style>
<div id="dummy" style="border:1px solid #000; display:inline-block">abdc</div>

<!--simple button to invoke the fontchange-->
<input type="button" onclick="javascript:changefont(''font1'')" value="change the font"/>

JQuery

//create a variable to track initial width of default font
var trackwidth

//when change font is invoke
function changefont(newfont)
{
   //reset dummy font style
    $(''#dummy'').css(''font-family'',''initial !important;'');
    $(''#dummy'').css({''font-size'':''40px''});
    $(''#dummy'').html(''abcd'');

    //ensure that trackwidth is only recorded once of the default font
    if(trackwidth==null)
    {
       trackwidth=( $(''#dummy'').width());
    }

    //apply new font
    $(''#dummy'').css(''font-family'',newfont);
    checkwidth()
}

function checkwidth()
{
   //check if div width changed
   if($(''#dummy'').width() == trackwidth)
    {
        //if div never change, detect again every 500 milisecs
        setTimeout(checkwidth, 500);
    }
    else
    {
      //do something, font is loaded!
    }
}

Answer 6

Uso esta función, probada en Safari, Chrome, Firefox, Opera, IE7, IE8, IE9:

function waitForWebfonts(fonts, callback) {
    var loadedFonts = 0;
    for(var i = 0, l = fonts.length; i < l; ++i) {
        (function(font) {
            var node = document.createElement(''span'');
            // Characters that vary significantly among different fonts
            node.innerHTML = ''giItT1WQy@!-/#'';
            // Visible - so we can measure it - but not on the screen
            node.style.position      = ''absolute'';
            node.style.left          = ''-10000px'';
            node.style.top           = ''-10000px'';
            // Large font size makes even subtle changes obvious
            node.style.fontSize      = ''300px'';
            // Reset any font properties
            node.style.fontFamily    = ''sans-serif'';
            node.style.fontVariant   = ''normal'';
            node.style.fontStyle     = ''normal'';
            node.style.fontWeight    = ''normal'';
            node.style.letterSpacing = ''0'';
            document.body.appendChild(node);

            // Remember width with no applied web font
            var width = node.offsetWidth;

            node.style.fontFamily = font + '', sans-serif'';

            var interval;
            function checkFont() {
                // Compare current width with original width
                if(node && node.offsetWidth != width) {
                    ++loadedFonts;
                    node.parentNode.removeChild(node);
                    node = null;
                }

                // If all fonts have been loaded
                if(loadedFonts >= fonts.length) {
                    if(interval) {
                        clearInterval(interval);
                    }
                    if(loadedFonts == fonts.length) {
                        callback();
                        return true;
                    }
                }
            };

            if(!checkFont()) {
                interval = setInterval(checkFont, 50);
            }
        })(fonts[i]);
    }
};

Úselo como:

waitForWebfonts([''MyFont1'', ''MyFont2''], function() {
    // Will be called as soon as ALL specified fonts are available
});

Answer 7

Uso las fuentes web de Google (Crete Round Regular y Open Sans Regular with Bold)

Puedes usar esto:

var fonts = $.Deferred();
WebFontConfig = { google: { families: [ ''Crete+Round::latin'', ''Open+Sans:400,700:latin'' ] } , active : function() { fonts.resolve(); } };
(function() {
    var wf = document.createElement(''script'');
    wf.src = (''https:'' == document.location.protocol ? ''https'' : ''http'') + ''://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'';
    wf.type = ''text/javascript'';
    wf.async = ''true'';
    var s = document.getElementsByTagName(''script'')[0];
    s.parentNode.insertBefore(wf, s);
})();
fonts.done(function(){ alert(''fonts''); });

o esto :

WebFontConfig = { google: { families: [ ''Crete+Round::latin'', ''Open+Sans:400,700:latin'' ] } , active : function() { alert(''fonts''); } };
(function() {
    var wf = document.createElement(''script'');
    wf.src = (''https:'' == document.location.protocol ? ''https'' : ''http'') + ''://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'';
    wf.type = ''text/javascript'';
    wf.async = ''true'';
    var s = document.getElementsByTagName(''script'')[0];
    s.parentNode.insertBefore(wf, s);
})();

Tenga en cuenta que en la primera opción usé jQuery Objeto diferido.