1. Accueil
  2. Question et réponse
  3. Créer des caractères étroits avec CSS

Créer des caractères étroits avec CSS

2009-07-21 5 views

Répondre

21

Vous ne pouvez pas réduire la largeur des caractères, mais vous pouvez réduire l'espacement des lettres.

span { 
letter-spacing: 0px; 
}

Source

2009-07-21 19:31:43

+2

prend également des fractions décimales (par exemple 0.2px) et des négatifs (par exemple -1px, -0.2px), de sorte que vous pouvez obtenir un contrôle assez précis. – Val

+2

oh, et différentes unités, donc il peut être indépendant de la taille: -1%, -0.01em - pratique si le texte en question varie en taille. – Val

+3

@Val, Je ne sais pas quel navigateur vous utilisez/utilisiez, mais les fractions décimales ne semblent pas fonctionner dans Chrome 21 trois ans plus tard. – JohnK

16

Stretching une police sera possible avec le font-stretch property of CSS 3.

Source

2009-07-21 19:34:48 Gumbo

+1

mais pas compatible avec les navigateurs Webkit (Google Chrome, Apple Safari, ...) –

+19

@PrimozRome C'est pourquoi j'ai utilisé le futur. – Gumbo

+4

Il n'est toujours pas pris en charge, 6 ans se sont écoulés depuis la réponse. Merci pour la réponse de toute façon. :) –

24

Utilisez des polices étroites dans votre déclaration de famille de polices. Ce sont assez communs.

font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;

Source

2011-02-16 21:22:03

1

vous pouvez utiliser font-weight: dans votre code CSS pour cette

Source

2015-12-10 14:05:14 Zero

+0

FYI - Cela ne fonctionne qu'avec certaines polices –

7

Vous pouvez simplement faire évoluer votre texte. Par exemple:

.my-text { 
    transform: scaleX(0.5); 
}

mais méfiez-vous de transform-origin qui peut rendre votre texte se déplacer ailleurs (par exemple, si vous l'échelle avec une origine au centre).

Source

2016-10-19 07:01:03 Javarome

+0

J'ai utilisé 'transform' dans FireFox 54 pour le texte d'un élément' SELECT'. Il a correctement mis à l'échelle le texte à l'intérieur de mon élément 'SELECT' et a dessiné l'élément' SELECT' correctement, mais il n'a pas réussi à ajuster l'espacement entre les objets. L'élément 'SELECT' prend le même espace, même s'il est considérablement plus petit horizontalement. – JBH

Questions connexes

 Questions connexes