Man kann ziemlich spezifisch werden, wenn man mit CSS deklariert, wie Text aussehen soll
p {
font-family: Verdana;
background-color: #7A2121;
color: #B93333;
text-decoration: underline;
word-spacing: Normal;
text-align: left;
letter-spacing: 1px;
text-indent: 15px;
line-height: 16px;
font-size: 10px;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}Und das ist noch nicht alles… Aber selbst wenn man so spezifisch wird, gibt es drastische Unterschiede von Browser zu Browser, wie der tatsächlich gerenderte Text aussieht. Die wichtige Lektion hier ist, dass man, egal wie viel Kontrolle man über Text ausüben möchte, am Ende nicht viel davon bekommt. Ganz zu schweigen davon, dass die meisten Browser es den Benutzern ermöglichen, Schriftarteinstellungen jederzeit zu ändern und zu überschreiben.
Hier sind einige Screenshots derselben Seite in verschiedenen Browsern
Mac Firefox 2
Mac Safari 2: (etwas unschärfer)
Mac Opera 9
Mac IE 5
PC IE 6 (Windows 2000)
PC IE 7
PC IE 8
PC Opera
PC Firefox
Die Unterschiede scheinen ziemlich subtil zu sein, aber schauen Sie, was passiert, wenn diese Screenshots mit etwas Deckkraft in Photoshop übereinander gelegt werden
Tatsächlich sind diese Unterschiede bei einer einzelnen Textzeile ziemlich subtil, aber Sie können sehen, wie sie sich, wenn sie sich addieren, zu einem ziemlich erheblichen Unterschied summieren könnten. Am wichtigsten ist, verlassen Sie sich nicht auf Text für eine spezifische Layoutpositionierung, da diese, wie Sie an den Bildern auf beiden Seiten dieser Zeile sehen können, von Browser zu Browser variieren wird.
Sehen Sie die Seite, von der diese Bildschirmfotos aufgenommen wurden.
Ein besonderer Dank geht an Erik, der die Bilder für diesen Beitrag neu erstellt hat, nachdem ich sie verloren hatte!
Ja, das ist so verdammt nervig… besonders wenn man mehrzeiligen Text in einem div mit spezifischer Breite/Höhe hat… Totale Zerstörung auf Safari wegen dieses Schriftarten-Renderings…
Nun, die meisten Entwickler wissen das, aber der Kunde sagt normalerweise nur: "Nun, das sieht für mich nicht gleich aus..."
Anstatt also mit dem Schriftarten-Rendering herumzupfuschen, sollten sie lieber darüber nachdenken, CSS vollständig zu unterstützen, wie von W3C vorgeschlagen, meiner Meinung nach…
Das ist sehr ärgerlich. Die Unterschiede zwischen Firefox und IE6 sind manchmal sogar größer als das, was Sie hier auf der Seite zeigen. Leider scheinen die letzten 4 Bilder in Ihrem Artikel verloren gegangen zu sein.
Sieht so aus, als würden die letzten vier Bilder immer noch im Artikel fehlen.
Heiliger Bimbam. Ich bin jetzt seit ein paar Jahren auf Mac, aber ich hatte vergessen, wie unbeschreiblich scheußlich Text auf Windows aussieht. Warum kann Microsoft nicht auf so grundlegende Details wie Text-Rendering achten? Selbst das neuere Text-Rendering in Vista und IE 7/8 schafft es nur, die Zeichen unscharf aussehen zu lassen.
Das Schriftarten-Rendering von Safari ist meiner Meinung nach das schlechteste, der gesamte Text wirkt fett.
Ich bin neu in der Webentwicklung. Ich arbeite an http://www.mywcmassage.com und bemerke einen großen Unterschied darin, wie der Text in FireFox vs. IE erscheint — in FireFox scheinen die Wörter zu scharf, gezackt, nicht glatt zu sein. Auch der Abstand und die Platzierung sind unterschiedlich.
Ist das einfach akzeptiert? Gibt es „Hacks“ oder CSS-Fixes, die ich verwenden könnte, um diesen Effekt zu überschreiben?
Hat jemand Antworten?
Das ist ein Ärgernis für Webentwickler. Gegen wie viele Browser muss man testen? Warum halten sich nicht alle Browser an einen einzigen Standard für Schriftarten-Rendering? Obwohl das Schriftbild von Safari fett aussieht, finde ich, dass es manchmal klar und gut lesbar ist.
Sie haben vergessen, die Farbprofile für Bilder von Mac zu ändern. Das bedeutet, dass fast alle Browser diese Bilder falsch rendern werden, und Bilder von Mac werden dunkler sein, zum Beispiel in den FF3-Standardeinstellungen.
Ein unschuldiger Windows-Nutzer, gebildet und mit FF, schaut sich vielleicht Mac-Schriftarten-Rendering an, aber es würde dunkler und unschärfer aussehen. Sie sollten sie in sRGB konvertieren oder 10 Jahre auf die korrekte Anzeige aller Browser warten.
Ich habe dieses CSS auf meiner Test-Webseite angewendet, Firefox spielt gut, aber I.E. spielt nicht gut… kann mir jemand helfen!!!! Bitte
Gibt es also Schriftarten, die Sie empfehlen, die am besten darin sind, ähnlich in FF und MSIE gerendert zu werden? Zu diesem Zeitpunkt kümmere ich mich nicht mehr so sehr darum, welche „am besten“ ist (manche sagen, MSIE rendert „besser“ als FF), ich möchte einfach etwas in mein CSS einfügen, das zu einem vorhersagbareren Aussehen über Browser hinweg führt. Ich habe Arial und Trebuchet MS ausprobiert, aber ich weiß, dass es Hunderte von Optionen gibt und vielleicht hat jemand eine einfache Arbeits-Schriftart gefunden… Danke.
Das beste Werkzeug für diese Art von Problemen (das ich gefunden habe) ist die Seite http://browsershots.org/
Sie ermöglicht es Ihnen, jede Seite jeder Website in praktisch jedem bekannten Browser der Welt anzuzeigen. Sehr praktisch, obwohl auch sehr frustrierend, da Sie Ihre Screenshots zurückbekommen und sie alle unterschiedlich aussehen!
Meiner Meinung nach immer noch hilfreich.
Cris,
Browsershots ist in Ordnung, aber das Warten ist lächerlich. Sie müssen sich das beste verdammt gute Werkzeug ansehen, das ich gefunden habe
http://www.crossbrowsertesting.com
Hallo,
das ist Anand aus Hyderabad, dieses Forum ist mir sehr hilfreich
Danke
Ich habe diesen Beitrag für das nächste Mal, wenn ich Unterschiede im Browser-Rendering erklären muss, als Lesezeichen gespeichert. Weißt du, es könnte ein Schulbeispiel sein. Sehr clever, Kumpel! Ich wünschte, Firefox würde Schriftarten besser rendern (ich bevorzuge das Rendering von Safari sehr!).
Hat jemand eine Lösung dafür versucht?