Javascript avec polices embarquées

Résolu

blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014 - 25 nov. 2013 à 18:06
blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014 - 7 déc. 2013 à 18:02

Bonjour,
Voici mes 2 problèmes, j'ai un programme qui change sur une page la police de caractère avec une liste déroulante, voici à quoi ressemble sur la page le code html


<select style="width: 208px; height: 18px;" name="liste3" OnChange="ChoixTypoGlobale(this.value)">
<option value="arial">Arial</option>
<option value="Times new roman">Times New Roman</option>
<option value="Garamond">Garamond</option>
<option value="batavia">Batavia</option>
<option value="impact">Impact</option>
<option value="bell mt">Bell MT</option>
<option value="verdana">Verdana</option>
<option value="futura">Futura</option>
</select>

Puis sur mon code Javascript suivant

function ChoixTypoGlobale(value) {
		var fram = parent.frames['droite'];
		fram.document.getElementById("titre").style.fontFamily=value;
		fram.document.getElementById("fonction").style.fontFamily=value;
		fram.document.getElementById("adresse").style.fontFamily=value;
		var ValeurPolice = value;
		
}

Voilà.
Et maintenant j'aimerai utilisé des polices embarquées c'est à dire présente (en dur) sur le site dans le code css et non pas les polices installées sur les machines des ulilisateurs et pour ça j'ai essayé plein de possibilité mais là je bloque, merci pour votre avis...

A voir également:

Javascript avec polices embarquées
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Calendrier javascript - Conseils pratiques -Javascript
Tuto javascript - Conseils pratiques -Javascript

5 réponses

Réponse 1 / 5

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 25/11/2013 à 22:32

bonjour au debut du css tu doit faire la declaration de la police de cette facon


@font-face {
  font-family: 'ma_fronte';
  src: url('chemin/nom_de_la_fonte.ttf');
}

et quand tu veut l'utilisé tu l'appel par son nom


.une_class{

 font-family:ma_fronte;
 
}

ne fonctionne pas avec ie8

et si ca ne marche pas avec style modifie la class avec className

--

blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
27 nov. 2013 à 17:27

Pardonnes moi mais je n'ai pas tout compris
pour les polices ...

@font-face {
  font-family: 'ma_fronte';
  src: url('chemin/nom_de_la_fonte.ttf');
}

okay ça j'ai pigé.

Là à la rigueur Okay c'est une déclaration normal, mais je rappelle que c'est une liste déroulante qui permet de changer la police de caractère dans un inner.HTML et là je ne comprend plus

.une_class{

 font-family:ma_fronte;
 
}

Et là je suis perdu avec ta conclusion

"et si ca ne marche pas avec style modifie la class avec className"

pouvez-vous être plus précis svp ?

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
27 nov. 2013 à 20:34

pour changer la police tu fait

fram.document.getElementById("titre").style.fontFamily=value;

mais on pourait aussi modifié la class css

fram.document.getElementById("titre").className=une_class;

chaque class auraient une fonte différente.

Réponse 2 / 5

blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
28 nov. 2013 à 18:29

Récapitulatif, j'ai ça...le html

<select style="width: 208px; height: 18px;" name="liste3" OnChange="ChoixTypoGlobale(this.value)">
<option value="jura">jura</option>
<option value="jurademibold">jurademibold</option>
</select>

ça le javascript (dans un frame)

