Wie kann ich Schriftarten in verschiedenen Webbrowsern auf dieselbe Weise rendern lassen?

Ich erstelle eine Website für einen Kunden, und wir hatten gehofft, in der Navigationsleiste nur Text und keine Bilder zu verwenden. Die Schriftart, die wir verwenden, ist Century Gothic (ich glaube, dass diese Schriftart auf den meisten PCs und Macs verfügbar ist). Das Problem ist, dass die Schriftart in verschiedenen Browsern erheblich voneinander abweicht. In Chrome haben wir es so aussehen lassen, wie wir es wollen, aber in Firefox ist der Text kleiner und mutiger.

Neben dem Schreiben von browserspezifischem Javascript zum Ändern der Schrifteigenschaften gibt es noch andere Optionen, um die Art und Weise zu standardisieren, in der die Schriftarten browserübergreifend gerendert werden. Vielleicht eine Bibliothek oder API? Vielleicht geht es darum, die Schrifteigenschaften genauer zu deklarieren? Ehrlich gesagt stecke ich fest und brauche Hilfe.

website-design fonts cross-browser

— Zach Lysobey
quelle

Antworten:

Sie werden keine Schriftarten und einige andere Dinge erhalten, die über alle Browser hinweg identisch gerendert werden können. Der Umgang mit Schriftarten ist ein perfektes Beispiel. Ich weiß, dass Safari unter Windows Text aus irgendeinem Grund gerne fett macht. Leider funktioniert das Web so. Die Vielzahl von Browsern, Betriebssystemen, Monitoren, Grafikprozessoren usw. bedeutet, dass es möglicherweise Tausende oder Zehntausende verschiedener Möglichkeiten gibt, wie eine Person eine Webseite anzeigen kann. Wenn Sie also für das WBE bauen, müssen Sie es tun und wissen und erwarten, dass Ihre Site nicht für jeden pixelgenau ist. Dies ist kein Druck. Es ist das wilde wilde Netz.

— John Conde
quelle

Ja, es scheint, als ob dies die unglückliche Realität ist. Es scheint jedoch möglich zu sein, dass jemand ein Stück JavaScript schreibt, das die Dinge ein wenig näher an die Normalisierung bringt.

— Zach Lysobey

Leider handelt es sich nicht um ein Codeproblem, sondern um ein Software- und Hardwareproblem. So werden die Browser entwickelt und mit zunehmender Hardwarebeschleunigung wird es schlimmer (obwohl Ihre Schriftarten für diejenigen, die sie aktiviert haben, flüssiger aussehen).

— John Conde

Dieser Artikel (und die anderen in derselben Reihe) erklärt die Probleme ausführlich, falls Sie neugierig sind. blog.typekit.com/2010/12/17/…

— Paulmorriss

Wählen Sie Ihre Antwort als am besten. Sie sagen, es ist kein Codeproblem, aber sicherlich könnte jemand Code schreiben, so dass eine einzelne Textzeile auf eine minimale Breite in Pixel gestreckt wird. Das selbst würde diese Situation erheblich verbessern. Es könnte die gerenderte <p> Breite testen und den Buchstabenabstand entsprechend erhöhen. Könnte sein?

— Zach Lysobey

@Zach - Mit etwas Planung und intelligenter Codierung können Sie sicher viele Hindernisse überwinden. Aber am Ende können wir nur so viel Kontrolle haben. Wenn Sie Probleme wie Safari unter Windows akzeptieren und den Rest codieren können, sollten Sie dies grundsätzlich tun.

— John Conde

Tatsächlich gibt es eine Methode zum Einbetten von Schriftarten in Ihr CSS. Es ist sehr einfach. Weitere Informationen hierzu finden Sie unter http://randsco.com/index.php/2009/07/04/p680 . Der Nachteil dabei ist, dass ältere Browser (vor ei 7 und ff 3, glaube ich ...) dies nicht unterstützen. Die Anzahl der Benutzer dieser alten Browser nimmt jedoch rapide ab, und es ist immer noch möglich, alternative Schriftarten anzugeben, die funktionieren und normalerweise für alle Fälle auf den meisten PCs verwendet werden.

Ein anderer Ansatz, den ich nicht verwendet habe, ist die Verwendung von Flash. Ich habe nicht viele Informationen darüber, außer ich weiß davon.

— Kenneth
quelle

Stellen Sie in der CSS-Notiz sicher, dass Sie nur Schriftarten verwenden, bei denen Sie nicht gegen Urheberrechte verstoßen, wenn diese Schriftart von einer anderen Person verwendet wird. Wenn Sie die CSS-Methode verwenden, steht diese Schriftartdatei allen zur Verfügung, die auf Ihre Website zugreifen können.

— Kenneth

Diese Flash-Methode heißt sIFR . Es hat auch Vor- und Nachteile.

— John Conde

Wie bereits in der anderen Antwort erwähnt, gibt es auch bei Verwendung dieses Ansatzes geringfügige Unterschiede zwischen Browsern und Systemen. Mit dem Rest Ihres Site-Designs können Sie jedoch einige Dinge tun, die die Site in allen verschiedenen Konfigurationen kompensieren und gut rendern lassen. Eine wichtige Sache ist, mehrere Browser und vorzugsweise Betriebssysteme zu haben, auf denen Sie Ihre Websites testen können.

— Kenneth

Wie andere bereits bemerkt haben, haben wir keine vollständige Kontrolle. Aber ich denke, es lohnt sich, ein paar Dinge zu erwähnen, die ich hilfreich finde, um Browser dazu zu bringen, Dinge insgesamt ähnlich zu rendern. Beides sind Dinge, die viele von Ihnen bereits tun, aber ich dachte, sie sind erwähnenswert, da die Grundlage, auf der Sie aufbauen, Sie oft auf Erfolg oder Misserfolg vorbereitet ...

CSS zurücksetzen. Das Konzept ist einfach: Sie legen die Standardeinstellungen für HTML-Tags in einem Stylesheet fest, um einen gemeinsamen Ausgangspunkt für das HTML-Rendering festzulegen. Hier ist ein Artikel und ein Beispiel: http://meyerweb.com/eric/tools/css/reset/

Doctype-Erklärung. http://htmlhelp.com/tools/validator/doctype.html

— ph33nyx
quelle