logo

NPDS : Gestion de contenu et de communauté


Content & Community Management System (CCMS) robuste, sécurisé, complet, performant, parlant vraiment français, libre (Open-Source) et gratuit.
24 visiteur(s) et 0 membre(s) en ligne.
Activité du Site

Pages vues depuis 25/05/2001 : 110 172 530

  • Nb. de membres 8 696
  • Nb. d'articles 1 695
  • Nb. de forums 26
  • Nb. de sujets 8
  • Nb. de critiques 92

Top 10  Statistiques

Sites Web : Une police 6985


police1 police2

Comment utiliser des polices "Speciales" sur son site et pourquoi faire ?

Lors de la création d'un site web, le choix des polices est assez limité puisqu'il est réduit aux polices dites standard, c'est-à-dire celles qui sont installées par défaut avec l'OS. Bien sûr, lorsqu'on précise la police à utiliser, on en propose plusieurs autres ainsi qu'une générique afin de pallier l'absence éventuelle de cette police. Pour afficher quand même nos belles lettres, on crée des images contenant du texte en local. En fait on crée des boutons en général. Ainsi, on a le choix entre toutes les polices de notre machine et le visiteur de votre site verra exactement la même chose que nous.(Ce sont des images c'est normal !) Mais cette technique ne peut hélas s'étendre à autre chose qu'aux titres de pages, aux menus et éventuellement à de petits textes (et encore...) à cause du temps de telechargement de ces images.

Avec NPDS on voit se développer de plus en plus des menus constitués directement de texte, des hyperliens. Pourquoi ? Parce que c'est ultra rapide d'afficher du texte, et surtout que c'est gérable dynamiquement. On peut le modifier tres simplement, une image, elle, est fixe.

Il y a donc 2 interets à avoir sa propre police: Faire de beaux textes, et faire de beaux boutons rapidement. .....Oui mais COMMENT ?

police3 police4

Inclure une police dans notre site web.

Cette technique porte le doux nom de font !!embed!!ding (en gros, "inclusion de police", enfin, vous voyez...) et consiste à créer un fichier contenant certains caractères d'une police donnée, à mettre ce fichier sur son site et à utiliser ce fichier pour afficher du texte dans cette police.

Comme d'habitude, on trouve deux standards : les !!embed!!ded OpenType (fichiers .eot) fonctionnant sous Internet Explorer, et les TrueDoc (fichiers .pfr, pour "Portable Font Resource") destinés aux utilisateurs de Netscape, Mozilla, etc. Mais on est habitués, non ?

Chacun des deux formats permet de ne convertir qu'une partie des caractères disponibles dans une police, de façon à alléger la fichier résultant. Mais on peut évidemment convertir entièrement la police, afin de pouvoir afficher du texte de manière dynamique. (et ça c'est cool !)


Et qu'est ce qu'on gagne ?

  1. Il n'est plus nécessaire de créer nos vingt titres de sections au format GIF ou JPEG pour être sûr que les visiteurs les verront bien dans cette jolie police que vous avez mis tant de temps à créer (ou pour laquelle vous avez dépensé tant d'argent). Le temps de chargement de vos pages s'en trouve considérablement réduit puisqu'au lieu de charger plusieurs images, seule la police est chargée.(16ko) Et comme elle est mise en cache, vous pouvez l'utiliser dans toutes vos pages !
  2. Les deux formats vous assurent que les polices ne pourront pas être réutilisées par d'autres personnes. En effet, chaque fichier .eot ou .pfr contient une liste des adresses ayant le droit d'utiliser la police. Ces adresses sont à spécifier lors de la création du fichier.


Comment ça marche ?

