Was sind Web-Safe-Schriften?
Praktisch jeder Computer hat eine Reihe von installierten Schriftarten. Diese Schriften sind in der Regel dort durch den Hersteller des Computers eingerichtet oder sind die Standard-Sätzen von Schriftarten, für das Betriebssystem, Computer verwendet. Es ist möglich, zusätzliche Schriftarten auf eigene Faust zu installieren.
Allerdings sind nicht alle Zeichensätze gleich. Verschiedenen Computern können sehr unterschiedliche Arten von Schriftarten installiert haben, und die meisten Computer-Nutzer casual weiß nie, den Unterschied. Wenn Sie eine Webseite entwerfen, müssen Sie diese im Auge behalten. Wenn Sie eine Schriftart auf Ihrer Seite, die ein Besucher nicht über Nutzung entscheiden, wird die Schriftart anders zu machen (und oft unansehnlich) auf dem Rechner des Besuchers.
Also, wie Sie sicherstellen, dass Ihre Schriften guten Blick über die riesige Zahl von Computern aus gibt es? Einfach: Nutzung von Web Safe Fonts. Als Computing entwickelt, haben Überlegungen für den Web-Effekt für moderne Betriebssysteme und Web-Browser übernommen. Zu diesen Überlegungen ist eine Liste von sicheren Web-Fonts, Web-Designer, um sicherzustellen, dass ihre Schriften richtig rendern können. Web-Safe-Schriften sind eine Reihe von sehr gängige Schriftarten, die auf nahezu jedem Computer installiert draußen kommen. Einige (wirklich) ältere Computer möglicherweise nicht über einige der Schriftarten, die wir für Netz, heute, aber sie sind eine Minderheit.
Wer sollte Web-Safe-Fonts verwenden?
Jeder Web-Designer sollte sichere Nutzung von Web-Fonts. Es gibt einige Fälle, in denen Sie wird eine spezielle, nicht-Web-Safe-Schriftart zu verwenden, aber diese Fälle sind selten (und wir Fälle wie diesen zu erörtern werde in Kürze). Sie wollen sicherstellen, dass Ihre Schriften sind immer leicht von Ihren Nutzern zu lesen. Indem Sie Ihre Schriften lesbar mit sicheren Web-Fonts, behalten Sie die Leserschaft und Ihre Website besser zugänglich für ein breiteres Spektrum von Menschen.
Ich denke, die beste Antwort auf die Frage "Wer sichere Web-Schriftarten verwenden sollten" lässt sich in einem Wort: "Du."
Warum bei sicheren Web-Fonts?
Wie oben erläutert, wenn Sie eine Schrift verwenden auf Ihrer Seite, dass Ihre Besucher nicht installiert haben, ihren Browser wird ein Fallback-Schriftart, die Sie möglicherweise nicht die Absicht, auf Ihrer Seite angezeigt zu pflücken. Oft ist das Ergebnis häßlich Text, der überhaupt nicht angenehm zu lesen.
Wenn ein Besucher kann sich nicht flüssig lesen, Ihre Website, dann kann er oder sie nicht die von Ihnen bereitgestellten Informationen, und das ist der ganze Grund Ihre Besucher sind auf Ihrer Seite! Auch wenn der Text auf Ihrer Website ist hässlich und jemand beschließt, stapfen durch sie für Ihre Inhalte, wird sie sehen immer noch unangenehm, und Sie werden weniger Leser behalten. Eine Website ohne Leser ist ein Abfallprodukt.
Mit Web-Safe-Schriftarten ist nur ein Teil einer größeren Reihe von Design-Praxis, dass Ihre Website benutzerfreundlich zu halten. Nicht belasten ein Leser die Augen, machen Sie keine Angaben schwer zu finden, und stellen Sie sicher, dass sie durch Ihre Website und den Inhalt Fortschritte, ohne darüber nachzudenken. (Sie können einen ausführlichen Artikel über den Aufbau Ihrer Typografie hier lesen.) Wenn an einer beliebigen Stelle jemand sieht bei Ihnen vor Ort und nimmt sogar eine Millisekunde zu denken: "Ach, dass einige hässliche Textes," Sie haben die Erfahrung Gläsern. Im Idealfall sollte die gesamte Begegnung mit Ihrer Website werden wie Seide glatt und mit einem Web-Safe-Schriftart ist ein großer Teil zur Erreichung dieses Ziels.
Wenn die Web-Safe-Schriften verwenden?
In der Regel verwenden Sie stets sicheren Web-Fonts für den Inhalt Ihrer Seite.
Wo gibt es im Netz sicher Schriften anwendbar?
Ihr Text-Header, Links und Inhalte sollten alle sichere Nutzung von Web-Fonts. Wenn Sie normalen Text für Ihr Logo verwenden möchten, sollten Sie auch einen sicheren Web-font dafür. In der Tat ist eine der wenigen Ausnahmen von der Verwendung von Web Fonts sicher, wenn Sie Text in Ihren Bildern verwenden entscheiden. Wenn Sie planen, um Bilder für einige Ihrer Text zu verwenden, dann ist es sicher, andere Schriftarten zu verwenden, da die gleichen Bilder auf dem Rechner des Besuchers erscheinen, da er nicht auf eigene Faust. Sie sollten jedoch nie verwenden die Bilder für alle Ihre Text. Bilder für Text sollte sparsam verwendet werden. Logos und einige Header können Bilder verwendet werden. Alles, was den Inhalt oder sonst normalen Text, aber sollte mit einem Web-Safe Schriftart.
Wie kann ich sicher Web Fonts, und welche verwenden, sicher sind?
Sind Web-Safe-Fonts in Ihrem CSS mit der Schriftart oder-Familie regiert. (Ich habe das sehr nützlich für diejenigen unter Ihnen enthalten.)
Es gibt eine ganze Reihe von Web-Safe-Fonts. Viele von ihnen sehen sich sehr ähnlich zu anderen Web-Safe-Schriftarten und sie in der Praxis sind im Wesentlichen dieselben. Ein CSS-Regel für die Schriftart, zum Beispiel könnte so aussehen:
: Arial , Helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif;
Die erste Schrift aufgeführt, Arial, ist ein äußerst gängige Schriftart auf den meisten Computern verfügbar, so können Sie sicher wette, dass es richtig zeigen auf dem Bildschirm eines Besuchers, wenn sie Ihre Website besuchen. In seltenen Fällen kann ein Computer nicht installiert haben Arial jedoch. Ältere Apple Computer, zum Beispiel kann nicht Arial, sowie mehrere andere Schriften. Helvetica ist jedoch weit unter den Apple-Computern installiert, und es sieht sehr ähnlich, Arial, Helvetica, so ist an zweiter Stelle aufgeführt. Wenn ein Browser nicht finden können, die erste Schrift aufgeführt, es sieht für die nächsten Schriftarten in Ordnung. In diesem Fall wird die Helvetica verwendet werden, wenn Arial nicht installiert ist.
Und in extrem seltenen Fällen kann es auf einigen Computern nicht Arial oder Helvetica installiert. In diesem Fall, "sans-serif" verwendet wird. Dies ist ein Fallback-, Standard-Schriftart, die den Web-Browser, wenn er nicht eine der zuvor aufgeführten Schriftarten Verwendung finden wird.
Es gibt vier Typen (oder Familien) von Web-Safe-Fonts: Serif, Sans Serif, kursiv, und monospace. Jeder von ihnen hat ihre eigenen Fallback-Schriftart (wie sans-serif oben). Die fallbacks für jede Familie, bzw. sind: Serif, Sans-Serif, kursiv, und monospace. Sie werden feststellen, dass font Regeln sind fast immer eines dieser fallbacks und immer zuletzt.
Die Schriftarten werden in CSS-Format aufgeführt, so können Sie ganz einfach kopieren und einfügen, wenn Sie keine Lust auf tippen sie aus. Dies ist wahrscheinlich, wie Sie sehen werden die Schriftarten die meiste Zeit jedenfalls.
Serif Web Safe Fonts
Die Kunst des Web-Design hat viele allgemeine Leitlinien zu halten, die stattgefunden haben wie das Web stärker geworden ist im Web 2.0 Umfeld verwurzelt. Wir haben andere Gegenstände, die, wenn sie Serif-und Grotesk-Schriften verwenden zu diskutieren, so dass alles, was ich hier sagen, dass im Allgemeinen, haben Serifen der Regel vor allem für Überschriften verwendet wurden. Im Folgenden finden Sie das Netz, Schriftarten, die Sie für Ihre Serifen verwenden können.
| font-family: "Bookman Old Style ', serif; | Bookman Old Style |
| font-family: Garamond, serif; | Garamond |
| font-family: Georgia, serif; | Georgien |
| font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; | Palatino Linotype, Book Antiqua |
| font-family: "Times New Roman ', Times, Serif; | Times New Roman Times |
Sans Serif Web Safe Fonts
Sans Serifen sind in der Regel für den Großteil der Inhalte auf einer Website verwendet.
| font-family: Arial, Helvetica, sans-serif; | Arial, Helvetica |
| font-family: 'Arial Black', Gadget, sans-serif; | Arial Black, Gadget |
| font-family: Impact, Kohle, sans-serif; | Impact, Kohle, |
| font-family: 'MS Sans Serif ", Geneva, sans-serif; | MS Sans Serif, Genf |
| font-family: 'MS Serif', 'New York', sans-serif; | MS Serif, New York |
| font-family: 'Trebuchet MS', Helvetica, sans-serif; | Trebuchet MS, Helvetica |
| font-family: Verdana, Geneva, sans-serif; | Verdana, Genf |
| font-family: "Lucida Sans Unicode ',' Lucida Grande ', sans-serif; | Lucida Sans Unicode, Lucida Grande |
| font-family: Tahoma, Geneva, sans-serif; | Tahoma, Genf |
Monospace Web Safe Fonts
Monospace-Schriftarten sind nützlich, wenn Sie wollen sicherstellen, dass alle Zeichen Line-Up mit genau der gleichen Breite zu machen. Anzeigen-Code oder tabellarische Daten ohne die Verwendung einer Tabelle sind gute Einsatzmöglichkeiten für Monospace-Schriftarten.
| font-family: Courier, monospace; | Courier |
| font-family: "Courier New", Courier, monospace; | Courier New, Courier |
| font-family: 'Lucida Console', Monaco, Monospace; | Lucida Console, Monaco |
"Cursive" Web Safe Fonts
Derzeit gibt es nicht viele sichere Web Kursive Schriftarten. Es gibt eine "Cursive" Fallback, wie sans-serif, serif und monospace, aber zum größten Teil ist dies sehr ungenutzt. Es gibt einige Diskussionen, ob Comic Sans MS einem kompatiblen Spiel mit der kursiven Schrift Fallback. Manche glauben, Comic Sans MS gehört mit serifenlose Schriften und andere sagen, es ist die nächste Schriftart zu einem normalen "Cursive"-wie das Gefühl, dass Sie derzeit in einem Netz, Schriftart erhalten können.
In jedem Fall, kursiv und Comic Sans MS sind in der Regel vermieden werden. Persönlich bin ich der Meinung, dass Sie beide zu vermeiden, sollte ganz.
| font-family: "Comic Sans MS", kursiv; | Comic Sans MS |
In einigen Fällen kann ich andere Schriften?
Ja, es gibt einige Ausnahmen von der "immer sichere Nutzung von Web Fonts"-Regel. Manchmal aufgrund von Umständen außerhalb Ihrer Kontrolle, müssen Sie einfach eine Schriftart, die nicht als Web-Safe. Ein Client, zum Beispiel kann ein Unternehmen, das die gleiche Schriftart Zeichen für ihre Unternehmens-, Marken verwendet hat, und Logos für mehr als ein Jahrhundert. Bringing ein Geschäft wie für das Web, ohne dass seine langjährige Integrität und Bekanntheitsgrad wäre wahrscheinlich unmöglich, wenn eine sichere Web-Schriftart.
Oder vielleicht haben Sie, als Designer, die getestet werden sollen Design und die Dinge, die bleeding edge. Ich habe immer geglaubt, dass wahre Kunst und Experimente in die Fähigkeit des Künstlers, über das normale Maß und Schritt weg von Standard-Verfahren siehe liegt. Wenn Sie sich von dieser Idee, dann sicherlich irgendwann wirst du nach Möglichkeiten, mit nicht basteln-Web-Safe-Schriftarten in Ihren Seiten zu suchen.
Im Folgenden werden die besten Möglichkeiten, um Nicht-Web-Safe-Schriftarten auf Ihrer Seite verwenden, und trotzdem haben sie richtig auf den meisten Computern machen da draußen.
Geben Sie Downloads für Ihre Nutzer
Wenn Sie eine ganz bestimmte Schriftart für Ihre Website verwenden möchten, können Sie auch einen Link zu der Schriftart-Datei auf Ihrer Seite. Auf diese Weise kann der Besucher herunterladen und installieren die Schriftart, die Sie dann Ihre Seite besuchen und sehen Sie die Schrift richtig gemacht, denen keine echte Nachteile.
Das ist eine Menge Arbeit, um die Besucher zu tun, obwohl zu erwarten, nur um Ihre Website anzuzeigen, wie Sie sie, damit Sie es sehen möchten. Der Besucher in der Regel nicht wollen, nichts Besonderes, nur um ein Webpage view. Die Forderung, dass jemand sich die Mühe für das Herunterladen und Installieren von Schriftarten nur auf Ihre Website anzuzeigen ist eine großartige Möglichkeit für die Besucher zu verlieren. Quoten sind, werden die meisten Ihrer Besucher nicht einmal wissen, wo man mit der Installation der Schriftart, anyway.
Es gibt auch einige potenzielle rechtliche Probleme, wenn Sie diesen Weg gehen. Wenn Sie nicht die Person, die die Schriftart erstellt, dann ist es sehr wahrscheinlich, dass Sie nicht über die gesetzlichen Rechte zu dessen Verbreitung.
Aufgrund dieser großen Mängeln, ist diese Methode weitgehend vermieden.
Verwenden Sie Bilder
Wenn Sie ein Bildbearbeitungsprogramm wie Photoshop, The GIMP, oder sogar MS Paint benutzen, können Sie Bilder, die jede Schriftart, die Sie verwenden möchten. Setzen Sie das Bild auf Ihrer Seite, und es wird das gleiche auf dem Computer eines Besuchers aussehen, als es auf verkaufen. Unten ist ein Bild, das drei nicht verwendet-Web-Safe-Schriftarten, die kamen vor auf meinem MacBook installiert.