function ChoixTypoGlobale(value) {
		var fram = parent.frames['droite'];
		fram.document.getElementById("titre").className=toto;

le css

.toto {
font-family: jurademibold;  }

re css

@font-face {
    font-family: 'jurademibold';
    src: url('http://www.terminal-media.fr/dev/visite/fonts/jura-demibold-webfont.eot');
    src: url('http://www.terminal-media.fr/dev/visite/fonts/jura-demibold-webfont.eot?#iefix') format('embedded-opentype'),

    src: url('http://www.terminal-media.fr/dev/visite/fonts/jura-demibold-webfont.ttf') format('truetype'),

    font-weight: normal;
    font-style: normal;
}

et ça ne fonctionne pas, où se trouve le bug

Réponse 3 / 5

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 28/11/2013 à 22:59

met des guillemets a toto

function ChoixTypoGlobale(value) {
  var fram = parent.frames['droite'];
  fram.document.getElementById("titre").className='toto';

j'ai repris le code pour tester sans frame

<!DOCTYPE html>

<style type="text/css">

body{
font-family: Georgia,Serif
}

@font-face {
    font-family: 'jurademibold';
    src: url('http://www.terminal-media.fr/dev/visite/fonts/jura-demibold-webfont.eot');
    src: url('http://www.terminal-media.fr/dev/visite/fonts/jura-demibold-webfont.eot?#iefix') format('embedded-opentype');

    src: url('http://www.terminal-media.fr/dev/visite/fonts/jura-demibold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal; 
}

.toto {
font-family: jurademibold;
}

</style>
 
<script type="text/javascript">

function ChoixTypoGlobale(value) {
  
  document.getElementById("titre").className='toto';
  }
</script>
</head>
<body>

<div id='titre' style='height:300px;width:200px'>Et maintenant j'aimerai utilisé des polices embarquées c'est à dire présente (en dur) sur le site dans le code css et non pas les polices installées sur les machines des ulilisateurs et pour ça j'ai essayé plein de possibilité mais là je bloque, merci pour votre avis... </div>

<button onclick='ChoixTypoGlobale()'>change police</button>
<br><br>
</body>
</html>

Réponse 4 / 5

blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
Modifié par blog-machine le 1/12/2013 à 19:15

Ca marche impeccable, merci et sans les frames. J'avais oublié les quotes sur toto et l'url des polices ne devait pas être correcte

voici le lien qui mène à l'exemple
http://www.terminal-media.fr/dev/polices.htm

Mais problème comment faire pour que ça marche avec une liste déroulante


<form name="form" action="">
<select style="width: 208px; height: 18px;" name="liste" OnChange="ChoixTypoGlobale()">
<option value="bonvenocflight">Bonveno</option>
<option value="jurademibold">Jura</option>
</select>

fusionner les deux fonctions choix police et selected index et là ça ce complique puisque l'on appel une fonction et non plus une police système

cs

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 1/12/2013 à 21:39

utilise une seule fonction avec un parametre et dans le selecte met comme valeur pour chaque police le nom de la class et ajoute this.value comme parametre a l'appel de la fonction

function ChoixTypoGlobale(value) {
  
  document.getElementById("titre").className=value;
  }

<form name="form" action="">
<select style="width: 208px; height: 18px;" name="liste" OnChange="ChoixTypoGlobale(this.value)"
<option value="police1">Bonveno</option>
<option value="police2">Jura</option>
</select>

blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
3 déc. 2013 à 18:24

Okay ça marche très bien, merci beaucoup sans ton aide j'aurai mis 6 mois avant de trouver quoi que ce soit.

Dernier détail qui me chiffonne (et après je te fiche la paix, promis, je clos le fil) J'ai essayé dans tous les sens mais pourquoi cela ne fonctionne pas avec des frames

Est ce parce que html5 ne reconnait pas les frames ?

Pourtant avec les autres fonctions (un peu différente mais pas tant que ça ça marche) J'ai beau chercher je ne trouve pas.

interrogation anxieuse...

le html

<form name="form" action="">
<td><select style="width: 208px; height: 18px;" name="liste3" OnClick="ChoixTypoGlobale(this.value)">

<option value="police1">Bonveno</option>
<option value="police2">jurademibold</option>
</select>
</form>

le css


@font-face {

     font-family: 'jurademibold';
    src: url('http://www.terminal-media.fr/webapp/fonts/jura-demibold-webfont.eot');
etc etc }
...

.police1 {   font-family: jurademibold;   }
.police2 {   font-family: bonvenocflight; }

le js

function ChoixTypoGlobale(value) {
		var fram = parent.frames['droite'];
  		fram.document.getElementById('titre')..className=value;
		fram.document.getElementById('fonction').className=value;
		fram.document.getElementById('adresse').className=value;
		var ValeurPolice = value;
		
}

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
6 déc. 2013 à 09:35

et a tu essayé en mettant le css de la police dans la frame ?

blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
6 déc. 2013 à 18:10

Oui le css dans le frame droite et aussi dans le frame gauche là où se trouve la liste déroulante

pourtant d'autres fonctions similaires fonctionnent parfaitement

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
6 déc. 2013 à 21:27

il y a aussi le domaine (meme adresse) si il n'est pas le meme entre la page mere et les frames la on est sur que ça ne marche pas

sinon les frames ne sont plus utilisé car on a vite fait de se perdre elles sont même déprécié avec le html5

blog-machine Messages postés 114 Date d'inscription samedi 27 juillet 2013 Statut Membre Dernière intervention 7 mai 2014
7 déc. 2013 à 18:02

Effectivement cette technique des frames devient obsolète avec HTML5 et comme je ne vois pas de solution dans ce cas précis, je réviserai mon projet sans frames et tant pis car le plus important c'est d'avoir la résolution de mon problème qui était : Comment utiliser des polices embarqués avec une liste déroulante. Et là j'ai la solution.

Merci Kazma, pour ta patience, pour tes précieuses réponses et les exemples que tu n'as pas manqué de préciser. Merci parce que la solidarité d'Internet existe et grâce à ton action, un peu plus de 20 ans après l'arrivée du Web elle est toujours d'actualité.

Et je t'invite avec ma modeste participation au net à parcourir mon site qui est aussi une forme de partage, pour écouter, regarder, découvrir et forcément lire et s'informer. Sincèrement merci.

Discussions similaires

Partie entiére d'un nombre

integrer une variable javascript dans un lien hypertext

est-ce que "goto" existe en javascript ?

Partie entière d'un nombre

Redirection par header ou javascript?

Votre réponse

Discussions similaires