CSS Level 2 @font-face-Aufruf  nach oben

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. */

CSS Level 2 font-family, font-size, font-stretch, font-style, font-variant und font-weight  nach oben

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'}; 

CSS Level 2 unicode-range  nach oben

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*/ 

CSS Level 2 units-per-em  nach oben

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:

em als Abstand zwischen zwei Zeilen
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.

CSS Level 2 src  nach oben

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

 

 
 

Anzeige