| Autor |
Nachricht |
serio
Threadersteller
Dabei seit: 12.05.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 12.05.2011 02:14
Titel Website: Schrift am Mac wesentlich fetter als in Windows |
  |
|
Moin,
ich habe mir gerade ne neue Website gebastelt und bin momentan dabei, die Seite in allen gängigen Browsern zu testen. Klappt auch alles soweit, nur die Schrift macht mich wahnsinnig:
Auf bisher 3 getesteten windows Rechner (und in allen Browsern) sieht die schrift gleich aus, MacOS macht die allerdings wirklich unschön fett (auch in allen Browsern), siehe hier:
http://www.xserio.de/files/schriftmac.jpg
das kann doch nicht ernsthaft die Schriftglättung des Mac's sein, so extrem wie das ist? Sind da irgendwelche CSS bugs oder so bekannt?
Ich hab das Gefühl der Fehler liegt irgendwo bei mir, weil ich habe mir von einem Kollegen auf einer der einschlägigen Font-Seiten die gleiche Schrift ("recent projects") nochmal als Screenshot schicken lassen und da sieht sie viel besser aus (der hat MacOs). Die Schrift ist übrigens die PT Sans Bold Italic uns lizenzfrei z.B. bei fontsquirrel.com zu bekommen.
Ich weiss allerdings nicht mehr weiter. Das HTML meiner Website ist komplett Valide, mein CSS zumindest auf Level 3 auch fast.
http://www.xserio.de
gruss,
alex
Zuletzt bearbeitet von serio am Do 12.05.2011 02:18, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
Benutzer 84934
Account gelöscht
Ort: -
|
Verfasst Do 12.05.2011 07:09
Titel Re: Website: Schrift am Mac wesentlich fetter als in Windows |
|
|
| serio hat geschrieben: | http://www.xserio.de/files/schriftmac.jpg
das kann doch nicht ernsthaft die Schriftglättung des Mac's sein, so extrem wie das ist? |
Interessant. Ich hab hier mal einen Mac-Screenshot:
1.: Darstellung Safari
2.: Darstellung im Safari "Webinformationen einblenden"
3.: Darstellung im Safari "fontsquirrel.com - Test Drive"
Faszinierend, so extrem ist mir das noch nie aufgefallen ... Also, der Mac kann die Schrift schon richtig darstellen, am Programm Safari liegt es auch nicht ...
Oh, sehe grad die fontsquirrel-Vorschau ist ein generiertes Bild. Die Füchse. Na ja. Bleibt immer noch die Diskrepanz zwischen 1. und 2.
Ich geh mal googlen ...
Edit, P.S.: Noch was zu IE und Schriften:
In IE7 und 8 (keine Ahnung was IE9 macht) wird auf Fonts automatisch ClearType angewendet, das verändert das Erscheinungsbild mancher Schriften sehr stark und führt auch zu Treppeneffekten an Rändern, in Deinem Beispiel an den kleinen "e"s ganz deutlich zu sehen.
Pack mal im CSS das hier ans Ende Deiner "h2"s:
| Code: | h2 {
font-family: "PTSansBoldItalic", "Helvetica", "Arial";
font-size: 28px;
color: #429bc4;
margin-top: 18px;
margin-bottom: 13px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/hIEfix.png,sizingMethod=crop);zoom:1;
} |
Und dann guck mal was passiert.
Zuletzt bearbeitet von am Do 12.05.2011 07:13, insgesamt 2-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Dexter Paris
Dabei seit: 28.05.2008
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Do 12.05.2011 08:08
Titel
|
|
|
Die H2 bekommt standardmäßig vom Browser
aufgebrummt.
Setz das mal auf
| Code: | | font-weight: normal; |
Sollte dann passen …
Zuletzt bearbeitet von Dexter Paris am Do 12.05.2011 08:09, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Benutzer 84934
Account gelöscht
Ort: -
|
Verfasst Do 12.05.2011 08:47
Titel
|
|
|
| Dexter Paris hat geschrieben: |
| Code: | | font-weight: normal; |
Sollte dann passen … |
Habe ich auch gedacht, aber da ist immer noch eine Abweichung:
Hier ein Screenshot einer Testseite mit einer per @font-face eingebetteten Schrift. Schriftvorschau über „Webinformationen einblenden“ aus dem „Entwickler“-Menü eingeblendet.
Bei genauer Betrachtung ist die Darstellung in der Seite etwas fetter als in der Vorschau.
Links Browserfenster, rechts „Webinformationen“-Vorschau:
Da pasiert in Webkit etwas anderes als in der Systemschriftenglättung. Wird die Schrift farbig, hell auf dunklem Untergrund und/oder über CSS mit Schatten versehen, tritt der Effekt noch deutlicher auf.
|
|
| |
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
|
| |
 |
|
Benutzer 84934
Account gelöscht
Ort: -
|
Verfasst Do 12.05.2011 09:52
Titel
|
|
|
| Smooth-Graphics hat geschrieben: | | http://christophzillgens.com/en/articles/-webkit-font-smoothing-reloaded |
Yeah:
| Code: | | -webkit-font-smoothing: antialiased; |
Danke! Das ist die Lösung!   
Zuletzt bearbeitet von am Do 12.05.2011 09:52, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Benutzer 84934
Account gelöscht
Ort: -
|
Verfasst Do 12.05.2011 11:19
Titel Re: Website: Schrift am Mac wesentlich fetter als in Windows |
|
|
| umschüler hat geschrieben: | | Code: |
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/hIEfix.png,sizingMethod=crop);zoom:1;
} |
|
Ach, da fehlt ja die halbe Info. War wohl doch zu früh am Morgen.
Das hIEfix.png muss dazu natürlich auch im entsprechenden Bildverzeichnis liegen 
http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/
|
|
| |
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Do 12.05.2011 11:37
Titel
|
|
|
| umschüler hat geschrieben: | | Smooth-Graphics hat geschrieben: | | http://christophzillgens.com/en/articles/-webkit-font-smoothing-reloaded |
Yeah:
| Code: | | -webkit-font-smoothing: antialiased; |
Danke! Das ist die Lösung! |
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
website auf windows rechner verschoben ...
[Float: Left] Fetter Fehler
Website mit japanischer Schrift
[S] Website - Schrift malen
Warum erscheint die Schrift meiner Website fett?
Website ist nicht gleich Website - Artikel / Infos gesucht
|
|
Willkommen auf dem Portal für Mediengestalter