Il faut tout d'abord fabriquer le fichier .eot qui contiendra tous les caractères utiles (éventuellement tous ceux de la police). Microsoft, sûrement par pur altruisme ! et certainement pas pour une question de part de marché..., propose gratuitement WEFT (pour "Web !!embed!!ding Fonts Tool"), qui permet de fabriquer un fichier .eot à partir de n'importe quelle police installée sur votre machine. Enfin, je dis "n'importe quelle police" mais je m'emporte un peu... Il faut que l'opération soit autorisée, ce qui n'est pas toujours le cas. Rassurez-vous, pour chaque police trouvée, WEFT vous signale si c'est une police standard (inutile de l'inclure) ou si elle est interdite à toute inclusion.

Une fois ce fichier créé, il suffit d'ajouter un code comme celui qui suit dans les pages où vous souhaitez inclure votre police (ou bien dans votre feuille de style) :

Donc pour le Portail NPDS, on utilise la CSS:
BODY {
background: #FFFFFF;
font-family: VotrePolice et les autres;
font-style: normal;
font-weight: normal;
src: !url(!
http://Votre_site/Votre_rep/Police.eot);
}
Je ne développe pas la methode des fichiers *.pfr, d'abors parce qu'il necessitent le telechargement d'un ActiveX ce qui est chiant lorsqu'on surf, mais surtout parce le programme qui encode les polices est introuvable ! ( HexWeb Typography ).

Note : Génial, m'en vais tester ça de suite smiley
lactique Publié le : Samedi 14 août 2004 à 11:09

lactique lactique
Apparement, ya du boulot pour que ça marche :)


Je cherche encore moi meme... l'inconveinant est de ne pas avoir installer la police sur son ordi pour vérifier si ça marche, en l'occurence donc j'ai désinstaller ma police et je la vois pu :)


d'ailleurs les sources de mon npds affichent Arial a la place....


J'ai remplacé TOUTES les polices par la special dan sle CSS et ça marche quand meme pas...


faudra que j'essaye avec un autre site html pure, le php a peut etre du mal....
lactique lactique
http://www.allhtml.com/telechargement/logiciel72.php


Donc Mozilla et autres sont OUT :(


Je continue mes tests sur IE, etmeme la c'ets po gagné...


je crois avoir trouvé une version Fr de weft sur le lien la haut. Je vais voir
XIII XIII
je n'utilise jamais de boutons menus : que des textes liens "habillés" par mes css afin de garantir une bonne circulation des moteurs dans les arborescences completes de mes sites.




Pour infos, ton lien "http://lewoz.free.fr" ne m'affiche pas ta police Cosmos (que j'ai pu voir ds ton code-source) mais une police par defaut.




Ce qui veut dire que mon navigateur ne va pas chercher ta police Cosmos dans ton fichier COSMOSE0.eot comme tu le lui demande ds ton code.




(Suis en XP Pro SP1, surfant sur IE 6.0.2600)






http://lewoz.free.fr


=========================


<!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>Document sans nom</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">




@font-face {


font-family: "Cosmos-Extra";


font-style: normal;


font-weight: normal;


src: url(http://lewoz.free.fr/themes/COSMOSE0.eot);


}




h1 {


font-family: "Cosmos-Extra";


font-size: 20px;


text-align: center;


color: black;


}




</style>


</head>




<body>


<table><tr><td><p><font face=Cosmos-Extra>jkhlkulkglgjlhhghkghjhfkjfkjhgfkkhkukyyujgl</font></p></td></tr></table>


</body>


</html>


=====================================
lactique lactique
Merci XII pour l'aide au beta testing lol


en effet j'ai mis en test un epage html simple pour tester l'astuce a sa plus simple apparence, et makache, meme IE ne voit rien grrrr.....


Donc je cherche encore, peut etre au niveau du programme, peut etre au niveau du code....
rickar rickar
Je n'ai pas très bien compris : les visiteurs qui ont mozilla par ex ne verront pas la police utilisée si on utilise un fichier .eot ?
lactique lactique
http://www.truedoc.com/webpages/getstart/get_start.htm




http://webmonkey.wired.com/webmonkey/design/fonts/tutorials/tutorial2.html
Les commentaires sont la propriété de leurs auteurs. Nous ne sommes pas responsables de leur contenu.