Exposition Graphique : ZeRTy Darki et 18 utilisateurs inconnus

 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet :

Police sur site?

 
n°3190
bboyfreeman
Profil : New Penguin
Avatar
profil
Posté le 15-03-2010 à 12:19:41  
 

Bonjour je suis un newbie et j'ai besoin de modifier une police pour les titres de mon site voila la ligne de code!
 
 <div id="templatemo_content">
     
        <div id="canadaprovinces" class="glidecontentwrapper">
         
            <div class="glidecontent"> <!-- page 1 ( Home ) -->
             
             <div class="header_01">Bienvenue au club </div>
 
 
Je voudrais que Bienvenue au club soit écrit d'une manière manuscrite un peu comme cette exemple http://pagesperso-orange.fr/pochoirs/pochoirsalphabets/pochoiralphabet10.jpg

answer
mood
GoogleAds
profil
Posté le 15-03-2010 à 12:19:41  
 

answer
n°3191
Mutsu
Carpe Diem
Profil : Penguin Pro
Avatar
profil
Posté le 15-03-2010 à 12:39:34  
 

Bonjour,
Lorsque tu fais un site web, Tu ne peut utiliser que des polices "universelles". C'est à dire existante sur une majorité des ordinateurs (Mac et PC).
Lorsque tu veut utiliser une police spéciale pour un titre, tu doit faire une image dans laquelle tu écris "Bienvenue au club", et que tu incruste à la place de ton titre.
 
J'espère que je suis assez claire :d.
Bonne continuation.


---------------
.::Mon iGloo::. http://img683.imageshack.us/img683/5245/mutsunoel.png .::Mon Flickr::.
 
Hey mon ami ! T'aime ça la procrastination ? Viens Procrastiner en pixel avec graphic-guestbook !!!
answer
n°3192
cisoun
Pingouin libre
Profil : Penguin Pro
Avatar
profil
Posté le 15-03-2010 à 12:51:34  
 

Hello!
 
Plus maintenant! Avec l'arrivée des nouvelles normes HTML, tu peux utiliser une police stockée sur le serveur à condition que le navigateur du visiteur soit récent et conforme à ces normes.
 
Si tu veux utiliser cette technique, je t'invite à lire ceci:
https://developer.mozilla.org/fr/CSS/@font-face (Je précise qu'ils citent ici que cela ne fonctionne pas sous Linux, or, c'est faux.)
http://fr.selfhtml.org/css/proprie [...] police.htm
http://covertprestige.info/css/font-face/
 
Mais actuellement, faire une image est encore recommandé (un petit PNG suffit). ;)


---------------
Gnome-look | Serveur perso | DeviantART | Igloo | Flickr
answer
n°3193
Mutsu
Carpe Diem
Profil : Penguin Pro
Avatar
profil
Posté le 15-03-2010 à 13:12:38  
 

Ah m*rde !
Je ne me tiens plus assez au courant des nouveautés du web. Merci de tes précisions Cisoun. :)


---------------
.::Mon iGloo::. http://img683.imageshack.us/img683/5245/mutsunoel.png .::Mon Flickr::.
 
Hey mon ami ! T'aime ça la procrastination ? Viens Procrastiner en pixel avec graphic-guestbook !!!
answer
n°3194
bboyfreeman
Profil : New Penguin
Avatar
profil
Posté le 15-03-2010 à 13:48:41  
 

Merci pour vos informations ^^

answer
n°3195
Chaodam
Everybody lies
Profil : Penguin Pro
Avatar
profil
Posté le 15-03-2010 à 17:35:54  
 

cisoun a écrit :

Hello!
 
Plus maintenant! Avec l'arrivée des nouvelles normes HTML, tu peux utiliser une police stockée sur le serveur à condition que le navigateur du visiteur soit récent et conforme à ces normes.
 
Si tu veux utiliser cette technique, je t'invite à lire ceci:
https://developer.mozilla.org/fr/CSS/@font-face (Je précise qu'ils citent ici que cela ne fonctionne pas sous Linux, or, c'est faux.)
http://fr.selfhtml.org/css/proprie [...] police.htm
http://covertprestige.info/css/font-face/
 
Mais actuellement, faire une image est encore recommandé (un petit PNG suffit). ;)


 
 
T'as oubliés plusieurs trucs aussi  :smile:  
 
