PLUG|ONE: Fonts mit CSS erstellen

Fonts mit CSS erstellen

Was ist mit CSS heutzutage eigentlich alles möglich??
Ziel ist es, eine Schrift nur mit Hilfe von CSS zu erstellen...

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

*zwinker*

<< zurück zur Übersicht

Diese Seite drucken