- Etonnant : l’anatomie des lettres
Savez-vous vraiment ce qu’il se passe à l’intérieur d’une typo, mmmh ? C’est la question quelque peu incongrue que s’est(...)
Webdesign - 22 décembre 2010 :: 09:15 :: Par Eric
Comparer et installer polices de caractères exotiques en HTML (JavaScript + CSS)
Articles similaires
- Etonnant : l’anatomie des lettres
Savez-vous vraiment ce qu’il se passe à l’intérieur d’une typo, mmmh ? C’est la question quelque peu incongrue que s’est(...)
Ajouter un commentaire
- L'anonymat n'est pas incompatible avec la courtoisie et le respect de chacun.
- Les messages injurieux, agressifs, les critiques gratuites et non argumentées et les attaques personnelles seront supprimés et leurs auteurs bloqués.
- Les commentaires insinuant que tel article est "sponsorisé" par telle marque simplement parce-qu'il va à l'encontre de l'opinion d'untel seront également supprimés.
- Idem pour les commentaires publicitaires ou spams.
- Pour signaler une faute de frappe ou de syntaxe, contactez-nous exclusivement via cette page.
La vie en Web !
Presse-citron est un site d'information sur les tendances et les bons plans du web, les médias sociaux et les technologies mobiles.
Articles récents
Derniers commentaires
- Idem je n'ai jamais eu de difficulté à retrouver mes mails. Quand on vient de lotus notes on passe même...Renaud
- Tout simplement génial ^^ Du moins dans le concept, je n'ai pas encore essayé de l'intégrer sur un site....tatsu
- "Soit ce truc est un fake[1], soit c’est une révolution. Soit Apple le rachète avant l’été." J'ai eu la même conclusion...Gourmet
- Moi non plus, je n'ai jamais eu le moindre problème pour trouver mes mails avec la barre de recherche que...louis3000
- J'ai deux question : A quel distance faut-il se trouver pour que ça marche ? (Plus précis que le Kinect,...Ajorr







