Schrift-Familie @ PS-Trainer

Live - Standard-Schriften ihres PC Experimentieren sie mit den Angaben zum Schrift-Format: Das Ergebnis hängt nur vom Betriebssystem und Browser-Programm ihres PC ab.
Standard-Schrift ihres Browser-Programms ohne genauere Angaben
CSS-Code zur Formatierung:
Standard Schrift-Familie Monospace Sans-Serif Serif	Schrift-Schnitt Normal Fett (Bold) Kursiv (Italic, Oblique) Unterstrichen (Underline)	Schrift-Größe 12 18 24 48 60 72 Angabe in Punkt = 1/72" (Zoll)
Jedes Betriebssystem verknüpft die 3 allgemeinen Schrift-Namen monospace, sans-serif, serif, mit einer passenden, am System installierten Schrift-Familie. Durch Voranstellen konkreter Schrift-Namen werden diese bevorzugt - falls sie installiert sind.	Jede Schrift-Familie ist in mehreren Schnitten angelegt. Manche Systeme bieten darüber hinaus weitere Schnitte wie z.B. Schattiert (Shadow), Umrandet (Outline), etc. Es liegt im Ermessen des Schrift-Programmierers, welche Zeichen und Schnitte angelegt sind.	Moderne Schriften (TrueType, OpenType, Postscript) sind beliebig skalierbar, d.h. man kann sie sauber in jeder beliebigen Größe darstellen. Die untere Grenze wird durch das Medium (Bildschirm, Drucker, ...) bestimmt, d.h. durch die Größe der Bildpunkte (Pixel) am jeweiligen Ausgabe-Medium.

Cascading StyleSheets (CSS)
Cascading StyleSheets ( → CSS) ist die Standard-Methode zur Formatierung moderner IT-Dokumente.	CSS wird in allen professionellen Webs verwendet und seit Einführung des Büro-Pakets LibreOffice (OpenOffice) auch für Office-Dokumente (Text, Kalkulation, Präsentation, ...)
CSS-Elemente zur Text-Formatierung: Indirekt können sich fast alle CSS-Regeln auf die Text-Darstellung auswirken. Hier werden einige CSS-Elemente angeführt, die direkt zur Text-Formatierung eingesetzt werden: Ausgezeichnete Erklärungen und Beispiele dazu findet man u.a. bei SelfHTML.	Auswahl wichtiger CSS-Elemente zur Text-Formatierung: @font-face: Schrift-Datei (s.u. ↓) background-color: Hintergrund-Farbe color: Schrift-Farbe font-family: Schrift-Familie font-size: Schrift-Größe font-style: normal oder kursiv font-weight: normal oder fett text-align: horizontale Ausrichtung text-decoration: normal oder unterstrichen
Standard Schrift-Namen in CSS Es ist meist sinnvoll, in der Definition von → CSS-Klassen (Beispiel rechts) eine Liste von Schrift-Familien-Namen einsetzen. • Wenn eine angeführte Schrift-Familie am Ziel-PC nicht installiert ist, dann wird die nächste angeführte Familie verwendet. • Am Ende der Liste sollte zur Sicherheit immer einer der 3 Standard Schrift-Namen eingetragen werden.	Definition typischer CSS-Klassen im <head> einer Webseite: <style type="text/css" media="screen"> /* <![CDATA[ / .mymono{font-family:'Courier New', Courier, mono;} .mynons{ font-family:Verdana, Helvetica, Arial, sans-serif;} .myserif{font-family:'Times New Roman', Times, serif;} / ]]> */ </style> Anwendung im <body> der Webseite: <div class="mymono">MONOSPACE</div> <div class="mynons">SANS-SERIF</div> <div class="myserif">SERIF</div>
monospace Diese CSS Standard-Schrift erinnert an die gute alte Schreibmaschine: Alle Zeichen sind gleich breit. ► Verwenden sie diese Schrift nur in Sonderfällen - wenn der Text an Schreibmaschine oder Uralt-PC erinnern soll. Durch Einfügen verschieden vieler (gleich breiter) Leerzeichen kann man primitive Tabellen formatieren. In diesem Web wird monospace zur Darstellung von Quelltext (Source-Code) verwendet.	Beispiel: Das schmale >i< ist gleich breit wie das >W< oder das >M< Die meist-verwendeten Monospace Schrift-Familien sind Courier oder Courier New. Fast alle anderen Schriften sind Proportional-Schriften, d.h. die Zeichen sind unterschiedlich breit. Die Breite von Leerzeichen ist unbestimmt (!), da sie vom Layout-Programm nach Bedarf festgelegt wird.
sans-serif Dieser CSS Standard-Schriftname verwendet einfache schmucklose Zeichen. Es gibt zahllose sans-serif (non-serif) Schriften. ► Faustregel: Verwenden sie Sans-serif Schriften für Überschriften, Titel, usw. Setzten sie diese Texte - wenn möglich - auch fett und größer als den einfachen 'Fließtext'.	Beispiel: Das ist eine Sans-serif (non-serif) Schrift. Die meist-verwendeten sans-serif Schrift-Familien sind Arial, Helvetica oder Verdana, eine derzeit moderne kommerzielle Schrift ist Futura.
serif Dieser CSS Standard-Schriftname verwendet Zeichen mit 'Serifen' (Füßchen, Schraffen), das sind kurze Querstriche an den Linien-Enden, welche die einzelnen Zeichen optisch verbinden und damit die Lesbarkeit erleichtern, vor allem von klein gesetztem Text. ► Faustregel: Verwenden sie Serif-Schriften für 'Fließtext', d.h. für die Haupt-Menge des einfachen Textes.	Beispiel: Das ist eine Serif Schrift Die meist-verwendeten serif Schrift-Familien sind Times oder Times New Roman. ♣ Tipp: Wenn sie Fließtext in Spalten setzen, dann ist es für normale erwachsene Menschen möglich, mit einem Blick eine ganze Zeile zu lesen. Dadurch sind ihre Texte schneller und mit weniger Anstrengung lesbar.

