1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Ältere Elemente zur Schriftformatierung
</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Welche älteren, heute verpönten Möglichkeiten es in HTML gibt, Schriftart, Schriftgröße und Schriftfarbe zu bestimmen.">
<meta name="keywords" content="SELFHTML, HTML, Schriftart, Schriftgröße, Schriftfarbe, Textfarbe, <font>, face=, size=, color=">
<meta name="author" content="Stefan Münz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="selfhtml@teamone.de">
<meta name="DC.Date" content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/html/text/schrift.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="Information">
<meta name="SELF.Path" content="SELFHTML == ../../index.htm // HTML/XHTML == ../index.htm // Elemente zur Textgestaltung == index.htm">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHTML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Elemente zur Textstrukturierung</b></a></td>
</tr>
</table><table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>Ältere Elemente zur Schriftformatierung</h2>
<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>
<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#art_groesse_farbe"><b>Schriftart, Schriftgöße und Schriftfarbe</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#css_entsprechungen"><b>CSS-Entsprechungen</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere_infos"><b>Weitere Informationen</b></a><br>
</p>
</td>
</tr><tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2 class="Sh2"><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/deprecated.gif" width="30" height="30" border="0" alt="deprecated"><img src="../../src/msie2.gif" width="30" height="30" border="0" alt="MSIE 2.0"><img src="../../src/netsc11.gif" width="30" height="30" border="0" alt="Netscape 1.1"> <a class="an" name="art_groesse_farbe">Schriftart, Schriftgöße und Schriftfarbe</a></h2>
<p>Die hier beschriebenen HTML-Elemente sind als <i>deprecated</i> eingestuft, das heißt, sie sollen in Zukunft aus dem HTML-Standard entfernt werden. Da es sich bei diesen Elementen um die schlimmste "Verunreinigung" von HTML als reiner Struktursprache handelt, die bisher passiert ist, gibt es richtige Kampfschriften und Hetzkampagnen gegen die weitere Verwendung dieser Elemente im Web. Diese Elemente stellten eine Notlösung in jener Zeit dar, als HTML noch keine Formatiersprache wie CSS zur Seite stand.</p>
<p>Im Hinblick auf die Rückwärtskompatibilität zu Netscape 3.x kann der Gebrauch der hier beschriebenen Elemente noch nicht grundsätzlich verdammt werden. Aber bevor Sie auf Style-Angaben verzichten, verzichten Sie mittlerweile lieber auf die hier beschriebenen Elemente und benutzen Sie die <img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#css_entsprechungen"><b>CSS-Entsprechungen</b></a>.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/font.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<p>
<font size="7">Ziemlich riesiger Text</font><br>
<font size="1">Ziemlich winziger Text</font><br>
<font size="+1">Text etwas gr&ouml;&szlig;er als normal</font><br>
<font size="-2">Text deutlich kleiner als normal</font>
</p>
<p>
<font color="#FF0000">Knallroter Text</font><br>
<font color="#00C000">Gr&uuml;ner Text</font><br>
<font color="#0000FF">Blauer Text</font>
</p>
<p>
<font face="Avalon,Wide Latin">Das ist Text in Schriftart Avalon,
oder, falls Avalon nicht darstellbar, in Wide Latin</font>
</p>
<basefont size="2" color="#CC00CC" face="Verdana">
<h2>Da komme was wolle</h2>
<p>
Alles kleiner als normal, lila und in Schriftart Verdana
</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p><code><font>...</font></code> definieren Sie einen Bereich für Schriftformatierung. Das Element darf selber nur <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#inline_elemente"><b>Inline-Elemente</b></a> enthalten, keine <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#block_elemente"><b>Block-Elemente</b></a>. Wenn Sie also beispielsweise Textabsätze damit auszeichnen wollen, müssen Sie das <code>font</code>-Element jedesmal innerhalb von <code><p>...</p></code> notieren. Die Browser sehen es zwar nicht so eng, wenn Sie es schlampiger verwenden, aber dann ist es nicht mehr HTML-konform.</p>
<p>Durch Attribute im einleitenden <code><font></code>-Tag können Sie Schrift formatieren.</p>
<p><code>size=</code> bestimmt die Schriftgröße (<i>font size = Schriftgröße</i>). Sie können den Wert in Zahlen zwischen <code>1</code> und <code>7</code> angeben, oder relativ im Verhältnis zur Normalschriftgröße mit <code>+Zahl</code> bzw. <code>-Zahl</code>. Die Normalschriftgröße ist <code>3</code>. Mit <code></font></code> beenden Sie den Abschnitt mit anderer Schriftgröße. Bei den Angaben zu <code><font size=...></code> handelt es sich um relative Werte. Wenn der Anwender eine 12-Punkt-Schrift eingestellt hat, hat beispielsweise <code><font size=5></code> eine andere Wirkung, als wenn der Anwender eine 9-Punkt-Schrift eingestellt hat. Die Schriftgröße, die Sie mit <code><font size=...></code> bestimmen können, ist auch relativ zu der Schriftgröße des Absatztyps.</p>
<p><code><font color=...></code> bestimmt die Schriftfarbe (<i>font color = Schriftfarbe</i>). Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/farben.htm"><b>Farbangabe</b></a>.</p>
<p><code><font face=...></code> bestimmt die Schriftart (<i>font face = Schriftart</i>). Als Wert können Sie die Namen einer oder mehrerer Schriftarten zuweisen. Wenn Sie mehrere Schriftarten angeben, trennen Sie die Schriftartnamen durch Kommata. Bei mehreren angegebenen Schriftarten versucht der WWW-Browser zuerst, den Text in der ersten angegebenen Schriftart darzustellen (im Beispiel in <code>Avalon</code>). Wenn diese Schrift beim Anwender nicht installiert ist, wird versucht, die zweite angegebene Schrift (im Beispiel <code>Wide Latin</code>) zu nehmen. Wenn keine der angegebenen Schriftarten beim Anwender darstellbar ist, bleibt die Angabe wirkungslos, d.h. der Text wird in der vom Anwender eingestellten Schrift angezeigt. Verwenden Sie exakte Schriftartnamen. Unter MS-Windows können Sie eingestellte Schriftarten und ihre genauen Namen beispielsweise über die Systemsteuerung ermitteln.</p>
<p>Das zweite Element zur Schriftformatierung ist das <code>basefont</code>-Element. Es ist ein alleinstehendes Tag und bewirkt, dass die darin definierten Formatierungen für alle weiteren Elemente in der Datei gelten, solange, bis ein neues <code>basefont</code>-Element notiert ist, oder bis zum Ende des Dokuments. Attribute und Werte sind die gleichen wie beim <code>font</code>-Element.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Das <code>font</code>-Element ist HTML 3.2, <code>basefont</code> dagegen HTML 4.0</p>
<p>Im einleitenden <code><font></code>-Tag können Sie ebenso wie im <code><basefont></code>-Tag mehrere Attribute notieren, also <code>size=</code>, <code>color=</code> und <code>face=</code> mischen.</p>
<p>Netscape 4.x interpretiert <code><basefont color=></code> und <code><basefont face=></code> nicht.</p>
<p>Wenn Sie <b>XHTML-konform</b> arbeiten, müssen Sie das <code>basefont</code>-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <code><basefont size="2" /></code>.<br>
Weitere Informationen dazu im Kapitel <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../xhtml/index.htm"><b>XHTML und HTML</b></a>.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> 
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/netsc4.gif" width="30" height="30" border="0" alt="Netscape4.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MS IE3.0"> <a class="an" name="css_entsprechungen">CSS-Entsprechungen</a></h2>
<p>Mit <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/index.htm"><b>CSS Stylesheets</b></a> können Sie alle Block- und Inline-Elemente nach Wunsch formatieren. Bei Verwendung von CSS Stylesheets müssen Sie zunächst wissen, wie man <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/formate/index.htm"><b>CSS-Formate definieren</b></a> kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang die CSS-Eigenschaften: zur <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/schrift.htm"><b>Schriftformatierung</b></a>.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/font_style.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Schriftart, Schriftg&ouml;&szlig;e und Schriftfarbe - CSS-Entsprechungen</title>
</head>
<body>
<p>
<span style="font-size:250%">Ziemlich riesiger Text</span><br>
<span style="font-size:50%">Ziemlich winziger Text</span><br>
<span style="font-size:1.2em">Text etwas gr&ouml;&szlig;er als normal</span><br>
<span style="font-size:0.8em">Text deutlich kleiner als normal</span>
</p>
<p>
<span style="color:#FF0000">Knallroter Text</span><br>
<span style="color:#00C000">Gr&uuml;ner Text</span><br>
<span style="color:#0000FF">Blauer Text</span>
</p>
<p>
<span style="font-family:Avalon,Wide Latin">Das ist Text in Schriftart Avalon,
oder, falls Avalon nicht darstellbar, in Wide Latin</span>
</p>
<div style="font-size:70%; color:#CC00CC; font-family:Verdana">
<h2>Da komme was wolle</h2>
<p>
Alles kleiner als normal, lila und in Schriftart Verdana
</p>
</div>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Das Beispiel bewirkt in etwa die gleiche Ausgabe wie das Beispiel zuvor, jedoch ohne die Elemente <code>font</code> und <code>basefont</code>. Für die CSS-Schriftformatierungen innerhalb der Textabsätze wird das <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="bereiche.htm#inline"><b>allgemeine Inline-Element</b></a> <code>span</code> eingesetzt. Anstelle des alleinstehenden <code><basefont></code>-Tags wird der restliche Abschnitt in ein <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="bereiche.htm#block"><b>allgemeine Block-Element</b></a> <code>div</code> eingeschlossen, das die CSS-Formatierungen zugewiesen bekommt.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> 
</td></tr></table>
<h2 class="Sh2"><a class="an" name="weitere_infos">Weitere Informationen</a></h2>
<p>In der <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../referenz/index.htm"><b>HTML-Referenz</b></a> finden Sie genaue Angaben darüber, wo die hier beschriebenen Elemente vorkommen dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#font"><b>Element-Referenz</b></a> für das <code>font</code>-Element<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#font"><b>Attribut-Referenz</b></a> für das <code>font</code>-Element<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#basefont"><b>Element-Referenz</b></a> für das <code>basefont</code>-Element<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#basefont"><b>Attribut-Referenz</b></a> für das <code>basefont</code>-Element</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="proprietaer.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="proprietaer.htm"><b>Ältere browser-proprietäre Elemente</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="trennlinien.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="trennlinien.htm"><b>Trennlinien</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </td></tr>
</table><table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHTML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Elemente zur Textstrukturierung</b></a></td>
</tr>
</table>
<p>© 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