Le Point
26 commentaires pour "Comparer et installer polices de caractères exotiques en HTML (JavaScript + CSS)"
1
Benoit le 22 décembre 2010 à 09:29
Bonjour,
on peut aussi utilser directement l’api webfont de google qui n’utilise que css et est compatible avec tous les navigateurs.
http://code.google.com/intl/fr.....uick_Start
2
Benoit Chleide le 22 décembre 2010 à 09:36
Dans le même ordre d’idée, il existe aussi « cufón » qui vous permet d’utiliser n’importe quelle police (pour laquelle vous disposez des droits d’utilisation) sur votre site. Ce système utilise du JavaScript et ne fait cette fois pas appel à un script externe. L’utilisation en est d’ailleurs très simplifiée grâce à la mise à disposition d’un générateur : http://cufon.shoqolate.com
3
MarcoAix le 22 décembre 2010 à 09:52
You-hou enfin… je vais vérifier mais la chose m’a l’air géniale !
4
vicnent le 22 décembre 2010 à 10:04
« (…) ce qui ne vous met pas à l’abri d’un changement en cas de fermeture de celui-ci. Cela étant, avec Google le risque est quand même relativement limité ».
Merci pour ce sourire matinal. J’utiliserai donc dorénavant aussi le « relativement limité » pour des événements dont la probabilité d’apparition est inférieure à 10^-50. Par exemple : « Ségolène Royal sera présidente de la république française en 2012 est un risque relativement limité ».
Sinon, oui, ça a l’air sympa. (Même si la Suède est en train de devenir un pays de cauchemar : viols, pb d’intégration, …)
5
Taunter le 22 décembre 2010 à 10:08
Les Web Font sont maintenant supportées par les navigateurs courants (mis à part Opera Mini).
Pourquoi utiliser des bidouillages quand on a une technologie prévue pour le faire ?
6
Eric le 22 décembre 2010 à 10:31
@Benoit Chleide @Taunter : merci pour ces précisions
7
Alexandre le 22 décembre 2010 à 11:05
Insérer une police particulière est une problématique que nous rencontrions souvent dans l’agence web où je travaille. Jusqu’à il y a peu, nous utilisions le cufon suggéré par Benoît ci-dessus mais ce javascript rend la page web très lourde en poids puisque les textes sont convertis en .png.
Un ami s’est longtemps penché sur la question et propose THE solution pour utiliser toutes les fonts que vous souhaitez très proprement et compatible avec tous les navigateurs (ce qui n’est pas le cas de cufon) : http://www.eboyer.com/dev/653-.....vigateurs/
8
Marie le 22 décembre 2010 à 11:13
Cufon fait plus l’unanimité à ce jour car il a le mérite de ne pas sortir du flash : je l’ai adopté pour de nombreux projets et l’intégration est très aisé !
9
sushi-codeur le 22 décembre 2010 à 12:09
Techniquement, cufon est un bien bel outil qui peut s’utiliser avec toutes les polices. En revanche, les conditions d’usages des polices n’incluent que très rarement le droit de les utiliser sur le web (avec cufon ou @font-face), donc ça reste un outil utilisable assez moyennement. Le support de @font-face en css est aujourd’hui relativement étendu, ce qui limite encore un peu plus l’usage de cufon. D’ailleurs, récemment, sur la page officielle de cufon, son auteur nous invite à utiliser @font-face avec typekit…
http://typekit.com/ (payant) offre une large bibliothèque de polices (y compris venant de fonderies très connues) avec l’assurance qu’elles ont la licence pour être utilisées sur le web.
http://www.fontsquirrel.com/ offre un grand nombre de fontes utilisable avec @font-face, la plupart des typos sont gratuites. En outre, le site propose un outil pour convertir une police dans tous les formats utilisables sur le web et générer les styles correspondants.
http://www.fontspring.com/ offre également un grand nombre de polices (parfois payantes) avec une licence web.
et puis google fonts, fontdeck, …
Cet article est le plus complet que je connaisse sur le sujet : http://www.borisforconi.net/bl.....le-web/918
10
AM le 22 décembre 2010 à 12:31
@Eric « La plus simple est d’utiliser une image, avec les inconvénients que cela suppose : lourdeur de mise en oeuvre, impossibilité de gérer du exte dynamiquement » n’importe nawak, la fonction imagettftext() ne permet pas de dessiner un texte avec n’importe quelle police TrueType sur une image dynamiquement ?
11
Guillaume Tirard le 22 décembre 2010 à 14:32
Les choses ont bougé récemment. Vous pouvez inclure des polices externes en html/css sans recourir à des subterfuges JS ou SWF. Balise @font-face :
http://www.fontsquirrel.com/fontface
ou
http://typekit.com/
12
Eric le 22 décembre 2010 à 14:57
@AM : je ne connaissais pas cette fonction, désolé. Je vais me renseigner. Cela étant ton « n’importe nawak » était-il réellement indispensable ? Tu as de la chance, habituellement je supprime les commentaires qui commencent ainsi. On peut argumenter sans être inutilement arrogant ou agressif, merci.
13
AM le 22 décembre 2010 à 15:54
@Guillaume Tirard +1 c’est vrai que maintenant @font-face à était ajouté css3 et fonctionne sur tous les navigateurs.
@Eric ce n’était pas méchant. Juste étonnant que tu ne connaisse pas, car utilisée pour les captchas.
14
Iluvalar le 22 décembre 2010 à 17:14
Il y a aussi un techno CSS 3 @font-face qui permet de récuperez une police sur le web mais le support par les Navigateur Web n’est pas universelle. Le plus 3 ligne dans le fichier CSS temps pour la mise en Å“uvre 2 minute.
Marche sous Safarie 5 Mac mais Opéra 11 beta et firefox 3.6 Je n’ai pas réussis
15
macrophotographie le 22 décembre 2010 à 17:40
@font-face est une nouvelle propriété de CSS 3 qui permet de charger à la volée des polices de caractères au format TrueType (.ttf) ou OpenType (.otf) hébergées sur Internet et non sur le client.
Pour ma part c’est cette solution et de la police de remplacement commune (police sur le pc client) dans le cas d’un vieux navigateur… Arrive un moment ou il faut « imposer » au gens de se mettre à jour au niveau navigateur ( qui sont gratuits) et ne plus se faire freiner par quelques boulets (cf IE6 -7 a l’époque). On a enfin un outil, simple, efficace et surtout officielle ( norme CSS) alors je ne m’aventurerais plus dans quelconque bidouille JS
16
Jérémy le 22 décembre 2010 à 22:47
@eric AM fait référence a la fonction php imagettftext() qui permet d’écrire n’importe quel texte sur une image.
Même si le texte généré dans l’image peut être paramétré (et donc dynamique), ça reste tout de même HYPER lourd… quid du texte trop long qui nécessite parfois un retour a la ligne et dont la fenetre est en cours de redimensionnement par l’utilisateur…
IE permettait de gérer les fonts distante (a conditions d’avoir les bons droits d’utilisation) au moins depuis sa version 6. Je suis ravis que w3c l’ai normalisé dans css3 En revanche, il s’agit de purement de CSS, aucune dépendance javascript n’est nécessaire.
17
WEb PRograMMing le 23 décembre 2010 à 06:53
@Benoit Chleide @Eric, j’ai eu de maintes occasions pour utiliser cufon, je note que ce script est tres particulier :
- jquery (conflict)
- temps de chargement
- ne convient pas a tous les contenus du sites (doit specifier, h1 : title, et ainsi de suite)
- ne semble pas etre SEO friendly.
Cheers
18
Pat le 23 décembre 2010 à 09:55
@AM : tout d’abord, on dit « porte nawak »
@Eric @Jérémy trop lourd, oui et non. Une fois les images générées, il suffit de les stocker sur son serveur pour ne pas avoir à les régénérer à chaque passage. D’ailleurs, il me semble qu’un plugin WordPress le permet.
@macrophotographie : les propriétés CSS3 sont un atout indéniables dans ce genre de cas. Exceptés pour les polices qu’on paie super cher et où le premier « plouc » (désolé pour l’expression) venu va s’aventurer dans le code et piquer la police aussi sec. Certe, il ne faut pas utiliser les polices payantes, mais il faut rester prudent quant à ce genre de procédé.
19
AM le 23 décembre 2010 à 12:28
@Jérémy « AM fait référence a la fonction php imagettftext() qui permet d’écrire n’importe quel texte sur une image » c’est exactement ce que j ‘ai dit… « HYPER lourd » tout dépend de l’utilisation…
@Pat désolé pour la faute. Quand t’achète une police c’est bien souvent le droit d’utilisation, donc si le mec le pique à ses risques et périls.
20
NAS le 23 décembre 2010 à 16:19
pas mal …
en plus le code généré par google et les fonts sont récupérables facilement …
suffit de coller les URL dans le navigateur …
du coup on peut s’affranchir du côté script externe…
ex : http://fonts.googleapis.com/cs.....bset=latin
et dans le css on récup le lien de la font
http://themes.googleuserconten.....NBU0popSWA
hop …
21
NAS le 23 décembre 2010 à 16:20
les coms sont tous modérés avant affichage ou ça a buggé ?
22
NAS le 23 décembre 2010 à 16:21
ah ben ça a buggé …
je disais qu’en récupérant les urls on peut télécharger les fichiers css et la font …donc passer tout ça en local … du coup je reposte pas les urls dans le com…ça fait planter on dirait …
23
MarcoAix le 23 décembre 2010 à 22:42
Dites les gars, c’est intéressant d’avoir des avis techniques – parfois opposés, mais c’est ainsi – par contre si certains faisaient un petit effort sur le français (sans focaliser là -dessus) ça rendrait les choses tout de même plus compréhensibles.
Thanks (oops!)
24
William le 24 décembre 2010 à 11:57
Bonjour à tous,
En tant qu’intégrateur j’aurais tendance à favoriser la technique @font-face. sIFR et Cùfon étant 2 technologies non accessibles :
- dépendant de Flash ou JS
- texte non sélectionnable
- page plus lourde
J’avais écrit un modeste article sur le sujet sur mon blog :
http://www.web-actually.fr/act.....ypographie
PS : Pour ceux qui ont du mal avec la pixelisation des caractères (notamment sous Windows), pensez à utiliser la propriété CSS font-size-adjust.
PS² : Google vient d’étoffer son offre sur Google Font Directory, dorénavant c’est près de 60 polices disponibles. Par contre l’outil de prévisualisation de Google, bof bof…
En payant, vous avez aussi typekit.com, fontslive.com, fontspring etc…
Bonne fêtes de fin d’année à tous
Bien amicalement
25
Bastien Donjon le 27 décembre 2010 à 14:43
Merci pour les infos dans l’articles mais aussi dans les commentaires !
J’utilisais jusqu’à présent Cufon.
Merci
http://blog.vicus.fr
http://twitter.com/vicus