Comment être averti une fois qu'une police Web a été chargée
L'API Web Fonts de Google offre un moyen de définir les fonctions de rappel à exécuter si une police a fini de se charger, ou n'a pas pu être chargée, etc. Y a-t-il un moyen d'obtenir quelque chose de similaire en utilisant les polices Web CSS3 (@ font-face)?
Mise à jour 2015
Chrome 35+ et Firefox 41+ implémentent l'API de chargement des polices CSS ( MDN , W3C ). Appelez document.fonts
Pour obtenir un objet FontFaceSet , qui possède quelques API utiles pour détecter l'état de chargement des polices:
check(fontSpec)
- retourne si toutes les polices de la liste de polices donnée ont été chargées et sont disponibles.fontSpec
utilise la syntaxe raccourcie CSS pour les polices .
Exemple:document.fonts.check('bold 16px Roboto'); // true or false
document.fonts.ready
- renvoie un Promise indiquant que les opérations de chargement et de mise en page des polices sont terminées.
Exemple:document.fonts.ready.then(function () { /*... all fonts loaded...*/ });
Voici un extrait montrant ces API, plus document.fonts.onloadingdone
, Qui offre des informations supplémentaires sur les faces des polices.
alert('Roboto loaded? ' + document.fonts.check('1em Roboto')); // false
document.fonts.ready.then(function () {
alert('All fonts in use by visible text have loaded.');
alert('Roboto loaded? ' + document.fonts.check('1em Roboto')); // true
});
document.fonts.onloadingdone = function (fontFaceSetEvent) {
alert('onloadingdone we have ' + fontFaceSetEvent.fontfaces.length + ' font faces loaded');
};
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<p style="font-family: Roboto">
We need some text using the font, for the font to be loaded.
So far one font face was loaded.
Let's add some <strong>strong</strong> text to trigger loading the second one,
with weight: 700.
</p>
IE 11 ne prend pas en charge l'API. Consultez les polyfills ou les bibliothèques de support disponibles si vous devez prendre en charge IE:
- Web Font Loader - développé par Google et Adobe
- FontFaceOnload - approche plus légère et similaire à Web Font Loader
- FontLoader - polyfill
Testé dans 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;
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]);
}
};
Utilisez-le comme:
waitForWebfonts(['MyFont1', 'MyFont2'], function() {
// Will be called as soon as ALL specified fonts are available
});
La bibliothèque JS utilisée par l'API Google Web Fonts (et Typekit) peut être utilisée sans le service: WebFont Loader .
Il définit des rappels pour ce que vous demandez, et beaucoup plus .
Mise à jour 2017
La bibliothèque JS FontFaceObserver est certainement la meilleure solution, la plus légère et multi-navigateur en 2017. Elle expose également une interface .load()
basée sur Promise.