En fait tu peux utiliser les fonts personnalisées sur TOUT les browsers actuels (je parle d'IE, Chrome, Safari, Opera (pas sûr) et Firefox) :
 
Seulement pour chacune des polices tu auras besoin de plusieurs versions de fichiers, chacun des browsers ne fesant pas comme l'autre, ça donne un beau bordel :troll:  
 
Le .ttf est supporté par Firefox (et dérivés), Safari, Chrome et Opera
le .otf est supporté par Firefox, Safari et Opera
le .eot est uniquement supporté par Internet Explorer qui ne supporte rien d'autres
le .svg est supporté par Safari, Chrome et Opera (ironique pour Firefox non ? :ane: )
 
Donc admettons tu est tout content, tu as ta font en .ttf, donc tu as bien lu ce que je t'ai dit donc tu en déduis que ta font va fonctionner sur à peu près tout. Sauf sur Internet Explorer et les browsers qui ne supporte que le svg (tel que le Safari de l'iPhone). Donc tu balances ta font dans ce petit générateur @font-face kit generator  
 
Donc après le site te fous une archive avec des fichiers d'exemple, regarde le code CSS pour comprendre comment ça marche :great:  
 
Après il y a d'autres techniques qui permettent d'appliquer des polices autrement que par le CSS qui utilise du JS ou du Flash, je te conseille cet excellent article sur le sujet chez Smashing Magazine.
 
 
Saches aussi que le fonctionnement de font-face est extrêmement anarchique, j'ai du parfois me battre pour avoir un truc qui marche :paf:


---------------
Tweet me I'm famous - Last.fm, because music is my drug - Portfolio
answer
n°3196
cisoun
Pingouin libre
Profil : Penguin Pro
Avatar
profil
Posté le 15-03-2010 à 18:48:29  
 

Chaodam a écrit :


Internet Explorer


 
Ahahaha! :mdr:  
/me part attendre la version 9 pour rigoler!
Vivement une chose: que les normes W3C soit enfin respectées pour de bon par tous les navigateurs!
 
Mais merci pour ces précisions! ;)


---------------
Gnome-look | Serveur perso | DeviantART | Igloo | Flickr
answer
n°3248
nossoctoruss
Profil : New Penguin
Avatar
profil
Posté le 29-05-2010 à 23:32:47  
 

je pense plutot,que,deja,c'est exacte,je suis novis mais je le sais,on peut utiliser une police particuliere,du moment qu'elle est stokée sur un serveur,mais il est vrais que sa doit ere un beau bordel,car si je ne me trompe,ttf,qui est tres souvent utilisée,est un format windows,ce qui fait que si tu est un des adorateur de l'os du petit pingoin^^,sa doit foutre un beau bordel!
                                                                             | |
<<=========================================_ |
ps:

Citation :

Chaodam à ecrit:
Le .ttf est supporté par Firefox (et dérivés), Safari, Chrome et Opera  
le .otf est supporté par Firefox, Safari et Opera  
le .eot est uniquement supporté par Internet Explorer qui ne supporte rien d'autres  
le .svg est supporté par Safari, Chrome et Opera (ironique pour Firefox non ? :ane: )  
 
Donc admettons tu est tout content, tu as ta font en .ttf, donc tu as bien lu ce que je t'ai dit donc tu en déduis que ta font va fonctionner sur à peu près tout. Sauf sur Internet Explorer et les browsers qui ne supporte que le svg (tel que le Safari de l'iPhone).


il exixte un html,ou javascript,qui fait unechose different action a chaque browser,tu peu donc choisir de mettre tel ou tel format suivant le browser ;)


Message édité par nossoctoruss le 29-05-2010 à 23:44:21
answer
n°3264
jcbrinfo
JCBR Info
Profil : Penguin
Avatar
profil
Posté le 31-05-2010 à 23:13:58  
 

Moi, quand j'ai besoin de faire des titres avec une police spéciale je fais quelque chose du genre:

Code :
  1. <h1>
  2. <img src="monTire1.png" width="99" height"99" alt="Le tire" />
  3. </h1>
 

C'est simple, ça coûte rien (contrairement à la conversion des polices vers certains formats propriétaires), ça marche partout et les aveugles sont contents (grâce à h1 et à l'attribut alt). :wink:

 

PS: Je sais, ce genre de solution à déjà été évoqué plus haut. :mdr:  Mais, je voulais apporter quelques précisions.

Message cité 1 fois
Message édité par jcbrinfo le 31-05-2010 à 23:14:33

