Changer police par rapport a un select
Chris52
-
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un select qui contient plusieurs police.
<select>
<option>Arial</option>
<option>Century</option>
<option>Time New Roman</option>
</select>
ensuite en dessous j'ai un paragraphe
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo purus, ultrices a mattis malesuada, posuere id diam. Curabitur tristique ipsum consectetur eros vulputate consequat. Cras venenatis,
</p>
Comment faire pour changer la police du paragraphe selon la police choisi dans le select ?
Merci
J'ai un select qui contient plusieurs police.
<select>
<option>Arial</option>
<option>Century</option>
<option>Time New Roman</option>
</select>
ensuite en dessous j'ai un paragraphe
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla leo purus, ultrices a mattis malesuada, posuere id diam. Curabitur tristique ipsum consectetur eros vulputate consequat. Cras venenatis,
</p>
Comment faire pour changer la police du paragraphe selon la police choisi dans le select ?
Merci
A voir également:
- Changer police par rapport a un select
- Changer dns - Guide
- Changer police facebook - Guide
- Police aptos - Accueil - Bureautique
- Changer carte graphique - Guide
- Police instagram - Guide
2 réponses
Bonjour,
il faut que vous utilisiez les feuilles de style CSS pour indiquer la police(ainsi que ses polices de remplacement) et javascript pour changer de style.
La police Century n'étant pas standard(pas une police que tout le monde à sur son ordinateur) elle risque de ne pas s'afficher.
Le web est limité pour pas mal de chose, le but étant que tout le monde quelque que soit son OS(mac, windows, linux) et les polices de caractères qu'il a dans son ordinateur. Méfiez vous aussi si vous prévoyez un affichage/mise en page précis à la ligne près suivant les polices les dimensions vont changer et 'casser' votre mise en page précise, cela provoque au mieux un décalage au pire un bug d'affichage.
@google: 'apprendre CSS' (c'est la propriétés font-family pour indiquer une ou plusieurs police, les suivantes étant celle de remplacement, le times New roman est pas présent sur tout les OS-mac et Linux risquent de ne pas les avoir vous pouvez utiliser une autre police 'serif' lui ressemblant et que ces systèmes d'exploitation ont par défaut)
@google: 'apprendre javascript'
il faut que vous utilisiez les feuilles de style CSS pour indiquer la police(ainsi que ses polices de remplacement) et javascript pour changer de style.
La police Century n'étant pas standard(pas une police que tout le monde à sur son ordinateur) elle risque de ne pas s'afficher.
Le web est limité pour pas mal de chose, le but étant que tout le monde quelque que soit son OS(mac, windows, linux) et les polices de caractères qu'il a dans son ordinateur. Méfiez vous aussi si vous prévoyez un affichage/mise en page précis à la ligne près suivant les polices les dimensions vont changer et 'casser' votre mise en page précise, cela provoque au mieux un décalage au pire un bug d'affichage.
@google: 'apprendre CSS' (c'est la propriétés font-family pour indiquer une ou plusieurs police, les suivantes étant celle de remplacement, le times New roman est pas présent sur tout les OS-mac et Linux risquent de ne pas les avoir vous pouvez utiliser une autre police 'serif' lui ressemblant et que ces systèmes d'exploitation ont par défaut)
@google: 'apprendre javascript'
Salut,
Voila une solution en JS:
Voila une solution en JS:
<html>
<head>
</head>
<body>
<select id="fonts" name="fonts">
<option value="arial">Arial</option>
<option value="century">Century</option>
<option value="Times New Roman">Times New Roman</option>
</select>
<div id="lipsum" style="font-family: arial">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pulvinar semper semper. Vivamus vehicula sodales dui, a blandit eros consequat at. Sed pulvinar ipsum at ligula bibendum et sagittis justo tempus. Phasellus massa turpis, pellentesque quis vehicula in, volutpat a est. Nam aliquet gravida nunc vitae vestibulum. Integer ac elit vel risus consequat laoreet et nec metus. Praesent fermentum eros eu nulla cursus ullamcorper. Duis lacinia metus eget ante ornare suscipit tincidunt ac ipsum. Sed ante diam, convallis id tristique varius, luctus in quam. Sed porta lacus eu ligula pulvinar aliquam. Etiam viverra arcu sit amet orci blandit commodo. Mauris eget sem in nisi lobortis egestas. Duis gravida tempus nulla, ac tincidunt ligula dictum et. Nunc ante lectus, ultricies at tincidunt eu, luctus ut mauris. Fusce eget nisl sed nisi laoreet tincidunt. Cras fermentum adipiscing arcu nec sagittis.
</div>
<script type="text/javascript">
var fontSelector = {};
fontSelector.engine = {
_initialize: function(){
this.addEventListener();
},
addEventListener: function(){
var me = this;
var select = document.getElementById('fonts');
select.addEventListener('change', function(){me.updateFont(select.options[select.selectedIndex].value)}, true);
},
updateFont: function(font){
document.getElementById('lipsum').style.fontFamily = font;
}
}
fontSelector.engine._initialize();
</script>
</body>
</html>