Intégré padding/margin dans les polices

Il semble que le problème que vous rencontrez n'est pas avec le CSS mais la police elle-même. La plupart des polices de définir une base de référence, x-hauteur et la hauteur de la ligne out-of-the-box. Votre problème est probablement avec la police leader, l'espace entre les lignes. Parfois, ces valeurs peuvent être très incohérent. Si vous êtes vraiment essayer d'obtenir une police spécifique pour aligner correctement, je vous recommande de prendre un coup d'oeil à FontLab et de l'édition de glyphes/base/hauteur de la ligne pour la police que vous travaillez avec.

Vous pouvez également regarder une web-safe version de la police. Ces types de polices généralement ont été spécifiquement espacés de manière à rendre le meilleur sur le web. Ce n'est pas toujours le cas, mais il pourrait vous obtenir les résultats que vous recherchez. Découvrez Google bibliothèque de polices web ici.

Mise à jour

Cette réponse a reçu suffisamment d'attention que j'ai décidé d'ajouter le premier commentaire ci-dessous pour la réponse et à disserter sur elle.

Navigateur Reset: Chaque navigateur par défaut pour de nombreux états de l'réservés balises HTML comme a et strong. Il y a d'autres choses définies par défaut, y compris les polices, la ligne de hauteurs, de poids et de tailles. Cela pourrait avoir une incidence sur le rendu d'une police. Généralement, c'est localisée à certains navigateurs. Ainsi, en utilisant un reset CSS, vous pouvez éliminer le rendu par défaut des problèmes dans les navigateurs. Eric Meyers Réinitialiser est un bon reset, mais il y a certainement d'autres. Essayez d'utiliser différentes pour voir ce qui fonctionne le mieux pour vous.

Cependant, réinitialise CSS travailler en ciblant tous les navigateurs et les mettre à toutes les mêmes. Certaines personnes préfèrent utiliser quelque chose qui, au lieu de cela, les cibles uniquement les questions avec chaque navigateur. Qui ont été Normaliser sera mieux.

Il y a aussi des questions qu'un CSS reset ne va pas s'arranger. Comme la police de l'aliasing (la prise de polices semblent lisses plutôt que irréguliers). Depuis quelques navigateurs et systèmes d'exploitation ne pas ajouter de l'anti-aliasing pour les polices, vous verrez également le glyphe de la largeur des différences. Cela, malheureusement, est inévitable dans la plupart des cas. Certaines personnes font le trajet de l'utilisation d'un flash de police de remplacement de l'outil comme Cufon ou Sifr. Cela aussi a sa propre liste de questions (telles que la FOUC).

Une Autre Mise À Jour

Une autre question qui est toujours là est le problème avec le crénage, ou l'espace entre les glyphes. Il existe une propriété CSS letter-spacing qui vous permettra de faire global kern sur un bloc de texte, mais il manque la possibilité de cibler des glyphes comme Photoshop ou InDesign. Le crénage est également basée sur l'ensemble des pixels, de sorte que vous êtes limité par ce que vous pouvez réaliser. Il a aussi des problèmes avec IE et n'est pas aussi fiable qu'on pourrait l'espérer. Il y a un javascript appelé kerningjs qui est assez décent, mais il est aussi tout-à base de pixels et donc pas aussi précis que texte pixellisé.

Dans l'ensemble, les polices sur le web se sont améliorés au cours des dernières années. Malheureusement, nous sommes toujours aux prises avec les problèmes du passé, lorsque les polices étaient destinés à être imprimés ou pixellisé. Il y a de l'espoir à l'horizon pour nous les amateurs de police. @Allcaps dit, le Spécification CSS3 pour linebox est là, il est seulement une question de temps jusqu'à ce qu'il est largement accepté!

OriginalL'auteur Matthew R.

vous pouvez utiliser la hauteur de la ligne et de la lettre de l'espacement de remplissage/de la marge dans les polices...
sinon utiliser css personnalisé pour chaque rubrique........

/*use line-height*/
.font{
line-height: 1px; 
letter-spacing: 1px;
}

ou utiliser les css......

  h1{margin:1px 0;}
    h2{margin:1px 0;}
    h3{margin:1px 0;}
    h4{margin:1px 0;}

à l'aide de ces css avant de l'utiliser reset css .......

OriginalL'auteur webslatesoftware

