28172 sujets

CSS et mise en forme, CSS3

Est possible de styler en css la hauteur d'une lettre

Bonjour Tous,

Voila je cherche à augmenter la hauteur de mes lettre dans un titre.
Police : verdanna
Taille 16px
Espacement entre les lettres : normal
Hauteur de la lettre : 200% (dans photoshop)

Cela fait donc une lettre normal en tous point de vu mais 2 fois plus haute que la normal.
Je ne parviens pas à trouver comment faire.
Je peux bien sur faire une image mais dans la mesure ou c'est un titre je trouve cela dommage % référencement.

Avez vous une idée ?
est faisable ?
Smiley biggrin

Merci de votre aide
Salut,

Je te propose d'essayer ça :

<h1><span class="firstletter">V</span>oici mon titre</h1>


Puis pour le CSS :

.firstletter {
    font-size: 200%;
}


Dis moi si ça fonctionne.

A bientôt
Modifié par JuJu57 (02 Nov 2010 - 11:15)
non, cela fonctionne pas Smiley decu
C'est la lettre tout entière qui est augmenté de 200%, cad la hauteur mais aussi la largeur.

chez moi il faudrait que la hauteur !!
en fait je sais pas si c'est possible ...
Et avec line-height: 2em; ?

Tu peux aussi utiliser le pseudo élément first-letter au-lieu d'utiliser un <span> sur la première lettre. À toi de voir.
Je vois ce que tu veux dire : deformer la lettre en hauteur comme si on utilisait font-stretch+font-size ? Mais font-stretch ne fonctionne pas... donc...
Tu peux faire un transform:scaleY(2) (avec les préfixes navigateurs qui vont bien, supporté dès lors par webkit, FF, Opera et IE9) mais bon, c'est vraiment moche…
Ah ! on s'en approche !!!
Tu crois qu'on peux gérer la hauteur car du coup, c'est vrai que c'est par trop joli !!
Du coup, c'est trop haut !!!

C'est bizarre
bah, comme ça c'est pas super chouette, donc au lieu de mettre à 200%, mettre à 180% ou 170% (c'est qu'on prend des mauvaises habitudes à pouvoir régler les styles au pixel pres !!!)
… dis c'est pas interdit d'essayer un peu soi-même! Smiley sweatdrop

Tu remplaces le 2 dans mon exemple par une valeur inférieure…
Sujet clos
Aller à