28234 sujets

CSS et mise en forme, CSS3

Font de style calligraphie

Bonjour à tous,

Je suis en train de faire un site pour laquelle la maquette utilise une police de type Script, calligraphie...

Connaissez vous les fonts "standard" de ce genre ? Ou connaissez vous un site qui recense toutes les polices communes aux différentes platefomes ?

J'ai trouvé ca : http://web.covertprestige.info/test/00-comparaison-de-fontes-pour-le-web.html dans un post de Florent je crois, mais je me demandais si il n'y avait pas autre chose...

Merci d'avance.

Cordialement,

Bruntho.
Bonjour,

Tout dépend de l'utilisation de la police: est-ce pour un titre, des menu, ou le "contenu" du site. Si c'est la dernière solution, je conseille d'utiliser un police sans-serif qui est plus facile à lire. Pour les titres (genre header) l'utilisation d'une image peut être la plus simple.

Il y a cet article qui rejoint celui de Florent que tu cite : http://www.theinternetdigest.net/archive/websafefonts.html

Mais pas de police script.
Yasashii a écrit :
Pour les titres (genre header) l'utilisation d'une image peut être la plus simple.

Non, pensons aux visiteurs étrangers qui consultent les sites en traduction Google ou aux raisons qui font que des images peuvent être désactivées. Sans parler de l'ami Google qui n'aimera pas du tout.
sIFR est un palliatif sûrement préférable (même si... voir discussion là-dessus il y a quelques semaines) pour le prob de Bruntho.
Arsene a écrit :
Non, pensons aux visiteurs étrangers qui consultent les sites en traduction Google ou aux raisons qui font que des images peuvent être désactivées. Sans parler de l'ami Google qui n'aimera pas du tout.


Pour les traduction, je ne saurais pas dire, mais pour les images désactivées et l'ami google y a le texte alternatif -_-'
Bonjour Smiley smile
Bruntho a écrit :
connaissez vous un site qui recense toutes les polices communes aux différentes platefomes ?

Code Style propose CSS font sampler and survey, un guide qui permet de savoir quelles polices sont installées sur quels systèmes.
disons qu'une fois de plus j'ai été trop vite... bien sûr qu'un titre en image "alternativé" remplit son rôle dans Google mais j'avais soupconné (injustement) Yasashii de faire la promo du "titre en image" sans passer par l'étape (utile à mon avis) de la précision qu'un alt dûment requis s'imposait. Lire tout de go sur alsa qu'un titre en image ça le fait aussi, c'est la porte ouverte à pas mal d'abus Smiley smile
L'inconvénient des titres en images c'est quand même que d'abord ils ne s'agrandissent pas au clavier, qu'ensuite ils ne se traduisent pas (vous je sais pas, mais moi c'est fou le nombre de sites que je consulte en traduc Google - surtout des japonais, les anglais ça va - et quand je tombe sur un titre-image en nippon alors je râle...), qu' on peut pas copier-coller ou récupérer ou filtrer par regex le titre en tant que chaine avec le reste pour usages ultérieurs (genre servir de lien en page d'accueil pour accès direct à l'article), et enfin qu'avec un peu de malchance l'image passera pas sur mobiles (et son alt non plus, évidemment).
Un titre c'est quand même mieux en plain text, on dira ce qu'on voudra.
Arsene a écrit :
disons qu'une fois de plus j'ai été trop vite... bien sûr qu'un titre en image "alternativé" remplit son rôle dans Google mais j'avais soupconné (injustement) Yasashii de faire la promo du "titre en image" sans passer par l'étape (utile à mon avis) de la précision qu'un alt dûment requis s'imposait. Lire tout de go sur alsa qu'un titre en image ça le fait aussi, c'est la porte ouverte à pas mal d'abus Smiley smile


