CSS: Schriftdefinition

von Jan Winkler

Seit CSS Level 2 ist es möglich eigene Schrifarten zu definieren, zu importieren und zu gestalten. Dazu werden die folgenden Aufrufe und Eigenschaften zur Verfügung gestellt:

@font-face-Aufruf  

Der @font-face-Aufruf kann, wie in CSS - Aufrufe beschrieben, dazu verwendet werden, Schriften zu definieren. Dabei können neue Schriftarten importiert werden, bestehende Schriftarten verändert oder einfach umbenannt werden. Dazu können innerhalb der geschweiften Klammern des @font-face-Aufrufes die Eigenschaften der Schriftdefinition notiert werden. Die folgenden Eigenschaften stehen dabei zur Verfügung:

font-family, font-size, font-stretch, font-style, font-variant, font-weight, unicode-range, units-per-em, src, ascent, bbox, cap-height, definition-src, descent, panose-1, slope, stemh, stemv, widths, x-height, baseline, centerline, mathline und topline.

Beispiel:

@font-face 
{
 font-family: 'Meine Schrift';
 font-weight:bolder;
 /* usw. */
} 

font-family, font-size, font-stretch, font-style, font-variant und font-weight  

Die Eigenschaften font-family, font-size, font-stretch, font-style, font-variant und font-weight können zur Beschreibung der neuen Schriftart verwendet weren. Dazu werden diese einfach mit den entsprechenden Werten in den @font-face-Aufruf definiert. Was die jeweiligen Eigenschaften bedeuten, erfahren Sie im dazugehörigen Kapitel CSS - Schriftgestaltung. Zusätzlich kann bei allen Eigenschaften ein zweiter, dritter und vierter (etc.) Wert definiert werden. Dies beschreibt dann eine Liste der verfügbaren Werte. Der Wert der font-family-Eigenschaft kann dabei frei gewählt werden. Die Eigenschaften font-size, font-stretch, font-style und font-weight können alternativ, statt einem fest definierten Wert, auch den Wert all erhalten. Er sagt aus, dass alle möglichen Werte für diese Schriftart definiert sind.
Letztlich kann die so definierte neue Schriftart später weiter verwendet werden. Beispiel:

@font-face
{
 font-family: 'Meine Schriftart';
 font-size: 12pt, 8pt, 9pt, 10pt, 11pt;
 font-stretch: normal;
 font-style: italic;
 font-variant: normal;
 font-weight:all;
}
P { font-family: 'Meine Schriftart'}; 

unicode-range  

Die unicode-range-Eigenschaft beschreibt den Umfang des für diese Schriftart zu verwendenden Zeichensatzes. Als Wert kann hier ein oder mehrere Unicode-Definitionen notiert werden. Die Definition eines Unicode-Zeichens geschieht durch die Notation eines großen U, gefolgt von einem Plus-Zeichen (+). Dahinter wird nun der Code des Zeichen in Hexadezimalzahlen notiert. Dabei können Fragezeichen (?) als Joker verwendet werden. Das Minus-Zeichen (-) kann dabei als logisches BIS eingesetzt werden, um eine Zeichenfolge von einem Zeichen bis zu einem anderen zu definieren. Des Weiteren kann eine, durch Kommas getrennte, Liste definiert werden. Beispiel:

unicode-range: U+0, U+F??, U+0000-00EE;
/*Beschreibt die Zeichen: 0, F00 bis FFF und 0000 bis 00EE*/ 

units-per-em  

Die units-per-em-Eigenschaft beschreibt die Einheiten pro em . Em ist dabei das Quadrat, dessen Höhe der beabsichtigte Abstand zwischen Zeilen des gleichen Types in der gleichen Größe ist (orginal: "square whose height is the intended distance between lines of type in the same type size") . Um dies besser zu verstehen soll die folgende Grafik dienen:

Darstellung: em als Abstand zwischen zwei Zeilen

Die beiden roten Linien stellen die Trennlinien zwischen den Zeilen dar. Ein em ist nun das Quadrat, welches die Höhe (und somit auch Breite) hat, so groß wie der Abstand dieser beiden Trennlinen.

