web-dev-qa-db-fra.com

définition de la largeur des caractères avec css

J'ai besoin de concevoir un logo simple avec CSS et tout va bien sauf pour la taille de la lettre. La condition est d'utiliser la police verdana mais avec des caractères larges comme indiqué dans l'image. Cependant, avec le code actuel, ils semblent étroits. Existe-t-il de toute façon ce comportement sans utiliser d'images?

Je ne cherche pas l'espacement des lettres, mais comment faire en sorte que le personnage lui-même occupe un nombre défini de pixels. Par exemple, je veux que la lettre t ait une taille de police de 30 pixels (hauteur) et double la largeur standard.

Image large: widecharacters

Logo standard avec code: Standard

Voici la mise en forme actuelle du logo:

.brand {
    color: white;
    display: block;
    float: left;
    font-size: 40px;
    font-weight: 200;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 27px 20px 13px 20px;

    letter-spacing:2px;
    text-transform: full-width;

    background: #083D68;

    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
     border-top-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;

    -moz-box-shadow: inset 4px -4px 13px 0 #333;
    -webkit-box-shadow: inset 4px -4px 13px 0 #333;
    box-shadow: inset 4px -4px 13px 0 #333;

}
csscss3webfontsgraphical-logo
14
Kiran

Ce que vous recherchez est transform:scale(x, y). Par exemple:

-webkit-transform:scale(2.0, 1.0);
-moz-transform:scale(2.0, 1.0);
-ms-transform:scale(2.0, 1.0);
-o-transform:scale(2.0, 1.0);
transform:scale(2.0,1.0);

Vous devez en quelque sorte le spécifier pour tous les navigateurs, au moins pour l'instant.

Éditer:

J'ai oublié de lier mon jsfiddle .

34
Austin Mullins

Votre exemple de code ne ressemble pas au poids 700 de Verdana.

Choisir le bon

famille de polices: 'Verdana'; poids de la police: 700;

donnerait le résultat correct, au moins sur les systèmes avec Verdana installé.

2
Sascha