Image et alt ça coule de source (même si ce n'est pas toujours utiliser correctement)... Je ne vois pas en quoi le fait d'être sur alsa empêcherais d'utiliser une image comme titre (je parlais de titre se trouvant dans le header, celui qui est généralement suffisamment gros pour que moi même je puisse le voir sans lunettes. D'ailleurs en haut à droite de la page tu vois quoi toi ?

Ensuite tu parle de traduction google et même si en théorie, je suis d'accord, en pratique, les traductions automatisées étant tellement mauvaise, je ne me fais pas de soucis de ce côté là, pour le moment, mais j'ai peur que ça ne devienne pas une de mes priorités bientôt.
Modifié par Yasashii (12 Aug 2008 - 23:07)
Raté Yasashii lol : en haut je vois bien une image qui sert de titre mais quand on désactive les images on voit quoi ? Ça coule pas forcément de source.

Pour les trad je suis d'accord que c'est pourrave mais en attendant c'est une fonction que j'utilise énormément parce c'est encore mieux que rien. A part l'anglais que je lis sans problème, tous les sites en allemand, hollandais, espagnol, ou tout ce qui vient de l'orient lointain, ben j'ai pas d'autre choix. Et crois moi, y'a beaucoup à apprendre des sites japonais question développement pour mobiles par ex, ils sont très en avance parce qu'ils ont un public pour ça. Comme en plus ils ont un sens graphique assez poussé ils truffent leurs sites de titres en images et c'est un peu énervant parce que du coup on est obligé de se taper les premiers paragraphes pour savoir si ça vaut le coup d'être lu ou pas. Que je sois le seul au monde à avoir besoin de consulter des sites étrangers m'étonnerait beaucoup. Même si ce n'est effectivement pas un "public prioritaire", je trouve que c'est justement la force du média que d'offrir cette internationalisation possible... alors pourquoi s'en priver ? juste pour un "design" fignolé ? L'avantage n'est-il pas minime par rapport à l'inconvénient ? C'est une question à se poser.

Plus globalement la question est celle de la "barre de déperdition". Un peu comme le saut en hauteur : à partir de quelle hauteur empêche-t'on la prise de connaissance du contenu ? entre d'un côté le "site idéal" (qui n'existe pas) qui serait utilisable par tout le monde et de l'autre le site (qui lui existe bel et bien) qui n'est consultable qu'avec tous les plug-ins possibles et seulement sur grand écran et avec IE7 il y a toute une gamme de possibilités qui remontent ou redescendent la barre. La question à se poser individuellement est : où placerai-je la barre de mon site. Du coup cette question n'est plus celle des "publics possibles" chacun avec ses caractéristiques (matériels, handicaps, habitudes, etc.) mais celle du "service proposé". L'internationalisation potentielle du contenu est un service comme un autre : on peut ne pas vouloir le rendre possible, mais alors avec de bons arguments. Proposer une typo particulière en titrage n'en pas un, à mon avis.
Modifié par Arsene (13 Aug 2008 - 08:47)
Arsene a écrit :
Raté Yasashii lol : en haut je vois bien une image qui sert de titre mais quand on désactive les images on voit quoi ? Ça coule pas forcément de source.


Je crois au contraire que ça illustre bien ce que je disais...
Ici ce n'est pas un alt qui est utilisé car l'image est définie dans le CSS. Il y a bien un span avec le titre, mais il faut désactiver CSS pour le voir.

Pour le titre du site je répondais à ça, au fait :
Arsene a écrit :
Lire tout de go sur alsa qu'un titre en image ça le fait aussi, c'est la porte ouverte à pas mal d'abus smile


Un titre en image n'a rien d'un abus...

Pour le ça coule de source, bah si, une image dans le HTML doit avoir un attribut alt et je pense que les titres sont le seul cas où les développeurs ont bien compris comment renseigner l'attribut (celui qui utilise dream/frontpage/autre en mode graphique n'est pas un développeur à mon sens)

Après tu a décidé que les image c'était mal, c'est ton choix. Je suis pas sûre qu'utiliser sIFR soit beaucoup plus "accessible" ou "standards" car de ce que j'ai pu voir, s'il manque un plug-in, ça créé des problèmes (difficiles à tous gérer).
a écrit :
Après tu a décidé que les image c'était mal, c'est ton choix.


Mais pas du tout Smiley cligne C'est un choix à effectuer en terme de "barre de déperdition"... on peut mettre des titres images si on accepte de perdre quelques utilisateurs en route (dont les visiteurs étrangers, mais aussi d'autres), on peut mettre des titres en flash si on accepte d'en perdre encore quelques autres (sans plug-in), on peut mettre des titres en <p><font size=> si on accepte aussi de perdre ceux dont l'UA ne sauront pas afficher cette distinction, etc.... Je vois pas de bien ou de mal là-dedans, seulement des choix à opérer entre ce qu'on veut afficher/distribuer et le type de publics visé au final, rien de plus.