---------------
JCBR Info
answer
n°3265
mitsuko-b
No fue Shimatta !
Profil : Big Penguin
Avatar
profil
Posté le 01-06-2010 à 10:01:14  
 

jcbrinfo a écrit :

Moi, quand j'ai besoin de faire des titres avec une police spéciale je fais quelque chose du genre:

Code :
  1. <h1>
  2. <img src="monTire1.png" width="99" height"99" alt="Le tire" />
  3. </h1>


C'est simple, ça coûte rien (contrairement à la conversion des polices vers certains formats propriétaires), ça marche partout et les aveugles sont contents (grâce à h1 et à l'attribut alt). :wink:  
PS: Je sais, ce genre de solution à déjà été évoqué plus haut. :mdr:  Mais, je voulais apporter quelques précisions.


 
Hello.
 
Ne le prend pas mal jcbrinfo mais je ne vois absolument pas ce que fait <h1></h1> ici !
Le titre est une simple image pas un texte. Et  l'attribut alt n'est aucunement concerné par h1...
 
<h1> à <h5> permettent de créer plusieurs dimensions de polices à afficher sur un site.
En général, <h1> sert pour les titres, <h2> les sous-titres, <h3> etc... et <h5> pour le texte en général.
 
Pour en revenir au sujet principal de bboyfreeman,
ajoute donc dans ton code CSS quelque chose comme ceci :
 
.header_01 {
font-family: "Hoefler Text", Baskerville, Garamond, "Palatino Linotype", Georgia, "Times New Roman", serif;
}

 
Là, le navigateur du visiteur regardera les polices présentes dans la machine et affichera, dans l'ordre, la première police de la liste qu'il trouvera.


Message édité par mitsuko-b le 01-06-2010 à 10:02:55

---------------
http://kefrens.olympe-network.com/img/logo.png.
answer
n°3266
nossoctoruss
Profil : New Penguin
Avatar
profil
Posté le 01-06-2010 à 17:23:44  
 

oui,mais il existe un html qui ressemble au code pour changer la couleur de police( <font color="xxxxxx"> ) mais je l'ai oublié^^",c'est balo...++

answer
n°3267
mitsuko-b
No fue Shimatta !
Profil : Big Penguin
Avatar
profil
Posté le 02-06-2010 à 09:03:42  
 

nossoctoruss a écrit :

oui,mais il existe un html qui ressemble au code pour changer la couleur de police( <font color="xxxxxx"> ) mais je l'ai oublié^^",c'est balo...++


Exact :
<font color="#000000"> code couleur à 6 chiffres et/ou lettre,
<font face="nom de police, autre police, etc"> pour changer le style d'écriture et j'en passe.
 
Mais dans ce cas, tu ne respecte pas les standards !
Il est préférable de faire ces modifications depuis le fichier .css plutôt que directement depuis la page .html ou autre.


Message édité par mitsuko-b le 02-06-2010 à 09:15:21

---------------
http://kefrens.olympe-network.com/img/logo.png.
answer
n°3273
jcbrinfo
JCBR Info
Profil : Penguin
Avatar
profil
Posté le 05-06-2010 à 05:05:28  
 

@mitsuko-b: Le <hquelque chose> que j'ai mis, c'est juste pour la sémantique. Comme cela, un lecteur d'écran sait pertinemment que l'attribut alt doit être lu comme un titre (logique). :wink: De plus, si l'image ne se charge pas, la valeur de alt est stylisée selon ce qui englobe l'image (ici, un titre).

 

Note: Le <h1> de mon exemple peut être très bien remplacé par <h2>, <h3>, etc. selon le niveau désiré.
Note2: Le <h1> de mon exemple remplace ici le div. (les deux sont des éléments de bloc)

 

@nossoctoruss: Comme écrit mitsuko-b, pas de balise font S.V.P.  :mad: CSS remplit ce rôle avec sa propriété color, entre autres. C'est pour cette raison que la balise font est déprécié ("depreciated" et inexistante dans certaines variantes de HTML). :wink:

 

Si tu as des blancs de mémoire concernant le HTML ou le CSS, je te conseille le site (vieux, mais une bonne référence): http://fr.selfhtml.org/

 

PS: Si ton site se destine aux connexions lentes (et / ou aux téléphones), je te déconseille ma méthode (qui utilise des images) et te conseille plutôt de complètement styliser tes titres en CSS. (plus léger que des images)


Message édité par jcbrinfo le 05-06-2010 à 05:37:43

---------------
JCBR Info
answer

Aller à :
Ajouter une réponse