Die Schrift kommt vom Client-PC
Schrift-Familie in HTML + CSS Ein Blick auf den HTML-Quelltext einer Webseite zeigt, dass die verwendeten Schriften nicht in der Webseite enthalten sind, und auch nicht (wie z.B. Bilder) getrennt angefordert werden. Die Schriften stammen normalerweise vom Client-PC (auf welchem das Browser-Programm läuft). Im HTML-Quelltext ist lediglich angemerkt, welche der Client-Schriften zu verwenden ist, z.B. <div style="font-family:Verdana;"> Probetext </div> ● Diese Anweisung wird nur (!) dann wunschgemäß ausgeführt, wenn die gewünschte Schrift am Client-PC installiert ist. Ansonsten ist die Darstellung kaum vorhersagbar - je nach Betriebssystem, Browser und Konfiguration.	Standard CSS Schrift-Namen → CSS bietet 3 Standard-Namen für Schrift-Familien, die unabhängig vom Client-PC ein Minimum an Sicherheit für die Darstellung gewähren: monospace, sans-serif, serif Jeder Client-PC legt selbst fest, welche der real installierten Schrift-Familien mit den 3 Namen verknüpft werden. Damit kann man zwar die am Client verwendete Schrift nicht genau festlegen, jedoch zumindest ungefähr den Charakter des Dokuments angeben: <div style="font-family:serif;"> Probetext </div>
Liste von Schriften In der Praxis gibt man am besten nicht eine einzelne Schrift an, sondern eine Liste der gewünschten Schrift-Familien. Der Browser durchläuft die Liste so lange, bis er auf eine installierte (=verwendbare) Schrift stößt. ♣ Am Ende der Liste sollte stets einer der 3 Standard-Namen stehen. Beispiel: <div style="font-family: Helvetica, Verdana, Arial, sans-serif;"> Probetext </div> Wenn der Name einer Schrift-Familie Leerzeichen enthält, dann setzt man den Namen in ' Single Quotes: <div style="font-family: 'Times New Roman', Times, serif;"> Probetext </div>	Veraltetes HTML_Element <font> Es gibt ein veraltetes / auslaufendes HTML-Element <font> zur Festlegung von Schrift-Eigenschaften (Familie, Farbe, Größe). ▲ Ersetzen sie derartige Elemente durch → CSS-Angaben (so wie links gezeigt) und verwenden sie das Element keinesfalls für neue Entwicklungen. Manche Web-Editor-Programme erlauben wahlweise die Verwendung von <font>-Elementen oder CSS. Ändern sie die Konfiguration zur ausschließlichen Verwendung von CSS ! Das HTML <font>-Element bei SelfHTML
Individuelle Schrift Manchmal ist es notwendig, die Ansicht einer bestimmten Schrift-Familie zu erzwingen, z.B. für ein Text-Logo. Dazu gibt es mehrere unterschiedliche Hilfsmittel (rechts). Alle genannten Verfahren sind nur begrenzt verwendbar. Es ist zu hoffen, dass zukünftige Web-Standards und Browser die freie Verwendung einer sinnvollen Anzahl von Schrift-Familien erlauben.	Einige Methoden, um die Ansicht einer bestimmten Schrift-Familie zu erzwingen: (Details in den folgenden Kapiteln dieser Seite) • Verwendung von CSS @font-face • LAN-Schriften im eigenen Netzwerk • Google-Schriften • Text als statische Grafik rendern • Text dynamisch rendern • Adobe PDF • TrueDoc von Bitstream • WEFT von Microsoft