C'est typiquement le cas, comme tu le soulignes justement, dans le fait de n'avoir pas placé le logo Alsacreations en dur avec le alt correspondant encadré par un h1. C'est un vrai choix, celui de ne pas laisser les utilisateurs surfant sans images (quelle qu'en soit la raison) savoir où ils sont. Personnellement je ne l'aurais pas fait dans la mesure où je trouve ça déroutant et où les avantages que ça procure sont largement inférieurs au regard des inconvénients que cela induit, mais bon, effectivement, pourquoi pas. C'est aussi une façon d'arbitrer entre "quoi afficher" et "pour qui l'afficher".

Maintenant pour clore la chose je voulais juste dire au départ qu'Alsa étant une sorte d'outil de référence, y annoncer "tout de go" et sans plus de précaution qu'on peut mettre des titres en images pourrait laisser croire à des visiteurs peu attentifs ou peu formés que "cela va de soi" et que ça ne pose aucun problème, ce qui est loin d'être le cas. sIFR quant à lui utilise JS et propose l'inconvénient d'afficher deux fois le titre dans la config Css désactivées+JS actif, ce qui dans la plupart des cas est probablement un inconvénient inférieur à l'avantage procuré.
Arsene a écrit :

L'inconvénient des titres en images c'est quand même que d'abord ils ne s'agrandissent pas au clavier, qu'ensuite ils ne se traduisent pas (vous je sais pas, mais moi c'est fou le nombre de sites que je consulte en traduc Google - surtout des japonais, les anglais ça va - et quand je tombe sur un titre-image en nippon alors je râle...), qu' on peut pas copier-coller ou récupérer ou filtrer par regex le titre en tant que chaine avec le reste pour usages ultérieurs (genre servir de lien en page d'accueil pour accès direct à l'article), et enfin qu'avec un peu de malchance l'image passera pas sur mobiles (et son alt non plus, évidemment).
Un titre c'est quand même mieux en plain text, on dira ce qu'on voudra.

Juste au passage: les images, ça peut se désactiver, les navigateurs font ça très bien Smiley smile
oui mais du coup tu peux perdre beaucoup de l'intérêt de la page consultée... les images c'est pas zuste pour faire zoli, ça porte surtout de l'info visuelle (une photo par exemple) alors que les titres ça ne porte strictement rien d'autre que du texte.
Bon pis après tout je m'en tamponne Smiley smile Chacun fait ce qu'il veut, on va pas y passer la journée Smiley biggol
Faudrait pouvoir remplacer une image par son texte alternatif en cliquant dessus (ou via une entrée dans le menu contextuel).
Je suis sûr que ça peut se faire simplement dans Firefox en codant une petite extension qui va bien. Smiley smile
Florent V. a écrit :
Faudrait pouvoir remplacer une image par son texte alternatif en cliquant dessus (ou via une entrée dans le menu contextuel).
Je suis sûr que ça peut se faire simplement dans Firefox en codant une petite extension qui va bien. Smiley smile

Hello Florent,

Difficile de récupérer cette info lorsqu'elle n'existe pas :

<div id="head">
<h1>
<a href="forum.php">
<span>Forum Alsacréations : CSS et Standards Web</span>
</a>
</h1>


h1 {
background:transparent url(http://forum.alsacreations.com/titre.gif) no-repeat scroll 15px 15px;
height:75px;
}
h1 span {
display:none;
}

Il va falloir développer davantage cette petite extention Smiley cligne
L'idéal serait quand même que les navigateurs intègrent un petit OCR qui puisse restituer les textes passés en images par un simple item de menu, du coup les titres-images fonctionneraient même non-altés Smiley smile ...en plus ça marcherait sur les images type camembert avec données incluses, etc...

(voir W3C : jusqu'à ce que les agents utilisateurs....)
Modifié par Arsene (13 Aug 2008 - 18:38)
Juste un truc à propos des images 'textuelles'.

Je ne reviens pas sur les avantages et inconvénients d'un h1 graphique ( http://forum.alsacreations.com/topic.php?fid=4&tid=36488&s=text-indent )

Mais selon la plate-forme que tu utilises, as-tu envisagé des snippets text-to-image ?

Ce genre de programme PHP, basés sur les librairies graphiques généralement installées sur tous les hébergement mutualisés sont d'un grand secours pour ce genre de truc.
Tu génères le code que tu veux , l'idée étant d'emballer correctement une< img /> là où est écris le truc, avec un ALT çà reste idéalement accessible (n'est ce pas yodaswii ?) regarde le post mis plus haut aussi.

Je n'ai pas cherché si de tels programmes existaient en tant que tel, solitaires, mais c'est courant dans les CMS (Typo3 et MODx par exemple).
Modifié par elz64 (15 Aug 2008 - 19:03)
Sujet clos
Aller à