Le "padding" en haut et en bas de polices est essentiellement un espace réservé pour les signes diacritiques (https://en.wikipedia.org/wiki/Diacritic). Certains scripts d'empiler plusieurs signes diacritiques sur certaines lettres, y compris les capitales (par exemple, les Vietnamiens https://en.wikipedia.org/wiki/Vietnamese_alphabet) ainsi, un concepteur de la police qui oublie de réserver de la place pour eux de ne pas être en mesure d'étendre sa police plus tard. Aussi, horizontal scripts nécessitent certains de séparation (leading) entre les lignes pour être lisible.

Très spécifiques glyphes comme une boîte les éléments de dessin étendre aux limites d'une zone du glyphe
http://www.unicode.org/charts/PDF/U2500.pdf
C'est aussi pourquoi le "padding" est intégré dans chaque glyphe. Si c'était un externe de la propriété, il ne serait pas possible de différencier les glyphes destiné à être jointive et des glyphes qui ont besoin de certains de séparation (en d'autres termes, la quantité de remplissage est un glyphe propriété n'est un ensemble de polices de propriété).

L'exemple suivant nécessite une bonne police décent avec Unicode couverture (http://dejavu-fonts.org/ œuvres)

Jointive à cocher des éléments de dessin

↓

┃ÇŖŞ

┃ẤỄǛȰ┃U ← - Vous vraiment besoin d'inclure le "padding" pour s'aligner avec la boîte de dessins

  ↑

 en Latin capitales avec de multiples signes diacritiques (très serré)

Enfin polices souches à partir d'anciennes technologies (movable type), et les conventions utilisées pour les décrire, se réfèrent encore au xve siècle, les habitudes, qui les rend peu évident pour les profanes.

(Voir aussi http://www.webfonts.info/node/330 pour plus d'informations sur les complications ajoutés par ordinateur formats de police)

polices opentype texte-rendu

OriginalL'auteur nim

Voici mon Opinion

• La marge est la distance de chaque côté que les pays voisins de l'élément et de la marge de la propriété peut être définie pour le haut, à gauche, à droite et en bas d'un élément
• rembourrage est la distance entre la bordure d'un élément HTML et le contenu à l'intérieur.

Mais dans votre cas, vous n'avez pas vraiment besoin de ces deux vous , que vous êtes intéressé à espacement , il existe une propriété css appelé letter-spacing

• La lettre de l'espacement de la propriété augmente ou diminue l'espace entre les caractères dans un texte

Essayer

 h2 {letter-spacing:-3px}

La lettre de l'espacement de la propriété est prise en charge dans tous les principaux navigateurs.

Remarque: La valeur "hériter" n'est pas pris en charge dans internet explorer 7 et versions antérieures. IE8 nécessite un !DOCTYPE. IE9 prend en charge "hériter".

OriginalL'auteur Microtechie

Le natif de marges pour les éléments de texte sont comme suit (au moins dans Firefox et Chrome):

Exemple De Travail

 p{margin:16px 0;}
h1{margin:21px 0;}
h2{margin:19px 0;}
h3{margin:18px 0;}
h4{margin:21px 0;}
h5{margin:22px 0;}
h5{margin:24px 0;}

Pour les supprimer, vous devrez à nouveau régler la marge de la sorte:

p, h1, h2, h3, h4, h5, h6{margin:0;}

OriginalL'auteur apaul

Je pense, est le crénage ce que vous avez l'intention de décrire

prendre un coup d'oeil à cette bibliothèque

http://kerningjs.com/

CSS, rencontrer de crénage. Le crénage, rencontrer CSS. Kern, de style, de transformation et de
à l'échelle de votre type web avec de vraies règles CSS, automatiquement.

Imprimer les concepteurs l'ont eu facile depuis trop longtemps. C'est en 2012; la
web a été autour depuis plus de deux décennies, mais les concepteurs web n'obtenez pas
le plein contrôle sur leur typographie? Oublier que, de l'utilisation Kerning.js!

c'est gratuit

OriginalL'auteur San Bluecat

J'ai souvent le même problème, surtout si vous essayez d'obtenir un texte pour haut-align avec quelque chose à côté de ce qui n'est pas du texte, comme une image.

Voici une technique que j'ai eu un certain succès avec. Sélectionnez une partie du texte de sorte que la couleur d'arrière-plan apparaît derrière elle. Le top de la sélection en surbrillance révéler ce que la police considère que le "haut" et "bas" de la lettre. Prendre des captures d'écran de la police dans différentes tailles et avec différents navigateurs. Zoom sur la capture d'écran dans Photoshop et de compter le nombre de pixels à partir de ce que vous croyez "devrait" être le haut et le véritable sommet. Calculer le pourcentage que le nombre de pixels qui la représente au sein de l'ensemble de la sélection de la hauteur.

Puis définissez un négatif de la marge supérieure sur le texte dans l'ems, qui est égal au pourcentage de "dépassement". Donc, si le texte doit être 10px haut et c'est en fait 12px haut, puis donnez-lui un négatif de la marge supérieure de -0.2 em.

Alors, où que vous attribuez à la police-famille qui est à l'origine du problème, également inclure ce négatif de la marge supérieure. Vous pouvez utiliser la même technique pour le fond et les côtés de débordement, mais en général, je trouve que c'est la dessus que les causes les plus grands maux de tête.

OriginalL'auteur cantera

J'ai couru dans cette douleur, une couple de fois, lors de l'utilisation de certaines polices web pour les icônes et les permis de mieux contrôler, en les plaçant dans un absolu conteneur positionné.

HTML

 <div class="relative">
     <div class="webfont">&#10004</div>
 </div>

CSS

 .relative { position:relative; }
 .webfont {  position: absolute;

             top: -5px; 
             left: -5px; /* easier control with these values */
           }

C'était comme une meilleure façon de contrôler les choses de la croix-navigateur, plutôt que de dire, à l'aide de positif/négatif les marges externes et internes.

Donnant le bloc de texte d'un conteneur et de la classe, nous avons beaucoup plus propre capacité à ajuster la position de la croix-navigateur. ( OMI ).

Peut-être quelque chose là-bas.

Acclamations,

Rob

OriginalL'auteur Rob Sedgwick