javascript - incluir - ¿Cómo saber si una fuente(@ font-face) ya se ha cargado?
font face otf (7)
Ahora en GitHub: https://github.com/patrickmarabeas/jQuery-FontSpy.js
Esencialmente, el método funciona al comparar el ancho de una cadena en dos fuentes diferentes. Estamos utilizando Comic Sans como la fuente para probar, porque es la más diferente de las fuentes seguras para la web y con suerte lo suficientemente diferente a cualquier fuente personalizada que vaya a utilizar. Además, estamos usando un tamaño de fuente muy grande, por lo que incluso pequeñas diferencias serán evidentes. Cuando se ha calculado el ancho de la cadena Comic Sans, la familia de fuentes se cambia a su fuente personalizada, con una reserva para Comic Sans. Cuando se selecciona, si el ancho del elemento de cadena es el mismo, la fuente alternativa de Comic Sans todavía está en uso. Si no, tu fuente debería estar en funcionamiento.
Reescribí el método de detección de carga de fuentes en un plugin jQuery diseñado para darle al desarrollador la capacidad de diseñar elementos en función de si la fuente se ha cargado o no. Se ha agregado un temporizador a prueba de errores para que el usuario no se quede sin contenido si la fuente personalizada no se carga. Eso es mala usabilidad.
También he agregado un mayor control sobre lo que sucede durante la carga de la fuente y el fracaso con la inclusión de la adición y eliminación de clases. Ahora puede hacer lo que quiera con la fuente. Solo recomendaría modificar el tamaño de las fuentes, el espaciado entre líneas, etc. para que la fuente de su caída sea lo más parecida posible a la personalizada, de modo que su diseño permanezca intacto y los usuarios obtengan la experiencia esperada.
Aquí hay una demostración: http://patrickmarabeas.github.io/jQuery-FontSpy.js
Inserte lo siguiente en un archivo .js y hágalo referencia.
(function($) {
$.fontSpy = function( element, conf ) {
var $element = $(element);
var defaults = {
font: $element.css("font-family"),
onLoad: '''',
onFail: '''',
testFont: ''Comic Sans MS'',
testString: ''QW@HhsXJ'',
delay: 50,
timeOut: 2500
};
var config = $.extend( defaults, conf );
var tester = document.createElement(''span'');
tester.style.position = ''absolute'';
tester.style.top = ''-9999px'';
tester.style.left = ''-9999px'';
tester.style.visibility = ''hidden'';
tester.style.fontFamily = config.testFont;
tester.style.fontSize = ''250px'';
tester.innerHTML = config.testString;
document.body.appendChild(tester);
var fallbackFontWidth = tester.offsetWidth;
tester.style.fontFamily = config.font + '','' + config.testFont;
function checkFont() {
var loadedFontWidth = tester.offsetWidth;
if (fallbackFontWidth === loadedFontWidth){
if(config.timeOut < 0) {
$element.removeClass(config.onLoad);
$element.addClass(config.onFail);
console.log(''failure'');
}
else {
$element.addClass(config.onLoad);
setTimeout(checkFont, config.delay);
config.timeOut = config.timeOut - config.delay;
}
}
else {
$element.removeClass(config.onLoad);
}
}
checkFont();
};
$.fn.fontSpy = function(config) {
return this.each(function() {
if (undefined == $(this).data(''fontSpy'')) {
var plugin = new $.fontSpy(this, config);
$(this).data(''fontSpy'', plugin);
}
});
};
})(jQuery);
Aplicarlo a su proyecto
.bannerTextChecked {
font-family: "Lobster";
/* don''t specify fallback font here, do this in onFail class */
}
$(document).ready(function() {
$(''.bannerTextChecked'').fontSpy({
onLoad: ''hideMe'',
onFail: ''fontFail anotherClass''
});
});
Eliminar ese FOUC!
.hideMe {
visibility: hidden !important;
}
.fontFail {
visibility: visible !important;
/* fall back font */
/* necessary styling so fallback font doesn''t break your layout */
}
EDITAR: se eliminó la compatibilidad con FontAwesome porque no funcionaba correctamente y se encontró con problemas con versiones diferentes. Puede encontrar una solución hacky aquí: https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1
Estoy usando Font-Awesome, pero mientras los archivos de fuente no están cargados, los íconos aparecen con .
Entonces, quiero que estos íconos tengan display:none mientras los archivos no están cargados.
@font-face {
font-family: "FontAwesome";
src: url(''../font/fontawesome-webfont.eot'');
src: url(''../font/fontawesome-webfont.eot?#iefix'') format(''eot''), url(''../font/fontawesome-webfont.woff'') format(''woff''), url(''../font/fontawesome-webfont.ttf'') format(''truetype''), url(''../font/fontawesome-webfont.svg#FontAwesome'') format(''svg'');
font-weight: normal;
font-style: normal;
}
¿Cómo sé que estos archivos se han cargado y finalmente puedo mostrar los iconos?
Editar: No estoy hablando cuando la página está cargada (onload), porque la fuente podría cargarse antes que toda la página.
Aquí hay otra forma de saber si una @ font-face ya se ha cargado sin tener que usar temporizadores en absoluto: utilice un evento de "desplazamiento" para recibir un evento instantáneo cuando se cambie el tamaño de un elemento cuidadosamente diseñado.
Escribí una smnh.me/web-font-loading-detection-without-timers sobre cómo se hace y publiqué la biblioteca en Github .
Aquí hay un enfoque diferente de las soluciones de los demás.
Estoy usando FontAwesome 4.1.0 para construir texturas WebGL. Eso me dio la idea de usar un lienzo pequeño para representar un fa-cuadrado, luego verifico un pixel en ese lienzo para probar si se ha cargado:
function waitForFontAwesome( callback ) {
var retries = 5;
var checkReady = function() {
var canvas, context;
retries -= 1;
canvas = document.createElement(''canvas'');
canvas.width = 20;
canvas.height = 20;
context = canvas.getContext(''2d'');
context.fillStyle = ''rgba(0,0,0,1.0)'';
context.fillRect( 0, 0, 20, 20 );
context.font = ''16pt FontAwesome'';
context.textAlign = ''center'';
context.fillStyle = ''rgba(255,255,255,1.0)'';
context.fillText( ''/uf0c8'', 10, 18 );
var data = context.getImageData( 2, 10, 1, 1 ).data;
if ( data[0] !== 255 && data[1] !== 255 && data[2] !== 255 ) {
console.log( "FontAwesome is not yet available, retrying ..." );
if ( retries > 0 ) {
setTimeout( checkReady, 200 );
}
} else {
console.log( "FontAwesome is loaded" );
if ( typeof callback === ''function'' ) {
callback();
}
}
}
checkReady();
};
Como utiliza un lienzo, requiere un navegador bastante moderno, pero también podría funcionar en IE8 con el relleno policristalino.
Este es un enfoque alternativo que al menos garantizará que font-awesome esté cargado, NO una solución completa para el OP. El código original se encuentra en los foros de wordpress aquí https://wordpress.stackexchange.com/a/165358/40636 .
Es agnóstico y funcionará con cualquier recurso de estilo de fuente como font-awesome donde se pueda verificar una familia de fuentes. Con un poco más de pensamiento apuesto a que esto podría aplicarse a mucho más ...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
(function($){
var faSpan = $(''<span class="fa" style="display:none"></span>'').appendTo(''body'');
if (faSpan .css(''fontFamily'') !== ''FontAwesome'' ) {
// Fallback Link
$(''head'').append(''<link href="/css/font-awesome.min.css" rel="stylesheet">'');
}
faSpan.remove();
})(jQuery);
</script>
Pruebe WebFont Loader ( github repo ), desarrollado por Google y Typekit.
Este ejemplo primero muestra el texto en la fuente serif predeterminada; luego de que las fuentes se hayan cargado, muestra el texto en la fuente especificada. (Este código reproduce el comportamiento predeterminado de Firefox en todos los otros navegadores modernos).
Pruebe algo como
$(window).bind("load", function() {
$(''#text'').addClass(''shown'');
});
y luego hacer
#text {visibility: hidden;}
#text.shown {visibility: visible;}
El evento de carga debería dispararse después de que se carguen las fuentes.
Use el siguiente código:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canvasFont" width="40px" height="40px" style="position: absolute; display: none;"></canvas>
<script>
function IsLoadedFonts()
{
var Args = arguments;
var obj = document.getElementById(''canvasFont'');
var ctx = obj.getContext("2d");
var baseFont = (/chrome/i.test(navigator.userAgent))?''tims new roman'':''arial'';
//................
function getImg(fon)
{
ctx.clearRect(0, 0, (obj).width, (obj).height);
ctx.fillStyle = ''rgba(0,0,0,1.0)'';
ctx.fillRect( 0, 0, 40, 40 );
ctx.font = ''20px ''+ fon;
ctx.textBaseline = "top";
ctx.fillStyle = ''rgba(255,255,255,1.0)'';
ctx.fillText( ''/u0630'', 18, 5 );
return ctx.getImageData( 0, 0, 40, 40 );
};
//..............
for(var i1=0; i1<Args.length; i1++)
{
data1 = getImg(Args[i1]);
data2 = getImg(baseFont);
var isLoaded = false;
//...........
for (var i=0; i<data1.data.length; i++)
{
if(data1.data[i] != data2.data[i])
{isLoaded = true; break;}
}
//..........
if(!isLoaded)
return false;
}
return true;
};
setTimeout(function(){alert(IsLoadedFonts(''myfont''));},100);
</script>
</body>
Puede verificar muchas fuentes:
setTimeout(function(){alert(IsLoadedFonts(''font1'',''font2'',''font3''));},100);
El siguiente código funciona solo en ópera pero es fácil:
if(!document.defaultView.getComputedStyle(document.getElementById(''mydiv''))[''fontFamily''].match(/myfont/i))
alert("font do not loaded ");