Schriftwiedergabe / Zeilenhöhenproblem auf Mac / PC (außerhalb des Elements)
Das Design
Der Inhalt der Info-Widgets sollte in der Mitte vertikal ausgerichtet sein:
Das codierte Design
Windows: Chrome 20/FF 14/IE 9
Mac (Lion/Mt. Lion): Chrome/FF
Der 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° / 89°</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;
}
Die Angelegenheit
Wenn Sie sich die obigen Bilder des codierten Designs ansehen, können Sie sehen, wie sich die Ausrichtung zu verändern scheint. Bei der weiteren Anzeige wird der Text außerhalb des Elements auf dem Mac gerendert.
Windows
Mac
Hinweis
Ich binde die Schriftarten über ein Google Web Fonts-Stylesheet ein.
Geprüft
Ich habe Folgendes versucht:
- Stellen Sie die Zeilenhöhen für jedes Element ein.
- Stellen Sie die Schriftstärken für jedes Element ein.
- Stellen Sie die Höhe für jedes Element ein.
- Eine Kombination aus Höhe/Polsterung für jedes Element.
- Verwendete Prozentsätze/em/px zum Auffüllen.
Es scheint, dass der Inhalt, egal was ich versuche, nie perfekt zwischen Mac und PC zentriert wird.
Meine Fragen)
Ist es möglich, das, was ich versuche, auf vereinfachte Weise zu erreichen?
Sollte ich auf die display:table-cell; - Route verzichten und für jedes Element und Kind bestimmte Höhen/Abstände festlegen? Ich werde immer noch auf Auffüllungs-/Abstandsprobleme zwischen den beiden Betriebssystemen stoßen.
Unter welcher Kategorie sollte ich dieses Problem einordnen? Zeilenhöhe? Tabellenzellen? OS? etc...
Danke im Voraus!
Wenn dies durch die Verwendung einer anderen Schriftart (Arial) behoben wird, liegt das Problem bei der Schriftart und nicht beim CSS. Wie Sie bemerkt haben, unterscheidet sich die Schriftwiedergabe zwischen den Browsern.
Eine mögliche Lösung könnte darin bestehen, die Cutive-Schriftart herunterzuladen (ich sehe, dass sie eine SIL-Lizenz hat) und sie dann über den Font Squirrel-Schriftartgenerator auszuführen. Im "Experten" -Modus gibt es die Option "Vertikale Metriken korrigieren", nach der Sie möglicherweise suchen.
Ich bin auf dieses Problem mit einer benutzerdefinierten Schriftart gestoßen, die für die Marke eines Kunden erstellt wurde. Ich habe die TTF-Schriftart in Font Forge geöffnet. Die Art und Weise, wie ich die Einheitlichkeit beim Rendern herstellte, bestand darin, die Werte unter Element-> Schriftarteninfo-> OS/2-> Metriken anzupassen.
Win Ascent/Descent-Werte scheinen anders zu funktionieren als die anderen Werte. Ich hatte folgende Werte:
Win Ascent: 1000
Win Descent: 0
Typo Ascent: 750
Typo Descent: -250
HHead Ascent: 750
HHead Descent: -250
Ich habe die Win Ascent- und Descent-Werte folgendermaßen geändert:
Win Ascent: 750
Win Descent: 250 (Beachten Sie den positiven Wert)
Es scheint, dass Sie die Werte anpassen müssen, außer in meinem Fall musste ich den Wert von Win Descent auf einen positiven Wert invertieren.
Ich habe nur sehr begrenzte Kenntnisse über Schriftarten, aber dies hat mein Problem behoben. Ich habe die Schrift als TTF generiert und sie dann über einen Web-Schriftgenerator ausgeführt. Die Schriftarten werden jetzt unter Mac/Windows 7/Android/iOS identisch wiedergegeben.
Hoffe das hilft jemandem.
Meine Lösung für dieses (sehr ärgerliche Problem):
Setze alle Elemente auf float: left;
Setze explizite Zeilenhöhen;
Genieße einen Sieg über die Lächerlichkeit von Cross-Browser/Plattform-CSS.
Ich bin auch auf dieses Problem gestoßen. Lukes Antwort hat mir geholfen. Ich musste die Schriften mit FontForge mit diesen Einstellungen anpassen:
Deaktivieren Sie alle Kontrollkästchen "Ist Offset" und auch das Kontrollkästchen "Typo-Metriken wirklich verwenden". Ich hatte die meisten Probleme mit Firefox und IE. Das Herumspielen mit dem Wert von "Win Descent" wurde für diese beiden Browser behoben.
Ich habe dasselbe Problem mit einer benutzerdefinierten Schriftart (Trade Gothic) gesehen, die von FastFonts bereitgestellt wird.
Windows hat das getan, was es haben sollte. Aber alle anderen Browser auf Linux-basierten Rechnern, Mac, iOS, Android) hatten das Problem.
Meine einzige Lösung bestand darin, den Benutzeragenten abzugleichen und den Body-Tag mit .not-win zu versehen
Dann könnten meine Stile die für Nicht-Windows-Geräte spezifische Zeilenhöhe überschreiben.
Ein Teil des Problems liegt möglicherweise in der Art und Weise, wie Windows/Mac OSX Schriftarten rendert. Speziell die, die über @ font-face eingespielt werden. Haben Sie versucht, umzuschalten, welche Schriftformate verwendet werden?
Da Sie in Ihrem Kommentar zu Jordan Brown gesagt haben, dass die Verwendung von Arial die Ausrichtung perfekt macht, handelt es sich um ein Schriftartenproblem. Es ist wahrscheinlich, dass derjenige, der Ihre Schriftart erstellt hat, den Ascent-Wert nicht richtig eingestellt hat.
Wenn Sie die TTF haben, laden Sie sie auf FontSquirrel hoch, wählen Sie die Option "Experte" und behalten Sie dann alle Standardoptionen bei. Die, die es behebt, ist meiner Meinung nach "Fix Vertical Metrics". Ich hatte jedoch Probleme beim Ändern der Standardeinstellungen, daher empfehle ich, sie unverändert zu lassen.
Jetzt wird die Höhe der Schriftzeile auf MAC und PC gleich dargestellt (es hat bei mir funktioniert).
Dies wird durch den Verlauf der Schriftformate und Windows/Mac-Kriege verursacht. Es gibt verschiedene Methoden, um die Zeilenhöhe zu berechnen. Wenn die verwendeten Schriftarten nicht synchronisiert sind, kann es auf einigen Systemen zu Problemen kommen
Sie müssen Ihre Schriftart korrigieren (sofern die Lizenzierung dies zulässt) oder ohne dieses Problem zu einer anderen wechseln
Siehe http://www.webfonts.info/node/3 (Warnung, dies ist eine Infomarke, auch wenn die technischen Informationen wahr sind)
Besser nicht, dass Ihr Design hier von einem genauen Wert abhängt