28172 sujets

CSS et mise en forme, CSS3

[Résolu] First-letter, @font face et firefox

Bonjour,
voici mon souci, je voudrais que mes paragraphes commencent avec un décalage et une lettrine spéciale. J'ai donc créer mon css avec une text-indent pour le décalage et un first-letter plus un @font face pour les lettrines sur les <p>. Cela fonctionne sur IE, Safari et Opéra mais pas sur Firefox (alors que le code fonctionne sur un autre site...)

Voici mon css

@font-face {
    font-family: 'lobster_14regular';
    src: url('lobster_1.4-webfont.eot');
    src: url('lobster_1.4-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobster_1.4-webfont.woff') format('woff'),
         url('lobster_1.4-webfont.ttf') format('truetype'),
         url('lobster_1.4-webfont.svg#lobster_14regular') format('svg');
}

p{
	text-indent:20px;
}
p::first-letter{
	font-size: 170%;
	color:#bf0b1d;
	font-family:"lobster_14regular";
}

et le code HTML

J'ai essayé toutes les modifs mais rien n'y fait. Si vous avez une idée ou un conseil, je suis preneur.

Merci !

Nicolas
Modifié par leclone66 (20 Mar 2014 - 10:31)
Firefox gère très mal le pseudoélément :first-letter. Notamment en position display-block. Idem pour Opéra. Seul Chrome est ready.
Modifié par Olivier C (21 Mar 2014 - 10:22)
Je n'ai pas utilisé de display block mais après vérification, cela fonctionne sur d'autres ordinateurs donc je pense que le bug vient de chez moi.
Merci !
Modérateur
Olivier C a écrit :
Firefox gère très mal le pseudoélément :first-letter. Notamment en position display-block. Idem pour Opéra. Seul Chrome est ready.

En même temps, selon la spécification, ils ne sont pas sensé le gérer:
a écrit :
In CSS a ::first-line pseudo-element is similar to an inline-level element if its ‘float’ property is ‘none’; otherwise, it is similar to a floated element.


http://dev.w3.org/csswg/selectors3/#first-letter

::first-letter ne donne accès qu'à un sous-set de propriétés, dont display ne fait pas partie.
Sujet clos
Aller à