Pourquoi mes jambages être coupé lors de l'utilisation de CSS @font-face?

Je suis en utilisant Google webfonts API pour intégrer Droid Sans sur une page. Tout est bien, sauf pour les jambages (c'est à dire la dangly bits sur y, g, etc). Les dernières versions de Firefox, IE et Chrome sur mon Windows Vista-fort sont à couper le bas.

<!DOCTYPE html>
<html>
<head>
 <title>Droid sans descender test</title>
 <meta charset="utf-8">
 <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
 <style type="text/css">
  body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
  h1, h2, h3 { margin: 1em 0; font-weight: normal; }
  h1 { font-size: 2em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1em; }
 </style>
</head>    
<body>
 <h1>A bug ran under the carpet anyway</h1>
 <h2>A bug ran under the carpet anyway</h2>
 <h3>A bug ran under the carpet anyway</h3>
</body>
</html>

Le code ci-dessus ressemble à ceci:

Jambages se couper http://thinkdrastic.net/journal/wp-content/uploads/2010/06/descenders.png

J'ai essayé line-height, font-size, padding etc en vain. J'ai eu un certain succès avec font-size-adjust, mais la dernière fois que j'ai vérifié c'était Gecko seulement. Quelqu'un sait d'un correctif pour cela?

  • Fonctionne très bien sur MacOS WebKit. Avez-vous essayé de donner une plus grande marge?
  • Yep. Je crois que cela va être l'un de ceux "qui est juste la façon dont Windows n'trucs" des questions.
  • C'est peut-être juste un copier-coller de l'erreur, mais font-family: "Droid Sans"sans-serif; besoin d'une virgule.
  • Bonne prise. J'ai déchiré toutes les polices de secours pour des raisons de simplicité, mais un peu trop 🙂
InformationsquelleAutor Olly Hodgson | 2010-06-03
  1. 12

    Avec l'aide de quelques @adamliptrot, j'ai découvert que Droid Sans' jambages sont tout à fait bien à quelques précise de la taille de pixel: 18, 22 et 27px. J'ai ajusté mon em est en conséquence:

    h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

    Pas l'idéal, mais ça fonctionne:

    Les jambages de travail! http://thinkdrastic.net/journal/wp-content/uploads/2010/06/fixed-descenders.png

    • Cela signifie probablement que les choses vont échouer à nouveau à tout type de zoom, ou sur un non-standard résolution d'affichage.
    • Il semble bien fonctionner à différents niveaux de zoom. Étant donné que c'est seulement un mineur visual glitch qui ne se produit que sur Windows, et dans ce cas c'est un intranet avec une assez homogène de l'installation du matériel, je ne suis pas aussi inquiet. Certainement quelque chose à garder un oeil sur bien 🙂
    • Eu le même problème avec une police "Promenade" et la magie 1.6875 em figure travaillé pour ça aussi...bizarre systématique de la faute
    InformationsquelleAutor Olly Hodgson
  2. 4

    Bien que votre question est en relation avec les Polices Web de Google API, le principe de ma réponse en dessous est le même.

    Si les descendants sont de coupure lors de la diffusion d'une Police TrueType, la cause la plus probable est que OS/2 mesures sont mal réglé (négativement) sur la police.

    Les valeurs que l'on peut avoir besoin d'ajustement sont WinAscent & WinDescent.

    Un rapide et sale solution serait d'ajuster ces deux à 0.

    Cela peut être fait en utilisant Police Forge. Une fois que la police est ouvert dans FontForge, vous pouvez accéder à ces paramètres via le " Police D'Info dialogue.

    • Cela ne semble pas fonctionner pour moi. J'ai bien modifié ces paramètres dans fontforge, mais le problème persiste.
    • Pouvez-vous m'envoyer la police, je vais jeter un oeil à pourquoi cela ne fonctionne pas.
    • Cette juste m'a aidé à trouver un problème avec une police que j'ai créé avec MyScriptFont.com. OS/2 tonnes a été fixé à une valeur incorrecte. Thx.
    InformationsquelleAutor uniquelau
  3. 3

    J'ai vérifié le référencés fichiers ttf, et même dans les polices de windows visionneuse les jambages sont coupés. Semble de plus en plus de problème avec la police servi plutôt qu'avec vos styles.

    • Donc, ils ne. Je me demande si c'est un problème avec les polices ou avec Windows de rendu des polices?
    InformationsquelleAutor
  4. 3

    Si vous êtes en utilisant la Police de l'Écureuil, il semble que le problème avec les sans variante a été trié, mais le problème reste avec la Police Écureuil serif variante.

    Pour un correctif pour l'empattement variante, aller sur le Web Générateur de Polices et de charger les fichiers de police dont vous avez besoin (ne comptez pas sur l'emballage qu'ils fournissent).

    Cliquez sur "l'Expert" bouton radio, laisser tous les paramètres, mais sous "Options Avancées" changer le 'Em Place Valeur" à "2162' et de générer de la police.

    Ce qui rend la police correctement à tous tailles

    • Cela ne résout pas pour moi. J'ai eu le problème à 14,8-15.2 px (IE) / 15.0 - 15.1 px (Chrome, Firefox) avec Ouvert Sans. Même après la mise à l'em carré de la valeur de 2048 à 2162, que le problème a persisté. Peut-être essayer même de plus grandes valeurs pourrait avoir fonctionné, mais je suppose que je vais opter pour simplement éviter le problème de la gamme.
    InformationsquelleAutor Danimal Holland
  5. 1

    nous avons eu le même problème...nous avons essayé en utilisant la police de l'écureuil. nous avons essayé d'utiliser les polices web de google. La police a gardé de coupe off "accrocher" les lettres g. Aussi, le google version hébergée de ne pas apparaître comme vrai et clair comme de l'autre. La police m'a semblé un peu saccadée.

    Notre solution:

    Nous avons organisé la police nous-mêmes, sans mise en forme pour le web. Ensuite, nous avons converti la ttf fichier svg, .eot, et .la fto, et téléchargées ceux de nos correctifs pour ie et mozilla etc.

    InformationsquelleAutor mastawebb
  6. 0

    Si l'astuce du haut - changement de taille de police.... 

    h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

    ne fonctionne pas pour vous, puis d'ajouter "line-height" à l'élément qui est de couper les jambages. `

    • Intéressant. line-height ne fonctionne pas pour moi du tout, mais certaines tailles de pixel n'. Ceux em tailles peut-être pas tout à fait bon pour vous si votre base taille de la police est différente.
    InformationsquelleAutor chaser7016
  7. 0

    Je suis juste deviner ici, mais j'ai eu le même problème se produit lorsque les polices obtenir substitué. Je me demande juste si cela se produit quand le dire une police de substitution remplace un 1024em police avec une 1000em de police ou vice-versa. J'ai eu un gros jambage de coupure à l'aide d'un 2048em de police. Peut-être la peine d'enquêter.

    InformationsquelleAutor Beathoven
  8. -2

    J'ai eu un dilemme similaire et la hauteur de la ligne correctif a fonctionné pour moi (c'est à dire j'ai ajouté ce code dans le CSS Personnalisé section):

    h2 { line-height: 140%; }
    InformationsquelleAutor Jeremy Gregg