Ob Sie als Besucher dieser Website sind auf einem Mac, einem Windows-PC in Ihrem Lieblings-Linux-Variante, oder auch das Surfen auf etwas anderes wie ein PDA oder iPhone zeigen die Schriften oben richtig. Dies gilt selbst dann, wenn Ihr PC nicht über diese Schriftarten installiert.
Dies ist ein guter Weg, um eine Schriftart, die Sie gerne für Ihr Logo, Werbung oder einige Ihrer Kopfzeilen anzuzeigen. Sie können jedoch nicht auf die Bilder verlassen, wenn es tatsächliche Inhalt. Ein Besucher kann nicht markieren Text mit der Maus, das heißt, wenn sie zu kopieren und Ihren Text einfügen wollen, irgendwo (sagen wir, um den Namen Ihres Unternehmens an einen Freund senden), können sie es nicht tun. Außerdem kann Text in Bildern nicht von einem Screen Reader, die einige behinderte Menschen zum Surfen im Internet verwenden zu lesen. Jeder Text, den Sie in Ihre Bilder werden nicht zugänglich sein, um diese Menschen. Plus, einige Leute mit Bildern deaktiviert durchsuchen oder ihre Bilder von einem Dritten gesperrt, wie auch in einigen Corporate Offices, dass ein Proxy-Server verwenden. Schließlich können Suchmaschinen nicht richtig gelesen und Katalog Text in Bilder.
Alles in allem, jeder Text, den Sie in Ihrer Bilder sollten in erster Linie als gezielte Dekoration dienen. Es gibt eine Alternative wenn: Verwenden Sie eine Image Replacement Technik.
Es gibt Techniken, die Sie in Ihrem CSS und (X) HTML verwenden, mit denen Sie Bilder verwenden, anstelle von normalem Text unter Wahrung Ihrer Website Zugänglichkeit und Suchmaschinen-Freundlichkeit wird. Achten Sie auf die Kopfzeile über die lautet: "Das Image Replacement Techniken" ist ein Bild. Es verwendet eine Schriftart namens Rockwell (das kam auch auf meinem MacBook installiert) und die Schrift ist grün und nicht die typischen schwarzen wir verwendet haben.
Dieser Header verwendet ein Image Replacement Technik, die als Einzel-Pixel Replacement. Es verwendet CSS und (X) HTML, um das Bild anzuzeigen, aber wenn jemand hat CSS ausgeschaltet ist, wird das Bild nicht zeigen. Um dieses Problem zu lösen, gibt es eine versteckte span-Element, das noch ordentlich Anzeige des Textes wird "Image Replacement-Techniken" für dieses Feld.
Wie für Screenreader und andere Situationen, in denen die Bilder unter Umständen nicht zugänglich sind, gibt es eine 1-Pixel-Bild mit alt Text "liest Image Replacement Techniken." Auf diese Weise sind wir nicht schaden Zugänglichkeit und Screenreader wird noch abholen den Text, wie wir es wollen.
Einer der wenigen Nachteile mit dieser Technik besteht darin, dass einige fremde Elemente ergänzt um die (X) HTML. Sie schadet nichts, aber sie fügen mehr Masse, um Ihre Arbeit und die Dateigröße des Dokuments. Es macht es auch schwierig zu verfolgen ist beim Lesen Ihrer Website-Code. Selbst noch, es ist ein fantastischer Weg, um reich Typografie zu Ihrer Website hinzufügen.
Der aufmerksame Leser vielleicht schon einen Blick genommen haben in diesem Abschnitt des Artikels, um einen Blick auf die CSS habe ich hier. Bitte beachten Sie, dass ich die Technik etwas ändern für den Einsatz auf WPDFD, da sie bereits vorbestehenden Stilrichtungen. Wenn Sie versuchen, aus diesem Image Replacement Technik auf Ihrer Website möchten, lassen Sie mich Ihnen die besseren Code zu arbeiten.
Ich werde Ihnen sogar er Bilder mit zu arbeiten. Zuerst laden und speichern Sie diese. (Mit der rechten Maustaste klicken und speichern.)
- spacer.gif - ja, ich kenne die allgemeinen Gefühle spacer.gif. Let's keep it zwischen uns, nur dieses eine Mal.
- irt.gif. Dies ist der Header-Image.
Zweitens fügen Sie diesen Code auf Ihre CSS-Datei.
# header (
: 250px ; width: 250px;
: 30px ; height: 30px;
: url(irt.gif) ; background-image: url (irt.gif);
)
# header span (
: none ; display: none;
)
Schließlich umzusetzen Ersetzung durch eine Grafik mit diesem in Ihrem (X) HTML:
Das Image Replacement Techniken
Sehen Sie in einem Browser, und Sie sollten auch die Auswirkungen bei der Arbeit zusehen. Sie können eine Liste der Image Replacement Techniken im Laufe der auf mezzoblue finden, das ist, wo ich auf diese besondere Image Replacement Technik eingeführt wurde.
Verwenden Sie sIFR
sIFR (Scalable Inman Flash Replacement) ist vielleicht der beliebteste Weg, um reich, schön Schriftarten auf Ihrer Seite. In der Tat, können Sie ein Beispiel dafür sehen, an der Spitze der einzelnen WPDFD Artikel. Dieser Artikel den Titel "Wissenswertes über Web-Safe-Fonts", ist für die meisten Benutzer in einer Schriftart angezeigt Interstate genannt, die nicht in der Regel ein Netz, Schriftart.
Es gibt nur ein paar Schritte zum Aufbau sIFR, einschließlich eines Verfahrens namens "font-Tuning" (keine Sorge, es ist nicht schwer), aber es dauert meist auch ein erfahrener Web-Designer / Entwickler rund 10 Minuten, um sie einzurichten über eine Website, die zuvor nicht verwenden.
Es ist einfach einzurichten, aber, und seine Vorteile sind vielfältig. Es bietet skalierbare, zugänglichen Text in einer Schriftart Ihrer Wahl durch das Löschen einer Flash-Element mit einem transparenten Hintergrund anstelle Ihres ursprünglichen Text. Wenn ein Besucher Ihrer Website nicht Javascript, Flash oder entweder installiert, dann ist dein Text ist noch immer auf Ihrer Seite in einem CSS-Stil angezeigt, normale Header.
Persönlich ist sIFR die Methode würde ich empfehlen, wenn Sie wirklich Ihre Website Typografie stärken wollen. Es ist wichtig zu beachten Sie jedoch, dass sIFR sollte nicht für den Inhalt Ihrer Website verwendet werden. Verwenden Sie für Überschriften, Zitate, Sprüche und andere kleine, aber bedeutende Teile von Text.
Derzeit ist sIFR 2 der Norm, aber sIFR 3 ist in Beta-Tests. Wenn sIFR 3 ist aus der Beta und ich habe einige Zeit mit ihm zu spielen, hatte ich die feste Absicht auf die Deckung dieses Thema im Detail. In der Zwischenzeit, wenn sIFR Sie interessiert, aber Sie wollen nicht durch alle Setup gehen, möchten Sie vielleicht einen Blick auf ein Werkzeug, das es nicht alles für Sie übernehmen.
So dort haben Sie es!
Nun kamen Sie auf diese Seite und lesen Sie in diesem Artikel, so können Sie sich auf sichere Web-Schriftarten bleiben Sie informiert, und jetzt wissen Sie alle wichtigen Aspekte von ihnen. Es ist wahrscheinlich eine gute Idee, diese Seite als Lesezeichen, damit Sie eine Liste von sicheren Web Fonts praktisch zu jeder Zeit haben.
von D. Rodriguez