CSS @font-face
CSS Cascading StyleSheets bietet die Anweisung @font-face, welche eine Schrift-Datei (z.B. *.ttf) von einem entfernten Server ladet. Nach einer wechselvollen Geschichte wird diese Anweisung heute von allen modernen Browsern (Firefox, Opera, Chrome, ...) unterstützt, nicht jedoch vom MSIE-Browser. Nur für lizenzfreie Schriften Mit dieser Methode wird die Schrift-Datei bei Anforderung einer Webseite auf jeden einzelnen Client-PC geladen. Das ist nur für lizenz-freie Schriften zulässig !	Beispiel in der (normalerweise am Client-PC nicht installierten) Schrift Aerojones: Sonderschrift • Wenn der Text in einer auffälligen Sonderschrift angezeigt wird, dann beherrscht ihr Browser diese Methode. • Wenn nicht, dann funktioniert die Methode in diesem Fall nicht: Dier Schrift wird über das Inernet nicht geladen, oder der Browser kann die Methode nicht verwenden.
Vorbereitung: In den <head> jeder Webseite wird ein CSS <style>-Element eingesetzt, darin eine @font-face Anweisung mit Angabe des Pfades zur Schrift-Datei: <style type="text/css"> @font-face{font-family:Aerojones; src:url(aerojones.ttf);} </style> Wenn die Schrift-Datei nicht am gleichen Server liegt, dann gibt man als Pfad die Web-Adresse an, z.B.: src:url(http://server.com/font/aerojones.ttf);	● Alternativ kann man die @font-face-Anweisung in eine zentrale → StyleSheet-Datei einsetzen, die von allen Webseiten geladen wird. In diesem Fall ist in den einzelnen Webseiten keine Anforderung der Schrift mehr notwendig. Diese Methode ist einfacher. Man sollte sie jedoch nur dann anwenden, wenn man die betreffende Schrift-Familie auf vielen oder allen Webseiten verwendet.
Anwendung Im HTML-Quelltext wird die geladene Schrift so wie jede andere Schrift-Familie angefordert: <p style="font-family:Aerojones"> Text in Aerojones </p> Ersetzen sie den Namen der Schrift-Familie (hier 'Aerojones') durch die in ihren Webseiten verwendete Schrift.	♣ Tipp: Die Schrift-Datei wird von jedem einzelnen Client-PC (Web-BesucherIn) geladen. Verwenden sie daher nach Möglichkeit nur kleine Schrift-Dateien, in denen lediglich die 128 → ASCII-Zeichen oder die 256 Zeichen ASCII+Latin-1 ( Umlaute) definiert sind. Schrift-Dateien mit dem → Unicode-Zeichensatz sind sehr groß und für diesen Zweck eher ungeeignet.

LAN-Schriften
Für Webseiten, die garantiert nur innerhalb des eigenen lokalen Netzwerks (LAN) verwendet werden, kann man jede verfügbare Schrift-Familie verwenden. Die Schrift muss im Betriebssystem jedes einzelnen PC des Netzwerks installieert werden.	Anwendung einer Schrift myfont.ttl <p style="font-family:Myfont"> Absatz in 'myfont' </p>
Diese Methode ist zwar (in kleinen Netzwerken) rasch und eifach anwendbar, hat jedoch ihre Tücken:	• Sie funktioniert nicht auf den NoteBook-PC von Gästen. • Man muss lokale und öffentliche Webseiten getrennt formatieren.

Freie Google-Schriften

Im Projekt Google-Fonts wird eine Reihe freier Schriften zur Verwendung auf eigenen Webseiten angeboten.

Diese Methode funktioniert recht gut, ist jedoch nicht allgemein verwendbar, sondern vom Schrift-Provider (hier: Google) abhängig, und daher nur für die dort angebotenen Schriften verwendbar.

Google bietet die gleichen Schriften auch als Dateien *.ttf zum Download an. Man kann sie dann am eigenen PC installieren und für lokale Webseiten das <link>-Element (rechts) weglassen. Allgemein im Internet verwendete Webseiten müssen jedoch das <link>-Element weiterhin enthalten ! - In diesem Fall ist die Schrift auch ohne Verbindung mit dem Internet lokal verwendbar.

Anforderung der Google Schrift-Datei aus dem Internet:

<link

href="http://fonts.googleapis.com/css?family=Lobster"
rel="stylesheet" type="text/css"

/>

Das <link>-Element muss in jeder einzelnen Webseite enthalten sein, welche die bezeichnete Schrift verwendet. Das <link>-Element verweist auf eine Stylesheet-Datei, die man auch selbst lesen kann (Klicken sie die oben enthaltene Web-Adresse).
Alternativ kann man die folgende Anforderung in eine zentrale Stylesheet-Datei einfügen:

@import url(http://fonts.googleapis.com/css?family=Lobster);

In diesem Fall braucht man in den einzelnen Webseiten keine Anforderung der Schrift.

Anwendung der Schrift in einer Webseite:

Absatz in der Schrift Lobster

</p>

Für das Beispiel wird die Schrift-Familie Lobster verwendet:. Sie ist so markant, dass man sofort bemerkt, ob sie wunschgemäß verwendet wurde, und mit 50kB relativ klein.

Text als statische Grafik
Kurze gleichbleibende Texte (z.B. ein Text-Logo) kann man mit jedem professionellen Grafik-Programm in Pixel-Grafik umwandeln (Rendern). Das Verfahren eignet sich nur für eine ganz kleine Anzahl wichtiger Texte, garantiert allerdings das exakt gleiche Aussehen auf jedem beliebigen Client-PC.	Diese Grafik wurde mit dem kostenfreien Programm Gimp erzeugt, im optimalen Format PNG gespeichert und in die Webseite eingebettet. Die Grafik ist statisch (gleichbleibend).
Daten-Menge Die gezeigte Grafik-Datei ist 710 Bytes groß. Die vergleichbare CSS-Anweisung (rechts) benötigt zwar nur ca. 85 Bytes, kann jedoch die Grafik weder zuverlässig noch exakt ersetzen. • Der Mehr-Aufwand für den Transport der Grafik muss für jede/n BesucherIn nur einmal erbracht werden: Man verwendet normalerweise auf jeder Webseite die gleiche Logo-Grafik. Diese wird vom Browser im lokalen Cache-Speicher abgelegt und für jede weitere Webseite nicht mehr vom Server geladen sondern aus dem eigenen Cache entnommen.	Vergleich mit CSS: Dieses Beispiel ist keine Grafik sondern als Text in HTML+CSS gesetzt: <span style="color:#C00; font-family:'Courier New',Courier,mono; font-size:48pt; font-weight:bold;"> pst </span>
Grafik-Format Wenn eine Grafik nur wenige abzählbare Farben enthält, dann verwendet man am besten das Datei-Format PNG oder GIF Das Beispiel rechts oben enthält nur 2 Farben (Rot und Transparent). • Gute Grafik-Programme rendern auf Wunsch mit 'weichen' Rändern: Am Übergang Rot-Weiss werden einige Bildpunkte (Pixel) in Zwischentönen verwendet. Dadurch wird die Anzahl der verwendeten Farben etwas vergrößert. Wenn man mit maximal 256 unterschiedlichen Farben auskommt, dann kann man PNG oder GIF verwenden. Die beiden genannten Grafik-Formate speichern die Daten besonders kompakt. In diesem Web wird vorzugsweise PNG-Grafik verwendet.	Wenn eine Grafik 'unzählbar' viele verschiedene Farben enthält, dann verwendet man am besten das Format JPEG Beispiel: Portraits, Landschaften, Blumen, Tiere, ... • Digital-Cameras liefern meist JPEG-Dateien. Diese muss man jedoch unbedingt auf die tatsächlich verwendete Größe reduzieren. JPEG erlaubt variable Kompression auf Kosten der Qualität.
Upload Eine Pixel-Grafik ist nicht in der jeweiligen Webseiten-Datei enthalten. Der HTML-Quelltext enthält lediglich einen Verweis mit Angabe der Quelle, z.B. <img src="grafik.png" /> Nach Erhalt des HTML-Quelltextes fordert der Browser alle darin angeführten Grafik-Dateien an und setzt sie in die Ansicht der Webseite ein.	• Jede verwendete Grafik-Datei muss sich daher im 'Web-Verzeichnis' befinden, d.h. im gleichen Verzeichnis, wo sich auch die Startseite (Homepage) index.html befindet (oder in einem Sub-Verzeichnis). • Außerdem muss man jede verwendete Grafik-Datei auf den Server des Webproviders laden. - Beide Voraussetzungen werden von Internet-AnfängerInnen oft vergessen.

Adobe PDF
Portable Document Format (PDF) Das Datei-Format PDF des Herstellers Adobe wurde mit dem Ziel entwickelt, ein beliebiges Dokument auf jedem PC genau gleich anzuzeigen und auf jedem Drucker genau gleich zu drucken. PDF war ursprünglich lizenzpflichtig, ist jedoch seit 2008 ein Offener Standard. Eine PDF-Datei kann Text und Grafik in jeder beliebigen Anordnung enthalten. Normalerweise werden auch die verwendeten Schrift-Familien in die Datei aufgenommen.	PDF-Ansicht Zum Lesen von PDF-Dateien braucht man das Programm Adobe PDF-Reader, das kostenfrei für alle gängigen Betriebssysteme verfügbar ist. Dieses Programm ist so weit verbreitet, dass man es auf den meisten PC voraussetzen kann. Es ist guter Stil, einen Link zur Download-Seite von Adobe anzugeben, damit jede/r BesucherIn den PDF-Reader bei Bedarf laden kann. Auf Linux-PC ladet man die vorbereiteten Software-Pakete acroread (SuSE) bzw. pdf-viewer (Debian/Ubuntu).
PDF-Herstellung • Ursprünglich war zur Herstellung von PDF-Dokumenten das kommerzielle Programm Adobe Acrobat erforderlich. • Heute gibt es zusätzlich dazu auch einige kostenfreie Programme. Derartige Programme verhalten sich am besten wie ein Drucker: In diesem Fall kann man die Druck-Ausgabe jedes beliebigen Programms in eine PDF-Datei umleiten. Ein Programm zur PDF-Herstellung ist in das kostenfreie Programm-Paket LibreOffice integriert und erlaubt die Herstellung einer PDF-Datei mit Klick auf das links gezeigte Icon.	Schrift-Familien Die meisten Programme zur PDF-Herstellung (z.B. LibreOffice) integrieren alle verwendeten Schriften ungefragt in das PDF-Dokument. • Dabei handelt es sich jedoch um eine Option, die auch fehlen kann: In diesem Fall werden die Schriften nicht mit-verpackt, sondern man verwendet die Schrift-Familien des Client-PC ähnlich wie auf Webseiten. ♣ Testen sie das Aussehen wichtiger PDF-Dokumente auf einem PC, an dem mindestens eine der verwendeten Schriften nicht installiert ist !
Webseiten PDF-Dateien kann man einzeln transportieren, als Mail-Anlage versenden oder in Webseiten einbetten. Das Beispiel rechts zeigt die Einbettung einer kleinen PDF-Datei. Sie wird nur dann angezeigt, wenn ihr Browser-Programm mit dem Adobe PDF-Reader ergänzt wurde. • Ansonsten erhalten sie beim Öffnen dieser Seite die Aufforderung, die PDF-Datei lobster.pdf mit einem anderen Programm zu öffnen oder am eigenen PC zu speichern. • Für ein PDF-Dokument typisch sind die Bedienungs-Elemente (Buttons, Menü-Befehle), die man allerdings bei der Herstellung auch entfernen kann. • Die Datei enthält Text in der nur selten installierten Schrift Lobster (Google Fonts), als Test der Anzeige integrierter Schrift-Familien. HTML-Quelltext der Einbettung: <iframe src="lobster.pdf"></iframe> ♦ Details zur Einbettung von Objekten in Webseiten Als Ergänzung eine Möglichkeit zum Download der Datei lobster.pdf
Dynamische PDF-Dokumente Mit jeder modernen Programmiersprache kann man PDF-Dokumente herstellen. Damit kann man u.a. PDF-Dokumente automatisch, auch Live herstellen und als Datei speichern, versenden oder in Webseiten einbetten.	Die Herstellung von PDF-Dokumenten ist in → Modulen der Programmiersprache → PHP organisiert, die man nur dann ladet, wenn man diese Fähigkeit wirklich braucht. Sie wird hier nicht demonstriert.

TrueDoc
Diese lizenzpflichtige Methode wurde vom Hersteller BitStream für professionelle Schrift-AnwenderInnen entwickelt. Die Schriften sind gegen unbefugten Download geschützt und daher ohne Lizenz nicht verwendbar.	Links: BitStream (archivierte Original-Seite), SelfHTML, Wikipedia

WEFT
Diese Methode (Web Embedding Fonts Tool ) wurde von Microsoft entwickelt. Man kann damit nicht-lizenzpflichtige Schrift-Dateien in Webseiten und anderen MS-Dokumenrten verwenden. Derzeit scheint diese Methode jedoch außerhalb der MS-Produkte kaum unterstützt zu werden.	Links: WEFT (Microsoft), SelfHTML, Wikipedia

Einfacher Text - ohne Schrift-Familie
In manchen Fällen ist es sinnvoll und üblich, ausdrücklich auf die Angabe einer Schrift-Familie zu verzichten.
Reiner Text (text/plain) Besonders einfache Text-Dokumente enthalten nur einfachen Text (→ MIME-Type text/plain) ohne Formatierung. In der IT-Entwicklung verwendet man für Quelltext (Source-Code) vorzugsweise dieses Format. Jedes Text-Programm kann seine Daten in diesem Format speichern, meist unter Bezeichnungen wie 'Nur Text' oder ähnlich. Die Datei-Erweiterung *.txt für solche Dateien ist üblich, jedoch nicht zwingend.	Vorteile: Reine Text-Dateien brauchen besonders wenig Speicherplatz, lassen sich stark komprimieren (*.zip) und sind garantiert mit jedem einschlägigen Programm verwendbar. Wenn man das absolut sicherstellen will, dann verzichtet man darüber hinaus auf alle Sonderzeichen (Umlaute) im Text. Zur Bearbeitung solcher Daten sind Text-Editor-Programme (notepad.exe, besser Notepad++) besonders geeignet: Sie entfernen beim Lesen oder Einfügen alle Anweisungen zur Formatierung, und sie speichern Text-Daten garantiert ohne Formatierung.
Textverarbeitung: Jedes Textverarbeitungs-Programm (z.B. LibreOffice-Writer, MS-Word, ...) hat in seiner Konfiguration Absatz-Formate für alle häufig vorkommenden Elemente festgelegt. Da viele AnwenderInnen mit der vorgegebenen Formatierung zufrieden sind, beschränkt sich die Gestaltung meist auf die Anwendung fetter oder unterstrichener Schrift-Schnitte. Derartige Dokumente sehen mit großer Wahrscheinlichkeit auch auf den meisten anderen PC gleich aus.	In der professionellen Textverarbeitung spielt das Anlegen und Verwenden eigener Absatz-Formate allerdings eine wichtige Rolle. In diesem Fall wird natürlich auch die zu verwendende Schrift-Familie ausdrücklich festgelegt. Normalerweise wird die Schrift-Datei jedoch nicht zusammen mit einem Text-Dokument transportiert. Die gewünschte Ansicht erscheint daher zuverlässig nur am Ausdruck, nicht jedoch bei Weitergabe der Datei.
Webseite: Jedes Browser-Programm hat in seiner Konfiguration die Formatierung aller HTML-Elemente (z.B. Überschriften, Absätze, einfacher Text, usw.) festgelegt. Diese Standard-Formate werden angewendet, wenn der Browser in einer Webseite keine anderen ( → CSS) Angaben zur Formatierung findet.	Für einfache Ansprüche reichen die Standard-Formate meist aus. Es ist möglich, die Standard-Formate von Browsern zu ändern, das wird jedoch sehr selten in Anspruch genommen. Bei Verwendung spezieller Schriften in Webseiten werden diese nur dann korrekt angezeigt, wenn sie am jeweiligen Client-PC installiert sind, oder wenn eine der hier angeführten speziellen Methoden verwendet wird.
HTML-Element <pre> Wenn man innerhalb einer Webseite einen Text als 'unformatiert' hervorheben will, dann verwendet man dazu das Element <pre> Der Text wird dann normalerweise in der Schrift Courier angezeigt. • Besonderheit: Innerhalb des <pre>-Elements werden Mehrfach-Leerzeichen, Tabulator (TAB) und Zeilen-Umbruch (CR/NL) nicht unterdrückt sondern angezeigt.	Beispiel: <pre> Dieses Element wird oft zur Anzeige von Quelltext verwendet. </pre>

Zeichen-Code und Schrift-Familie
Zeichensatz Ein → Zeichensatz (Character Code) legt das Bit-Muster fest, mit dem ein bestimmtes Zeichen am PC intern gespeichert wird. Es gibt zahlreiche Codes, von denen die meisten international standardisiert sind. Sie unterscheiden sich in Art und Anzahl der darstellbaren Zeichen, sowie in der zum Speichern verwendeten Anzahl von Bits. ● Der Zeichen-Code legt das Aussehen der definierten Zeichen nicht fest ! • Für Mitteleuropa wichtige Zeichen-Codes sind → ASCII (128 weltweit eindeutige Zeichen), → Latin-1 (ISO-8859-1, 256 Zeichen mit den deutschen Umlauten) und → Unicode (je nach System mindestens 65000 Zeichen). Zumindest die häufigsten und wichtigsten Zeichen-Codes sind in jedem PC-Betriebssystem geladen. • Ein am PC gespeichertes Zeichen unterscheidet sich im Bitmuster nicht von einer Zahl. Ein Programm braucht daher zusätzliche Angaben über den Typ der jeweiligen Daten, um zwischen Zahlen und Zeichen zu unterscheiden. ♦ Details zu Zeichen-Codes	Formatierung Zur Formatierung von Text kann man je nach Software zahlreiche Eigenschaften angeben (Schrift-Familie, Schnitt, Farbe, Größe, ...). Die Schrift-Familie stellt das künstlerische Element dar, welches weitgehend den Charakter eines Textes bestimmt. Das Bild zeigt das Zeichen mit der Code-Nummer 65 und dem Namen 'Latin Capital Letter A' in unterschiedlicher Formatierung. Die Form der Zeichen wird in Schrift-Dateien festgelegt, die man normalerweise in jedes PC-Betriebssystem laden kann. Die wichtigsten Datei-Formate sind TrueType (.ttf), OpenType (.ttf, .otf) und PostScript (.pfm). In den meisten Schrift-Dateien sind mindestens die 128 ASCII-Zeichen angelegt. Manchmal sind allerdings nur Ziffern und Großbuchstaben enthalten. Darüber hinaus sind Soderzeichen (z.B. Umlaute, €-Zeichen) nur in wenigen Schriften enthalten. ♣ Tipp: Testen sie vor Verwendung einer Schrift-Familie, ob und wie die benötigten Zeichen darin festgelegt wurden.
Nationale & regionale Zeichensätze In der Frühzeit der Informatik war es notwendig, Zeichen sparsam mit 1 Byte = 8 Bit zu codieren. Damit waren nur 256 verschiedene Zeichen verfügbar, nach Abzug der (immer enthaltenen) ASCII-Zeichen und Steuerzeichen nur mehr 96 nationale Sonderzeichen. Das war für die meisten 'westlichen' Schriften ausreichend: An den meisten PC werden noch immer derartige 1-Byte Zeichensätze verwendet. Nachteil: Die gleiche Code-Zahl entspricht je nach PC-Standort und Betriebssystem unterschiedlichen nationalen Zeichen. Bilder-Schriften Noch einen verhängnisvollen Schritt weiter gehen Bilder-Schriften wie z.B. Symbol: Damit werden andere Zeichen dargestellt als von der Code-Zahl angegeben, im Fall von Symbol z.B. die griechischen Zeichen (Code 880-1023) mit den für die ASCII-Zeichen (Code 0-127) reservierten Code-Nummern. ♣ Tipp: Verwenden sie keine Bilder-Schriften !	Unicode In einer globalisierten Welt sind nationale Alleingänge teuer und manchmal problematisch. Verwenden sie daher für die Zeichen fremder Sprachen unbedingt → Unicode und nicht die veralteten → nationalen oder gar → firmen-eigenen Zeichensätze. Alle gängigen Betriebssysteme unterstützen mindesten die weltweit häufigsten 65000 Unicode-Zeichen, und zwar unmissverständlich und weltweit eindeutig. Das Beispiel: lässt sich - wie jeder andere Text - kopieren und in eigene Text-Dokumente einsetzen: ABC äöü Σαβγ Æçþø БЖцӤ €£$¥ ∃∇⊆ ♠♣♥♦ usw... • Alle Seiten dieses Webs sind ausschließlich mit Unicode (UTF-8) erstellt. ♦ Details zu ASCII, Latin-1, Unicode
§ Urheber-Recht Es gibt eine unüberschaubar große Anzahl verschiedener Schift-Familien. Sie sind nicht standardisiert, unterliegen jedoch wie jedes künstlerische Produkt dem Urheber-Schutz. Man kann eine selbst entwickelte Schrift-Familie zur allgemeinen Verwendung freigeben, oder - falls man die rechtlichen Voraussetzungen erfüllt - schützen lassen und kommerziell vermarkten.	Es gibt daher eine rechtliche Voraussetzung für die Verwendung einer Schrift-Familie: Die Schift muss lizenzfrei sein, oder man muss nachweisbar über eine Lizenz verfügen. In letzterem Fall darf man die Schriften zwar verwenden, jedoch nicht weitergeben. Im Internet werden vorwiegend freie Schrift-Familien verwendet, in kommerziellen Druckwerken dagegen meist lizensierte Schriften.

Zeichencodes	Zeichen-Codierung: ASCII, ANSI, ISO-8859, Unicode, UTF, ...
Live Schrift-Familien	Live Einstellunfg und Test der Schrift-Formatierung an ihrem PC
CSS	Text-Formatierung mit Cascading StyleSheets
Schrift vom Client	Schriften werden am Client-PC erwartet, nicht transportiert !
Transport	von Schrift-Familien: Verschiedene Methoden:
@font-face	Verwendung der CSS-Anweisung @font-face
LAN-Schrift	Beliebige Schriften - nur im eigenen Netzwerk
Google-Schrift	Freie Schrift-Familien für eigene Webseiten
Statische Grafik	Logo-Schriftzug als Pixel-Grafik
Dynamische Grafik	Rendern von Text mit Programmen
Adobe PDF	Garantiert gleiche Ausgabe auf allen PC-Systemen
TrueDoc	von BitStream
WEFT	von Microsoft
Einfacher Text	Ausdrücklicher Verzicht auf Formatierung
Zeichen-Code	Zeichen-Code Standards und Schrift-Familien
Links	Ausgewählte Links zum Thema 'Schrift-Familie'
Schrift-Größe	Maße & Einheiten, reale Größe bei der Ausgabe

Text als dynamische Grafik
Schrift-Familie 1 2 3 4 Größe in pt 18 36 48 72 Farbe: ■ ■ ■ ■ ■ Hintergrund: ■ ■ ■ ■ Text:
Die Grafik wird Live von einem kleinen → PHP-Programm am Server-PC erzeugt. Vorteile: Es werden Grafik-Dateien erzeugt, d.h. das Aussehen auf jedem Client-PC ist festgelegt und garantiert. Man kann jeden beliebigen Text rendern, sogar individuelle Texte für jede/n einzelne/n BesucherIn. Man braucht zwar die Schrift-Datei (z.B. *.ttf), diese muss jedoch nicht am Betriebssystem des Servers installiert sein. ♦ Details zum Rendern von Text mit PHP	Nachteile: Das Verfahren ist zwar sehr flexibel, jedoch ziemlich aufwändig. Die Belastung des Server-PC ist hoch. Das Verfahren eignet sich nur für professionelle Provider, welche auch die Programmiersprache → PHP anbieten.

Ausgewählte Links zum Thema 'Schrift-Familie'
UNICODE - Home Page Character Sets & Encodings (Tutorial)	Wikipedia: Kategorie Schriftart, Schrift-Familie, Schrift-Schnitt, Proportional-Schrift, Monospace-Schrift, Serife, Rendern (Rastern), PDF, TrueType, OpenType, Postscript, ASCII, Unicode SelfHTML: CSS, Zeichensatz (ISO-8859-Familie

Schrift-Familie

Aussehen und Charakter von Text

Live - Standard-Schriften ihres PC

Standard Schrift-Familie

Schrift-Schnitt

Schrift-Größe

Cascading StyleSheets (CSS)

CSS-Elemente zur Text-Formatierung:

Standard Schrift-Namen in CSS

monospace

sans-serif

serif

Die Schrift kommt vom Client-PC

Schrift-Familie in HTML + CSS

Standard CSS Schrift-Namen

Liste von Schriften

Individuelle Schrift

CSS @font-face

CSS

Vorbereitung:

Anwendung

LAN-Schriften

Freie Google-Schriften

Text als statische Grafik

Daten-Menge

Grafik-Format

Upload

Text als dynamische Grafik

Adobe PDF

Portable Document Format (PDF)

PDF-Ansicht

PDF-Herstellung

Schrift-Familien

Webseiten

Dynamische PDF-Dokumente

TrueDoc

WEFT

Einfacher Text - ohne Schrift-Familie

Reiner Text (text/plain)

Textverarbeitung:

Webseite:

Zeichen-Code und Schrift-Familie

Zeichensatz

Formatierung

Nationale & regionale Zeichensätze

Unicode

Urheber-Recht

Ausgewählte Links zum Thema 'Schrift-Familie'