Javascript avec polices embarquées [Résolu]

blog-machine 114 Messages postés samedi 27 juillet 2013Date d'inscription 7 mai 2014 Dernière intervention - 25 nov. 2013 à 18:06 - Dernière réponse : blog-machine 114 Messages postés samedi 27 juillet 2013Date d'inscription 7 mai 2014 Dernière intervention
- 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...
Afficher la suite 

Votre réponse

12 réponses

@karamel 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - Modifié par kazma le 25/11/2013 à 22:32
0
Merci
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 114 Messages postés samedi 27 juillet 2013Date d'inscription 7 mai 2014 Dernière intervention - 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 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - 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.
Commenter la réponse de @karamel
blog-machine 114 Messages postés samedi 27 juillet 2013Date d'inscription 7 mai 2014 Dernière intervention - 28 nov. 2013 à 18:29
0
Merci
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


Commenter la réponse de blog-machine
@karamel 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - Modifié par kazma le 28/11/2013 à 22:59
0
Merci
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>

--
Commenter la réponse de @karamel
blog-machine 114 Messages postés samedi 27 juillet 2013Date d'inscription 7 mai 2014 Dernière intervention - Modifié par blog-machine le 1/12/2013 à 19:15
0
Merci
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
Commenter la réponse de blog-machine
@karamel 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - Modifié par kazma le 1/12/2013 à 21:39
0
Merci
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 114 Messages postés samedi 27 juillet 2013Date d'inscription 7 mai 2014 Dernière intervention - 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 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - 6 déc. 2013 à 09:35
et a tu essayé en mettant le css de la police dans la frame ?
blog-machine 114 Messages postés samedi 27 juillet 2013Date d'inscription 7 mai 2014 Dernière intervention - 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 1661 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 août 2018 Dernière intervention - 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 114 Messages postés samedi 27 juillet 2013Date d'inscription 7 mai 2014 Dernière intervention - 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.
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.