Verpixelte Webfont
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anwendungsbeispiel
besserung
besucher
browser
code
datei
face
format
korrekt darstellen
maschine
opus
regeln
safari
schrift
system
tag
url
vermutung
vorgeschlagenen code
windows
-
Hi,
ich arbeite an einem Webprojekt und habe die Webfont Open Sans als .woff lokal in mein Projekt eingebunden.
@font-face { font-family: opensans; src: url(font/OpenSans-Regular.woff); } body { font-family: 'opensans', sans-serif, arial; background: #e5e1d6; }
Nun zeigt chrome und firefox die tag/schrift">Schrift im Vergleich zu Arial sehr unscharft und z.T. verpixelt an. Woran kann das noch liegen, nachdem ich sie bereits lokal eingebunden habe?
Gruß
Flo
EDIT: Safari stellt die font bei normaler Schriftgröße deutlich besser und klarer dar, bei großen Schriftzügen ist es jedoch noch schlimmer als bei firefox und chrome.
EDIT 2: Ich konnte nun beobachten, dass dieselbe Webfont über meine Wordpress Umgebung auf einer anderen Website tadellos angezeigt wurde. Was zum Henker?? Also, ich meine das ist toll, aber warum ist das so?
EDIT 3: Okay, ich hatte eine Vermutung, dass die .woff Datei schuld sein könnte, da ich diese über ein webtool aus einer .ttf konvertiert hatte und habe daher die frisch von googlewebfonts die .ttf eingebunden. Auch ein zweiter Versuch mit der Light Version brachte keine Besserung. An den font-Dateien liegt es also auch nicht.
Wenn ich hier noch länger Selbstgespräche führe dürfte es in ein paar Tagen ein ausgereifter Monolog sein :D
Beitrag zuletzt geändert: 2.11.2015 22:17:04 von gamegazer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo
Vielleicht hilft dir folgende Vorlage weiter.
U.a. beim STYLE-Tag habe ich nur den inline-style="display:none;" sicherheitshalber dazugesetzt,
falls jemand das STYLE-Tag unerlaubter-weise im HTML-BODY unterbringen sollte;)
Die font-smooth Regeln brauchst du natürlich nicht zwingend, das ist nur meine persönlich bevorzugte Variante für u.a. Firefox auf OSX(apple).
Das ich den Font auf den BODY-Tag lege, ist natürlich nur ein Anwendungsbeispiel.
Die Regel " font-family: 'Open Sans'; " kannst du natürlich auf beliebige cssSelektoren/HTMLinlineStyles anwenden.
Das ist der Code den ich verwende (natürlich im HTML-HEAD und nicht im HTML-BODY)
um OpenSans bei mir einzubinden.
<style style="display: none !important;" type="text/css"> body { -moz-osx-font-smoothing: grayscale !important; /* font-smoothing under OSX-Firefox */ -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; font-smooth: always; font-family: 'Open Sans'; } </style> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" property="stylesheet" rel="stylesheet" type="text/css">
Das LINK-Tag sorgt dafür das eine CSS-Datei hinzu-geladen wird.
Diese CSS-Datei enthält dann folgende fertigen CSS-Regeln.
Diese sind natürlich dann nicht nochmal in eigenen Codes zu erwähnen.
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3SZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype'); } -
Ich kann keinerlei Veränderungen bzw Besserungen durch den von dir vorgeschlagenen Code feststellen. Im Grunde sind sie ja identisch, bis auf das Antialiasing & die Tatsache, dass du die Font über die Google API einbindest und ich dies lokal tue.
Ich hab es mit den font-smooth Attributen versucht, aber wie du ja schon angedeutet hast ist dies für OSX und auf meiner Win Maschine nicht nachvollziehbar.
Beitrag zuletzt geändert: 8.11.2015 13:26:57 von gamegazer -
So lange man sich die Sache nicht selbst irgendwie online ansehen kann, muss man sich mit Vermutungen begnügen.
Hier
https://github.com/leonidas/lausuntopalvelu-prototyyppi/tree/master/public/fonts/open-sans
die Schrift in diversen Dateiformaten. Du musst also nichts selbst konvertieren. Dazu noch eine CSS-Datei, um die unterschiedlichen Dateitypen so einzubinden, dass alle halbwegs aktuellen Browser unter unterschiedlichen OS sie korrekt darstellen und eine HTML-Testdatei.
-
Falls sich deine Seite nur an dich und andere Besucher
mit der exact gleichen Betriebssystem(win) und Browserausstattung(wie deine)
richtet wäre es ja einfach;)
Richtet sich deine Seite generell an alle Besucher der WebWelt
so ist es nicht allein maßgeblich was gerade auf deiner Ausstattung angezeigt wird.
Sicher ist es schwierig komromisslos alle korrekt zu bedienen
egal wie alt/exotisch ihre Browser(Firefox,Chrome,Opera,Safari...)
oder Betriebssysteme(Win,OSX,iOS,Android,Linux...) sind.
Jedoch kann man zumindest den Mainstream berücksichtigen,
soweit dessen Alter noch akzeptabel ist
und der Hersteller eine technisch ernstzunehmende sowie akzeiptable BrowserEntwicklung abgibt.
Alles andere muss man notfalls irgenwann mal als zuAlt/zuSchlechtEntwickelt
hinnehmen und damit in Kauf nehmen dass es dort dann mal nicht so gut aussieht.
Du schreibst von Safari und deiner Win-Maschine,
falls du damit meinst das du Safari als WindowsVersion zum testen deiner Seite
heranziehst, muss ich dich leider enttäuschen.
Das kannst du als Referenz total vergessen,
denn die WindowsVersion kam nie richtig aus der Beta raus
und wurde von Apple vor über 5Jahren eingestellt da
man nun wirklich nicht noch einen Browser für Windows aufrecht erhalten wollte.
Von Version 3 bis 5 war Safari auch für Windows verfügbar.. https://de.wikipedia.org/wiki/Apple_Safari.
Auf folgenden aktuellen Browsern wird bei mir unter OSX10.11(sowie iOS)
sämliche googleOpenSans Schriften korrekt und sauber dargestellt wenn ich sie ordnungsgemäß eingebunden/definiert habe.
Ich nehme einfach mal an das gilt auch für Win-Maschinen mit aktueller Ausstattung.
- Safari Version 9
- Firefox Version 42
- Chrome Version 46
- Opera Version 33
Selbstverständlich, gibt es auch Argumente die dafür sprechen, eine Seiten-Lösung so aufzubauen
damit auch veraltete Systeme noch einen korrekten Inhalt anzeigen.
Aber was bedeutet das schon in diesem Zusammenhang eine "etwas pixelige SonderExtraFont Darstellung"?
Wenns denn doch so schlimm aussieht auf den Altsystemen
warum verzichtet man dann nicht auf den SonderExtraFont generell
oder eben nur speziell bei Browsern zu denen bekannt ist das sie den SonderExtraFont nicht sauber darstellen
indem man dann einen entsprechden alternativen Standardfont nur für diese Browser anbietet.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
Generell gilt:
Die Systeme welche unten stehende Seite in guter Schriftqualität richtig wiedergeben können,
können ebefalls das mit deiner Seite richtig anzeigen (ansonsten hast du es falsch eingebaut).
Ein System welches dazu nicht mehr in der Lage ist diese Seite richtig anzuzeigen,
dem sollte stattdessen eine alternative Standardschrift angeboten werden.
https://www.google.com/fonts/specimen/Open+Sans
Ich hoffe dies hilft dir Weiter. -
Das hilft mir tatsächlich weiter. Du hast natürlich Recht damit, dass meine kleine Maschine kein Referenzsystem sein sollte, da ich nun tatsächlich und glücklicherweise nicht die singuläre Zielgruppe bin ;D
Da werde ich nun auch nicht soviel Energie reinstecken bis ich sehe, wie es auf anderen Geräten ausschaut.
Safari habe ich infolge deines Posts auch gleich mal über Bord geworfen!
Vielen Dank! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage