Problème de lettrine

Bonjour a tous,

Je m'essaye au tutos sur les lettrine et tout marche super sur IE et sur Opera mais pas sur Firefox. Sur celui-ci il ne prend pas la police que j'ai imposé. Elle sur mon ordi donc il devrait la trouver ?? Voici mon code pas très différent de celui du tuto, hormis de l'utilisation de firdt-letter en lieu et place de la balise span.

p:first-letter {
float: left; /* positionnement de la lettrine dans le conteneur*/
font-size: 4em; /* 3 hauteurs de lignes pour la lettrine*/
font-family: Foliar Initials;
color: #000;
margin: 1px;
padding: 1px;
padding-left: 17px;
line-height: 0.8em;
}

Si vous avez une idées ??? Merci d'avance.

Ps: par la même occasion vous savez comment faire pour imposer une police inconnue (que je placerais sur mon serveur) ? Merci.

tych
Modifié par tych (18 May 2008 - 17:52)

Bonjour,

tych a écrit :
Si vous avez une idées ???

Les noms de police comprenant une ou plusieurs espaces doivent être entourés de guillemets. De plus il est conseillé de préciser des polices de substitution (en choisissant une police «classique», notamment une des core fonts de Microsoft: Arial, Verdana, Georgia, Times New Roman, etc.), et de finir par un nom de famille générique. Ce qui peut donner:

font-family: "Foliar Initials", "Times New Roman", Times, serif;

tych a écrit :
Ps: par la même occasion vous savez comment faire pour imposer une police inconnue (que je placerais sur mon serveur) ?

Réponse courte: impossible.

Réponse longue: impossible avec la plupart des navigateurs, possible uniquement avec Safari 3.1 (mais pas Safari 2 ou Safari 3.0). Pour des éléments du design de la page qui ne sont pas amenés à changer (sauf à modifier le design), utiliser des images. Pour des titres qui peuvent changer, par exemple les titres des articles d'un site, on peut éventuellement utiliser sIFR (je te laisse chercher, te documenter et tester ça, si ça t'intéresse). Pour le corps de texte, il faut utiliser une famille générique, et basta.

Merci Florent V. de ta réponse.

Mais je ne suis pas d'acord pour la seconde partie, depuis que j'ai posé ma question j'ai amplifié mes recherches, et c'est possible ... enfin en théorie . D'après ce que j'ai lu, il y a moyen d'avoir les fichiers de police sur le serveur (format .eot pour IE et .pfr pour Moz). Et en indiquant le chemin via une description de style via la balise @font-face. J'arrive a avoir le .eot pour IE mais impossible de trouver le logiciel pour convertir en .pfr

Dans la pratique je n'arrive pas a le faire fonctionner ....

Si je n'y arrive pas en html , je passerais via flash mais c'est dommage.

Maintenant pour le sujet de ma question de départ, j'avais essayer avec les guillemets mais cela n'avais pas mieux fonctionner, mais je vais réessayer (vu les bourdes que je peux faire parfois ).

(1 minutes plus tard)

Non je viens d'essayer, c'est bizarre, il prend bien le font pour les paragraphe mais pas pour la first-letter ??
Je remet le code avec la première partie que j'avais omis ..

p{
	margin-left: 70px;
	margin-right: 110px;
	font-family: AquilineTwo, "Times New Roman", Times, serif;
	font-size: 1.2em;
	line-height: 1.2em;
}

p:first-letter {
	font-family: "Foliar Initials", "Times New Roman", Times, serif;
	float: left; /* positionnement de la lettrine dans le conteneur*/
	font-size: 3.6em; /* 3 hauteurs de lignes pour la lettrine*/
	color: #29221C;
	margin: 1px;
	padding: 1px;
	padding-left: 17px;
	line-height: 1em;
}

Si tu vois une autre chose

Merci encore

tych

tych a écrit :
Mais je ne suis pas d'acord pour la seconde partie, depuis que j'ai posé ma question j'ai amplifié mes recherches, et c'est possible ... enfin en théorie . D'après ce que j'ai lu, il y a moyen d'avoir les fichiers de police sur le serveur (format .eot pour IE et .pfr pour Moz). Et en indiquant le chemin via une description de style via la balise @font-face. J'arrive a avoir le .eot pour IE mais impossible de trouver le logiciel pour convertir en .pfr

Dans la pratique je n'arrive pas a le faire fonctionner ....

C'est bien ce que je disais (en plus concis): @font-face ne fonctionne correctement que dans Safari 3.1, qui permet d'utiliser des fontes True Type (.ttf) si je me souviens bien. Les implémentations précédentes sont plutôt foireuses et inutilisables.

tych a écrit :
Si je n'y arrive pas en html , je passerais via flash mais c'est dommage.

Jette un oeil du côté de sIFR à l'occasion.

tych a écrit :
Non je viens d'essayer, c'est bizarre, il prend bien le font pour les paragraphe mais pas pour la first-letter ??

Il me semble que :first-letter n'accepte pas toutes les propriétés CSS (et que ça peut être variable d'un navigateur à l'autre). Tu peux tester pour confirmer ou infirmer ça avec deux fontes que les navigateurs n'auront pas de mal à trouver, par exemple Verdana et Georgia.

Quand je parle de fontes que les navigateurs n'ont pas de mal à trouver, cela signifie que certains navigateurs ont parfois du mal à accéder à certaines fontes pourtant installées sur le système, et que c'est à priori lié aux divers formats de fontes (Open Type, différents formats True Type, etc.) qui ne sont pas toujours bien supportés, ou aux méthodes d'indexation des fontes qui font qu'une fonte n'est pas toujours bien reconnue si elle a un nom en plusieurs mots, voire plusieurs noms alternatifs. Attention à bien utiliser le nom complet de la fonte et pas une version abrégée, s'il s'agit de "Machin Truc Condensed No9", il ne faut pas utiliser "Machin Truc" ou "Machin Truc Condensed".

Merci pour tout c'est info. Je vais encore une peu chercher au cas où!!! Et regarder du coté de sIFR (je connais pas).

Sinon, ce n'est pas grave, c'est plus pour ma culture générale que je réalisais cet exercice.

Merci a toi.

tych