[DOM] Détection police d'écriture

Version imprimable

22/01/2009, 16h19
Kikkoman

[DOM] Détection police d'écriture

Bonjour à tous,
après quelques recherches effectuées grâce à mon ami google, je me tourne vers vous car je n'ai vraiment aucune idée pour résoudre mon problème.

J'aimerais savoir s'il est possible de détecter si une certaine police d'écriture est installée sur le poste client. Pour des raisons que je ne développerais pas ici, il faut que la police d'écriture soit obligatoirement installée sur le poste client, sinon l'utilisateur est priée de l'installer.

Quelqu'un aurait-il une idée lumineuse? :mrgreen:
22/01/2009, 20h51
SpaceFrog

attribue la police au style d'un element et essaye de récupérer le Computedstyle ?

:salut: tout d'abord, merci pour ta réponse.
J'ai essayé ta solution sur un code tout basique que voici :
Code:

1 2 3 4 5 6 7 8 <div id="div1" style="background-color:#CCCCCC; font-family:TEST, Bodega, Impact, Arial, Helvetica, sans-serif;" onclick="getFont()">Div de test</div> <script language="javascript"> function getFont() { var oDiv = document.getElementById("div1"); alert(document.defaultView.getComputedStyle(oDiv, null).fontFamily); } </script>
Mais il me retourne "TEST, Bodega, Impact, Arial, Helvetica, sans-serif" c'est-à-dire toutes les polices même celles qui n'ont pas fonctionné snif...

Je ne connais pas vraiment la methode computedStyle, peut-être que je l'ai mal utilisée?

23/01/2009, 12h29
RomainVALERI

document.defaultView.getComputedStyle ? je crois que c'est une implémentation du DOM niv 2, mais peut-être que ce n'est pas reconnu par certains navigateurs ? (à vérifier)

Sinon essaie peut-être aussi window.getComputedStyle
23/01/2009, 12h44
Kikkoman

Citation:

Envoyé par RomainVALERI

document.defaultView.getComputedStyle ? je crois que c'est une implémentation du DOM niv 2, mais peut-être que ce n'est pas reconnu par certains navigateurs ? (à vérifier)

Sinon essaie peut-être aussi window.getComputedStyle

Même résultat, il m'affiche toutes les polices notées dans le style et non pas celle utilisée. (d'ailleurs les 2 solutions fonctionnent sur FF mais pas sur IE, mais bon ça ce n'est pas encore trop grave)
23/01/2009, 13h10
SpaceFrog

http://www.developpez.net/forums/d49...-currentstyle/
23/01/2009, 13h58
Kikkoman

Citation:

Envoyé par SpaceFrog

http://www.developpez.net/forums/d49...-currentstyle/

Je viens de tester le code du post que tu as pointé avec ton lien, il affiche exactement la même chose que les précédents, c'est-à-dire les polices écrites en CSS mais pas celle utilisée au final.
En fait, mon CSS contenant :

Code:

font-family:TEST, Bodega, Impact, Arial, Helvetica, sans-serif;

le code affiche "TEST, Bodega, Impact, Arial, Helvetica, sans-serif"
Mais cela ne résoud pas mon problème car je voudrais qu'il affiche la police réellement utilisée, c'est-à-dire Impact dans mon cas, car il ne trouve ni TEST, ni la police Bodega.

Je ne sais pas si je me suis bien expliqué :oops:
A priori c'est impossible avec la methode computedStyle vu que le code source lui-même affiche toutes les polices, mêmes celles inexistantes.
23/01/2009, 14h15
SpaceFrog

non pour savoir si une police est installée je tentais la ruse suivante :

tu imposes une seule police dans un style et tu recupère ensuite le computedStyle ...
si la police est installée tu devrais recupérere le nom de la police;
sinon tu récupèrerais le nom de la police par defaut
23/01/2009, 14h21
Kikkoman

Citation:

Envoyé par SpaceFrog

non pour savoir si une police est installée je tentais la ruse suivante :

tu imposes une seule police dans un style et tu recupère ensuite le computedStyle ...
si la police est installée tu devrais recupérere le nom de la police;
sinon tu récupèrerais le nom de la police par defaut

Ok je comprend mieux!
Sauf que ça ne fonctionne pas non plus avec une seule police, il récupère tout de même la police écrite dans le CSS, même si celle ci n'est pas installée ou est erronée.
Dommage ça aurait été nickel...

Salut,

J'espère qu'il existe une solution simple à ton problème... mais
au pire, voici une piste:

Tu pourrais mesurer le rapport largeur hauteur d'un certains nombre
de lettres de la police que tu attends. Puis comparer avec la police
effectivement utilisée.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<script type='text/javascript'>
 
function calculFontSignature(font) {
	var chars = "ABCDEFGHIabcdefghi0123:;";
	var test = document.createElement('div');
	//test.style.visibility = 'hidden';
	test.style.position = 'absolute';
	test.style.fontFamily = font; 
	document.body.appendChild(test);
	var dims = [];
	for(var i=0;i<chars.length;i++) {
		test.innerHTML = chars.charAt(i);
		var d = Math.floor(test.clientWidth/test.clientHeight*100);
		dims.push(d);
	}
	document.body.removeChild(test);
	return dims.join(',');
}
 
document.write( calculFontSignature("Serif") );
document.write("<br />");
document.write( calculFontSignature("Georgia") );
document.write("<br />");
document.write( calculFontSignature("monospace") );
document.write("<br />");
</script>
</body> 
</html>

Si d'aventure tu devais utiliser une telle solution, méfiance avec
l'agrandissement des texte (zoom texte du navigateur) il faudrait
peut-être faire une signature par taille... à voir.

23/01/2009, 15h07
Kikkoman

Je crois que je n'aurais jamais imaginé contourner le problème comme cela ^^
Mais oui effectivement c'est une piste, ce n'est pas une solution très "élégante" mais c'est carrément mieux que rien, merci!
Je vais donc regarder ta solution de + près et je te dis ce qu'il en est :D
(merci aussi pour les conseils sur l'agrandissement du texte, je n'y aurais pas pensé non plus)