web-dev-qa-db-fra.com

Problème de rendu de police / hauteur de ligne sur Mac / PC (en dehors de l'élément)

La conception

Le contenu des widgets d'informations doit être aligné verticalement au milieu en tant que tel:

Original PSD Design

La conception codée

Windows: Chrome 20/FF 14/IE 9

Windows Coded Design

Mac (Lion/Mt. Lion): Chrome/FF

Mac Coded Design

Le code

HTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle;
        padding:3px 15px 0;
    }
        .display p {padding:0;line-height:1em;}
        .time, .date {padding-top:5px;}
            .time p, .date .number {font-size:35px;}
            .time span, .display .month-day, .conditions {
                font-size:14px;
                text-transform:uppercase;
                font-family:"Maven Pro", Arial, sans-serif;
                line-height:1.15em;
                font-weight:500;
            }
            .display .month-day {padding-left:5px;}
            .icon {float:left;padding:0 12px 0 0}
            .display .temperature {font-size:24px;padding:4px 0 0;}
            .display .conditions {text-transform:none;padding:2px 0 0;}
    .lt-ie9 .display { /* IE rgba Fallback */
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
        zoom:1;
    }

Le problème

En regardant les images ci-dessus de la conception codée, vous pouvez voir comment le semble perturber l'alignement. Après une nouvelle visualisation, le texte est rendu en dehors de l'élément sur le mac.

Les fenêtres

Windows Coded Design Alignment

Mac

Mac Coded Design Alignment

Remarque

J'incorpore les polices via une feuille de style Google Web Fonts.

Testé

J'ai essayé ce qui suit:

  • Définissez des hauteurs de ligne sur chaque élément.
  • Définissez des poids de police sur chaque élément.
  • Fixez des hauteurs sur chaque élément.
  • Une combinaison hauteur/rembourrage sur chaque élément.
  • Pourcentages/em/px utilisés pour le remplissage.

Il semble que peu importe ce que j'essaie, le contenu ne s'alignera jamais parfaitement au centre sur Mac et PC.

Mes questions)

Est-il possible de réaliser ce que j'essaie de faire de manière simpliste?

Dois-je renoncer au display:table-cell; acheminer et définir des hauteurs/rembourrages spécifiques pour chaque élément et chaque enfant? Je vais toujours rencontrer des problèmes de remplissage/d'espacement entre les deux systèmes d'exploitation.

Sous quelle catégorie dois-je classer ce problème? Hauteur de la ligne? Cellules de table? OS? etc...

Merci d'avance!

htmlvertical-alignmentcsscss-tables
59
rebz

S'il est résolu en utilisant une police différente (Arial), le problème est lié à la police, pas au CSS. Comme vous l'avez remarqué, le rendu des polices diffère d'un navigateur à l'autre.

Une solution possible pourrait être de télécharger la police Cutive (je vois qu'elle a une licence SIL), puis de l'exécuter via le générateur de polices Font Squirrel. En mode "Expert", il y a une option pour "Fixer les mesures verticales" qui pourrait être ce que vous recherchez.

34
Henrik

J'ai rencontré ce problème avec une police personnalisée qui avait été créée pour la marque d'un client. J'ai ouvert la police TTF dans Font Forge. La façon dont j'ai créé l'uniformité avec le rendu était d'ajuster les valeurs dans Élément-> Informations sur la police-> OS/2-> Métriques.

Les valeurs Win Ascent/Descent semblent fonctionner différemment des autres valeurs. J'avais les valeurs suivantes:

Win Ascent: 1000

Win Descent: 0

Typo Ascent: 750

Typo Descent: -250

HHead Ascent: 750

HHead Descent: -250

J'ai changé les valeurs Win Ascent et Descent en:

Win Ascent: 750

Win Descent: 250 (remarquez la valeur positive)

Il semble que vous devez faire correspondre les valeurs, sauf dans mon cas, je devais inverser la valeur de Win Descent en valeur positive.

J'ai une connaissance très limitée des polices mais cela a résolu mon problème. J'ai généré la police en tant que TTF et l'ai ensuite exécutée via un générateur de polices Web. Les polices s'affichent désormais de manière identique sur Mac/Windows 7/Android/iOS.

J'espère que cela aide quelqu'un.

6
Luke

Ma solution à ce problème (très ennuyeux):

  • Réglez tous les éléments à flotter: gauche;

  • Définissez des hauteurs de ligne explicites;

Profitez d'une victoire sur le ridicule de cross-browser/plateforme css.

5
Martin Christov

J'ai également rencontré ce problème. La réponse de Luke m'a aidé. J'ai dû ajuster les polices avec FontForge en utilisant ces paramètres:

FontForge Settings

Décochez toutes les cases "Is offset" et également la case "Really use Typo metrics". J'ai eu la plupart des problèmes avec Firefox et IE. Jouer avec la valeur de "Win Descent" l'a corrigé pour ces deux navigateurs.

2
benandunt

J'ai été témoin du même problème, avec une police personnalisée (Trade Gothic) servie par FastFonts.

Windows a fait ce qu'il fallait. Mais tous les autres navigateurs sur les machines Linux, Mac, iOS, Android ont souffert du problème.

Ma seule solution consistait à faire correspondre l'agent utilisateur et à nommer la balise body avec .not-win

Ensuite, mes styles pourraient remplacer la hauteur de ligne spécifique aux périphériques non Windows.

1
Will Hancock

Une partie du problème peut être liée à la façon dont Windows/Mac OSX rend les polices. Plus précisément ceux qui sont introduits via @ font-face. Avez-vous essayé de changer les formats de police utilisés?

1
Jordan Brown

Puisque vous avez dit dans votre commentaire à Jordan Brown que l'utilisation d'Arial rend l'alignement parfait, c'est un problème de police. Il est probable que la personne qui a créé votre police n’a pas correctement défini la valeur d’ascension.

Si vous avez le TTF, téléchargez-le sur FontSquirrel , sélectionnez l'option "Expert" puis conservez toutes les options par défaut. Je pense que celui qui le corrige est "Fix Vertical Metrics". mais j'ai eu des problèmes lors de la modification des valeurs par défaut, je recommande donc de les conserver telles quelles.

Maintenant, la hauteur de la ligne de police est la même sur MAC et PC (cela a fonctionné pour moi).

1
Justin

Cela est dû à l'historique du format de police et aux guerres Windows/Mac, il existe différentes façons de calculer la hauteur de ligne et si elles ne sont pas synchronisées dans la police que vous utilisez, les choses iront mal sur certains systèmes

Vous devez corriger votre police (si la licence le permet) ou passer à une sans ce problème

Voir http://www.webfonts.info/node/3 (avertissement, il s'agit d'une infopublicité même si les informations techniques sont vraies)

Mieux, ne pas faire dépendre votre design d'une valeur exacte ici

0
nim