Als Wert wird hier für diese Eigenschaft eine Zahl notiert, die aussagt, in wieviele Einheiten/Teile dieses Quadrat eingeteilt werden soll. Normale Werte sind z.B. 250 (Intellifont), 1000 (Type 1) oder 2048 (TrueType). Beispiel:

@font-face { units-per-em: 250; } 

Bitte beachten Sie dabei, dass diese Eigenschaft keine eigene Aussage hat, vielmehr dient sie als Definition für andere Eigenschaften die sich an diesem Schema orientieren. z.B.: bbox, topline oder widths.

src  

Die src-Eigenschaft definiert die Quelle für eine Schriftart und sollte dabei aus einer Schriftendatei bestehen. Diese kann die URL einer Schriftdatei oder der Name einer lokalen Schriftart sein. Lokale Schriftarten werden mit local() notiert, wobei innerhalb der Klammern der Name der Schriftart als Zeichenfolge notiert wird. Beispiel:

@font-face
{
 src: local('Arial Fett Kursiv');
 font-family: 'Mein Arial';
}
@font-face
{
 src: url('http://www.name.de/name.eot');
 font-family: 'ABC2';
} 

Des Weiteren kann das Format der vorliegenden Schriftdatei notiert werden. Dies geschieht mit format() und wird innerhalb der Klammern vermerkt. Hierbei kann auch eine Liste von mehreren Formaten notiert werden. Diese beiden Definitionen (Schriftdatei bzw. Schriftname und Format) können, durch Kommas getrennt, beliebig oft wiederholt werden. Beispiel:

@font-face
{
 src: local('Arial Fett Kursiv'),
      url('../name/name.eot') format('truetype','opentype'),
      url(http://www.name.de/name/name.ttf) format('truetype');
 font-family: 'Mein Arial';
}

Mögliche Formate sind derzeit:

intellifont	Intellifont
speedo	Speedo
truetype-gx	TrueType mit .gx Suffix (*.gx)
opentype	OpenType und TrueType Open (*.ttf)
truetype	TrueType (*.ttf)
type-1	PostScript(TM) Type 1 (*.pfb *.pfa)
embedded-opentype	Embedded OpenType (*.eot)
truedoc-pfr	TrueDoc™ Portable Font Resource (*.pfr)

Programme dazu, die das Erstellen und Verwalten dieser Schriftarten möglich machen, sind beispielweise WEFT 3 von Microsoft oder FontLab. Des Weiteren gibt es eine Fülle von weiteren Programmen überall im Netz.

ascent  

Die ascent-Eigenschaft beschreibt den maximalen Anstieg der Schrift. Dieser Anstieg wird von der Grundlinie bis zur Oberlinie gemessen - Apostrophe oder sonstige andere Zeichen werden dabei nicht berücksichtigt. Die folgende Grafik soll dies verdeutlichen:

Darstellung: ascent-Bereich

Die Gesamtschrifthöhe erstreckt sich bei dieser Grafik vom gekennzeichneten Bereich a bis d (horizontaler Balken 1/rot). Die Normalhöhe der Schrift erstreckt sich vom Bereich b bis c (horizontaler Balken 3/grün). Diese Normalhöhe wird als ascent-Wert angegeben. Der Bereich, in dem sich beispielsweise Apostrophe befinden (Bereich d) sowie der unterste Bereich, in dem sich beispielsweise der Haken des j oder des y befinden, werden dabei nicht berücksichtigt. Beispiel:

ascent: 500; 

Als Wert wird hier die Anzahl der em-Einheiten notiert, die der maximale Anstieg der Schrift hoch sein darf. Dazu muss auch immer die units-per-em-Eigenschaft definiert werden.

bbox  

Die bbox-Eigenschaft beschreibt die maximale Begrenzung der Buchstaben. Diese Begrenzung ist das kleinste Rechteck um alle Buchstaben, wenn diese alle im gleichen Ursprung stehen würden. Die folgende Grafik soll dies verdeutlichen:

Darstellung: bbox-Eigenschaft

Auf dieser Grafik sind die Klein- und Großbuchstaben zusammen in einem Ursprung abgebildet. Das Rechteck, das man, parallel zur Grundline, darum zeichnen kann (hier rot), ohne die Buchstaben dabei zu schneiden, stellt die Begrenzung dar, die mit der bbox-Eigenschaft definiert wird. Sie sagt also aus, wie groß (breit und hoch) die Buchstaben maximal sein dürfen.

Als Werte werden vier Zahlen notiert, die zwei gegenüberstehende Ecken des Rechtecks definieren. Diese Ecken sind die links-unten und rechts-oben. Wert 1 beschreibt dabei die x-Koordinate der unteren linken Ecke; der zweite Wert die y-Koordinate. Der dritte Wert beschreibt die x-Koordinate der oberen rechten Ecke; der vierte Wert die y-Koordinate. Die Zahlen, die Sie dabei notieren, gelten als Einheiten des von Ihnen definierten em-Quadrates - Sie müssen also, wenn Sie diese Eigenschaft verwenden, zusätzlich em mit der units-per-em-Eigenschaft definieren. Die folgende Grafik stellt ein solches Rechteck in der Definition zu einem em dar:

Darstellung: Definition der bbox-Eigenschaft

Beispiel:

units-per-em:1000;
bbox: 250, 250, 250, 250;
/*definiert ein 500 mal 500 Einheiten großes Rechteck genau in der Mitte*/ 

cap-height  

Die cap-height-Eigenschaft beschreibt die Größe von Großbuchstaben. Als Wert wird dazu die Anzahl an Einheiten im em-Quadrat definiert, die diese Großbuchstaben hoch sein sollen. Dazu ist immer auch die definition der units-per-em-Eigenschaft notwendig. Beispiel:

cap-height:750; 

definition-src  

Die definition-src-Eigenschaft gibt die URL einer externen Schriftbeschreibung an. Unter dieserURLsollen sich dann die Definitionen zu dieser Schriftart befinden. Beispiel:

@font-face
{
 font-family: 'Name';
 src: url('http://name.de/name.eot');
 definition-src: url('http://name.de/font1.css');
} 

descent  

Die descent-Eigenschaft bescheibt den maximalen Abstieg der Schrift. Der Abstieg einer Schrift ist von der Mittellinie bis zur Unterlinie. Zeichen die darunter/drüber hinaus gehen, werden nicht berücksichtigt. Die folgende Grafik soll dies veranschaulichen:

Darstellung: descent-Bereich

Die Mittellinie ist in der Grafik die Linie zwischen den Bereichen c und d (pink). Die Unterlinie ist die Linie zwischen den Bereichen a und b (grün). Der descent-Bereich erstreckt sich also vom Bereich b bis einschließlich c (horizontaler Balken 4/blau). Beispiel:

descent: 200; 

Als Wert wird hierbei die Anzahl der em-Einheiten angegeben, die der maximale Abstieg groß sein darf. Dazu muss auch immer die units-per-em-Eigenschaft definiert werden.

panose-1  

Mit der panose-1-Eigenschaft lässt sich die Schrift mit der PANOSE-1 Nummer beschreiben. Diese Nummer ist ein industrieeller Standard zur True Type Schriftarten Klassifizierung und Anpassung. Das System besteht dabei aus zehn hintereinander folgenden Nummern/Zahlen, deren Anordnung bzw. Wert die Schriftart sowie deren Eigenschaften klassifiziert. Beispiel:

panose-1: 1 2 0 5 1 0 4 0 5 1; 

Einen Überblick über die Nummern und Werte des PANOSE-1 Systems liefert das Verzeichnis der Panose-1 Nummern und Bedeutungen.

slope  

Die slope-Eigenschaft beschreibt die verticale Schräge der Schrift. Als Wert wird eine Zahl (ohne Einheit) angegeben. Diese sagt aus, wie weit in Grad (deg) gegen den Uhrzeigersinn die Striche der Buchstaben geschrägt werden sollen. Der Wert kann auch negativ sein; das ist dann der Fall, wenn Schriften schräg nach rechts gebogen werden, wie es z.B. bei allen kursiven Schriften der Fall ist. Beispiel:

@font-face { slope: -15; } 
/*macht aus einer normalen Schrift eine kursive Schrift*/

@font-face { slope: 20; } 
/*Macht aus einer kursiven Schrift eine normale Schrift*/ 

stemh und stemv  

Die stemh-Eigenschaft beschreibt die horizontale Stammbreite (stem) der dominierenden Buchstaben in em-Einheiten. Die stemv-Eigenschaft die vertikale Stammbreite. Da als Werte em-Einheiten angegeben werden, muss zusätzlich auch immer noch die units-per-em-Eigenschaft beschrieben werden.
Als Beispiel unterscheiden sich die vertikalen Haupt-Stämme der römischen Zeichen von den dünnen Stämmen der serifen Buchstaben "M" und "N"; zusätzlich können dort unterschiedliche Breiten für die Groß- und Kleinbuchstaben in der gleichen Schriftart sein. Die stemh- und stemv-Eigenschaften können nun dazu eingesetzt werden, diese Ungleichheiten heraus zu filtern oder selbst Ungleichheiten hinein zu bringen. Beispiel:

stemh: 600;
stemv: 800;

widths  

Die widths-Eigenschaft ist eine Liste von Breiten im em-Quadrat für die Schrift das jedem Zeichen entspricht. Als Wert muss dazu der Umfang der Unicode-Zeichen (ähnlich der unicode-range-Eigenschaft) sowie dahinter die Anzahl der em-Einheiten, als eine durch Leerzeichen getrennte Liste, definiert werden. Weitere Definitionen werden durch Kommas (,) voneinander getrennt. Beispiel:

widths: U+00?? 750, U+F0C1 800;
/* Beschreibt die Zeichen von 0000 bis 00FF mit 750 
   Einheiten Breite und das Zeichen F0C1 mit 800 Einheiten Breite*/ 

x-height  

Die x-height-Eigenschaft beschreibt die Höhe der Kleinbuchstaben (gemessen am kleinen x) im em-Quadrat. Als Wert wird also die Anzahl der Einheiten notiert. Beispiel:

x-height: 1500;

baseline  

Die baseline-Eigenschaft definiert die Lage der Grundlinie im em-Quadrat. An dieser Grundlinie werden die Buchstaben später ausgerichtet. Als Wert wird dabei die Höhe der Grundlinie in em-Einheiten notiert. Die folgende Garfik soll dies demonstrieren:

Darstellung: baseline-Eigenschaft

Wird ein anderer Wert als 0 (Null) verwendet, so muss zusätzlich die units-per-em-Eigenschaft definiert werden. Beispiel:

baseline: 200; 
/* positioniert die Grundline */ 

centerline  

Die centerline-Eigenschaft definiert die Lage der Mittellinie im em-Quadrat. An dieser Mittellinie werden die Buchstaben später ausgerichtet werden. Als Wert wird dabei die Höhe der Mittellinie in em-Einheiten notiert. Die folgende Garfik soll dies demonstrieren:

Darstellung: centerline-Eigenschaft

Es muss zusätzlich die units-per-em-Eigenschaft definiert werden. Beispiel:

centerline: 1000; 
/* positioniert die Mittellinie */ 

mathline  

Die mathline-Eigenschaft beschreibt die Lage (Höhe) der mathmatischen Grundlinie. Diese Linie wird dazu verwendet, mathematische Symbole wie z.B. das Plus-Zeichen (+) oder das Prozent-Zeichen (%) auszurichten. Als Angabe wird hier die Höhe dieser Linie in Einheiten des em-Quadrates angegeben. Die folgende Grafik soll dies verdeutlichen:

Darstellung: mathline-Eigenschaft

Es muss zusätzlich die units-per-em-Eigenschaft definiert werden. Beispiel:

mathline: 1200; 
/* positioniert die mathematische Grundlinie */ 

topline  

Die topline-Eigenschaft definiert die Lage der oberen Grundlinie im em-Quadrat. Als Wert wird dabei die Höhe (in em-Einheiten) dieser Linie angegeben. Die folgende Grafik soll dies verdeutlichen:

Darstellung: topline-Eigenschaft

Es muss zusätzlich die units-per-em-Eigenschaft definiert werden. Beispiel:

topline: 900; 
/* positioniert die obere Grundlinie */ 

« zurück

weiter »