Zunächst einmal
der Code:
Stylesheet (head)
<style type="text/css">
.outer {
display:block;
width:5px;
height:10px;
float:left;
margin:1px;
background:transparent;
}
*html .outer {
height:12px;
height:10px;
}
.outer div {
display:block;
overflow:hidden;
height:2px;
}
* html .outer div {
float:left;
}
.la, .lz {
width:5px;
}
.lb, .lc, .ld, .lg, .ll, .ln, .lq, .lt {
width:1px;
}
.lh, .lm, .lo, .ls {
width:2px;
}
.li, .lk, .lr, .lp, lj {
width:3px;
}
.le, .lf {
width:4px;
}
.la, .lr, .lt {
background:#000;
}
.lz {
background:transparent;
}
.lh {
margin-right:1px;
}
.ld, .lf, .lh, .lk, .li, .lm, .lo, .lp, .lq {
border-right:1px solid #000;
}
.ld, .le, .li, .lm, .ls {
border-left:1px solid #000;
}
.lc {
border-right:4px solid #000;
background:#ccc;
}
.lb {
border-left:4px solid #000;
background:#ccc;
}
.lg, .ln, .ls {
border-right:2px solid #000;
}
.lj {
border-right:1px solid #ccc;
border-left:1px solid #ccc;
background:#000;
}
.ll, .ln, .lo {
border-left:2px solid #000;
}
.clr {
clear:left;
height:1em;
}
</style>
Seiteninhalt (body)
<div class="outer" title="0">
<div class="lc"></div>
<div class="ls"></div>
<div class="li">
<div class="lq"></div>
</div>
<div class="lo"></div>
<div class="lb"></div>
</div>
<div class="outer" title="1">
<div class="lg"></div>
<div class="lh"></div>
<div class="lh"></div>
<div class="lh"></div>
<div class="lj"></div>
</div>
<div class="outer" title="2">
<div class="lb"></div>
<div class="lf"></div>
<div class="lj"></div>
<div class="le"></div>
<div class="la"></div>
</div>
<div class="outer" title="3">
<div class="lb"></div>
<div class="lf"></div>
<div class="lb"></div>
<div class="lf"></div>
<div class="lb"></div>
</div>
<div class="outer" title="4">
<div class="ld"></div>
<div class="ld"></div>
<div class="la"></div>
<div class="lh"></div>
<div class="lh"></div>
</div>
<div class="outer" title="5">
<div class="la"></div>
<div class="le"></div>
<div class="lb"></div>
<div class="lf"></div>
<div class="lb"></div>
</div>
<div class="outer" title="6">
<div class="lj"></div>
<div class="le"></div>
<div class="lb"></div>
<div class="li"></div>
<div class="lj"></div>
</div>
<div class="outer" title="7">
<div class="la"></div>
<div class="lk"></div>
<div class="lh"></div>
<div class="lh"></div>
<div class="lh"></div>
</div>
<div class="outer" title="8">
<div class="lj"></div>
<div class="li"></div>
<div class="lj"></div>
<div class="li"></div>
<div class="lj"></div>
</div>
<div class="outer" title="9">
<div class="lj"></div>
<div class="li"></div>
<div class="lc"></div>
<div class="lf"></div>
<div class="lj"></div>
</div>
<div class="clr"></div>
<div class="outer" title="A">
<div class="lj"></div>
<div class="li"></div>
<div class="la"></div>
<div class="li"></div>
<div class="li"></div>
</div>
<div class="outer" title="B">
<div class="lb"></div>
<div class="li"></div>
<div class="lb"></div>
<div class="li"></div>
<div class="lb"></div>
</div>
<div class="outer" title="C">
<div class="lj"></div>
<div class="li"></div>
<div class="le"></div>
<div class="li"></div>
<div class="lj"></div>
</div>
<div class="outer" title="D">
<div class="lb"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="lb"></div>
</div>
<div class="outer" title="E">
<div class="la"></div>
<div class="le"></div>
<div class="lb"></div>
<div class="le"></div>
</div>
<div class="outer" title="F">
<div class="la"></div>
<div class="le"></div>
<div class="lb"></div>
<div class="le"></div>
<div class="le"></div>
</div>
<div class="outer" title="G">
<div class="lc"></div>
<div class="le"></div>
<div class="li"></div>
<div class="li"></div>
<div class="lc"></div>
</div>
<div class="outer" title="H">
<div class="li"></div>
<div class="li"></div>
<div class="la"></div>
<div class="li"></div>
<div class="li"></div>
</div>
<div class="outer" title="I">
<div class="lj"></div>
<div class="lh"></div>
<div class="lh"></div>
<div class="lh"></div>
<div class="lj"></div>
</div>
<div class="outer" title="J">
<div class="lj"></div>
<div class="lh"></div>
<div class="lh"></div>
<div class="lh"></div>
<div class="ll"></div>
</div>
<div class="outer" title="K">
<div class="li"></div>
<div class="lm"></div>
<div class="lr"></div>
<div class="lm"></div>
<div class="li"></div>
</div>
<div class="outer" title="L">
<div class="le"></div>
<div class="le"></div>
<div class="le"></div>
<div class="le"></div>
<div class="la"></div>
</div>
<div class="outer" title="M">
<div class="li"></div>
<div class="ln"></div>
<div class="li">
<div class="lq"></div>
</div>
<div class="li"></div>
<div class="li"></div>
</div>
<div class="outer" title="N">
<div class="li"></div>
<div class="lo"></div>
<div class="li">
<div class="lq"></div>
</div>
<div class="ls"></div>
<div class="li"></div>
</div>
<div class="outer" title="O">
<div class="lj"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="lj"></div>
</div>
<div class="outer" title="P">
<div class="lb"></div>
<div class="li"></div>
<div class="lb"></div>
<div class="le"></div>
<div class="le"></div>
</div>
<div class="outer" title="Q">
<div class="lj"></div>
<div class="li"></div>
<div class="li">
<div class="lq"></div>
</div>
<div class="lm"></div>
<div class="lc"></div>
</div>
<div class="outer" title="R">
<div class="lb"></div>
<div class="li"></div>
<div class="lb"></div>
<div class="li"></div>
<div class="li"></div>
</div>
<div class="outer" title="S">
<div class="lc"></div>
<div class="le"></div>
<div class="lj"></div>
<div class="lf"></div>
<div class="lb"></div>
</div>
<div class="outer" title="T">
<div class="la"></div>
<div class="lh"></div>
<div class="lh"></div>
<div class="lh"></div>
<div class="lh"></div>
</div>
<div class="outer" title="U">
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="lj"></div>
</div>
<div class="outer" title="V">
<div class="li"></div>
<div class="li"></div>
<div class="li"></div>
<div class="lj"></div>
<div class="lh"></div>
</div>
<div class="outer" title="W">
<div class="li"></div>
<div class="li"></div>
<div class="li">
<div class="lq"></div>
</div>
<div class="ln"></div>
<div class="li"></div>
</div>
<div class="outer" title="X">
<div class="li"></div>
<div class="li"></div>
<div class="lj"></div>
<div class="li"></div>
<div class="li"></div>
</div>
<div class="outer" title="Y">
<div class="li"></div>
<div class="li"></div>
<div class="lj"></div>
<div class="lh"></div>
<div class="lh"></div>
</div>
<div class="outer" title="Z">
<div class="la"></div>
<div class="lp"></div>
<div class="lh"></div>
<div class="lq"></div>
<div class="la"></div>
</div>
<div class="outer" title="at">
<div class="lj"></div>
<div class="li"></div>
<div class="ls">
<div class="lq"></div>
</div>
<div class="li">
<div class="lq"></div>
</div>
<div class="lj"></div>
</div>
<div class="outer" title="dot">
<div class="lz"></div>
<div class="lz"></div>
<div class="lz"></div>
<div class="lg"></div>
<div class="lg"></div>
</div>
<div class="clr"></div>
Das Ergebnis kann man sich
hier anschauen.
Dies zeigt, dass wir nicht immer mit einem Bild arbeiten müssen, um eine Schrift darzustellen.
Es ist jedoch zu hinterfragen, was schneller vom Browser geladen bzw. geparsed ist - das Bild, oder unsere CSS-Schrift...
Getestet wurde das Ganze
fehlerfrei unter WinXP mit dem IE5.01, IE5.5, IE6, Mozilla/Firefox, NN7 und Opera.
Ganz wichtig:
Im Header der Datei muss folgende Angabe stehen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Viel Spaß beim Schriften erstellen