Neue Schriftarten braucht das Land!

Wer hier auf­merk­sam mit­liest, dem ist es schon auf­ge­fal­len: Ich suche in der letz­ten Zeit ver­stärkt nach Mög­lich­kei­ten um von den übli­chen, „web­si­che­ren“ Schrif­ten weg­zu­kom­men. Ein wenig habe ich mich schon an den Stan­dard­schrif­ten satt­ge­se­hen. Außer­dem ist im eher „verschnörkelt-verspielten“ Bereich da rela­tiv wenig zu machen. Wenn man nicht gerade ComicSans ein­set­zen möchte.

Grund­sätz­lich ist es ja erst ein­mal so, dass die Schrift­art die ein Brow­ser dar­stel­len soll auch auf dem Com­pu­ter des Sei­ten­be­su­chers vor­han­den sein muss. Es bringt mir also nichts, TotalCooleSchrift.ttf auf mei­ner Seite zu benut­zen, wenn außer mir die­ses Schrift nie­mand besitzt. Das klingt nach einem Problem!

Natür­lich bin ich nicht der ein­zige, der sich mit die­sem Thema aus­ein­an­der­setzt und so haben sich schon einige kluge Men­schen ein paar Gedan­ken um das Thema gemacht. Nach­dem ich nun auch ein wenig recher­chiert habe, sind mir grund­sätz­lich zwei Metho­den in Erin­ne­rung geblieben.

  • sIFR: Der aus­zu­ge­bende Text wird mit Hilfe von Java­script dyna­misch in Flash geren­dert. Das nennt sich dann sIFR.
    Hier liegt der zu ver­wen­dende Schrift­satz als Flash-Datei auf dem Ser­ver und mit ein wenig Javascript-Magie wer­den dann vor­her bestimmte HTML-Elemente durch Flash-Elemente ersetzt. Sehr cool dabei: Der Text ist auch wei­ter­hin mar­kier­bar und lässt sich auch kopie­ren. Wird Flash vom Brow­ser nicht dar­ge­stellt, etwa weil das Plu­gin nicht instal­liert ist, ren­dert der Brow­ser den nor­ma­len HTML-Tag. Das klingt doch alles schon mal ganz gut.
    Ein Nach­teil in mei­nen Augen ist aber die Benut­zung von Flash. Gerade auf dem Mac ist das Plu­gin nicht gerade aus­ge­reift und ver­ur­sacht teil­weise eine enorme Pro­zes­sor­last. Ein wenig fri­cke­lig war bei mei­nen ers­ten Ver­su­chen das anschlie­ßende jus­tie­ren von Größe und Abstän­den des Tex­tes mit CSS. Hier gilt es sich gege­be­nen­falls mal einzuarbeiten.
  • @font-face: Auch per CSS gibt es eine Mög­lich­keit, eigene Schrif­ten in eine Web­seite ein­zu­bin­den. Kurio­ser­weise wurde diese Methode übri­gens ursprüng­lich von Micro­soft ent­wi­ckelt, war Bestand­teil von CSS 2 und flog dann wie­der aus den CSS 2.1-Spezifikationen, weil die Brow­ser­ent­wick­ler sie nicht imple­men­tier­ten. Mit CSS 3 kommt @font-face nun wie­der. Die­ses Mal zie­hen anschei­nend auch alle mit.
    Bei die­ser Methode muss die ent­spre­chende Schrift­art in ver­schie­de­nen Vari­an­ten auf dem Web­ser­ver bereit­ste­hen. Natür­lich hat man sich wie­der ein­mal nicht auf einen 100%igen Stan­dard eini­gen kön­nen. Gro­ßer Vor­teil: Es wer­den keine wei­te­ren Tech­no­lo­gien ver­wen­det, HTML und CSS setzt man so oder so ein, wie auch schon bei der sIFR-Variante lässt sich hier der Text natür­lich auch kopie­ren.
    Bei ers­ten Tests hat das Ein­bin­den der Schrift­ar­ten lei­der nicht immer 100%ig funk­tio­niert. Schade.

Das Erset­zen von Schrift durch Bil­der (auch dyna­misch, z.B. per GDlib) kommt für mich nicht in Frage. Die Lösun­gen über die ich hier bis­her stol­perte waren alle wesent­lich kom­pli­zier­ter und auf­wän­di­ger als die oben genann­ten, das Ergeb­nis dafür aber eher nicht so schön.

Soweit zu den bei­den Mög­lich­kei­ten, die ich mir noch näher anschauen muss. Beide Vari­an­ten sehen sehr viel­ver­spre­chend aus, ich glaube dass ich für meine Zwe­cke schon was fin­den werde. Spaß am Bas­teln hatte ich ja schon immer, in der nächs­ten Zeit werde ich mich mit dem Thema noch ein wenig aus­führ­li­cher aus­ein­an­der­set­zen und die für mich beste Methode herausfinden.

7 Kommentare bisher

Schreibe einen Kommentar oder kontaktiere mich bei Twitter unter @schneyra.

  1. David

    Also per Flash, das wäre nichts für mich. :)
    CSS ist da mE. eine deut­lich bes­sere Lösung, so von wegen offene Stan­dards und so, ne?

  2. Ich würde auch eine Imple­men­tie­rung per CSS bevor­zu­gen. Das ist ja mehr meine Welt. Am Ende geht es dann aber drum, wel­che Lösung für mich bes­ser funk­tio­niert. Die sIFR-Lösung habe ich schon mal ange­fan­gen, das war gar nicht so schwer. Die @font-face-Geschichte muss ich noch aus­führ­li­cher testen.

  3. Wir sind mitt­ler­weile von sIFr auf Cufón umge­stie­gen. Dabei wer­den die Schrif­ten als Javascript-Datei gespei­chert und dann als canvas-Element wie­der ausgegeben.

    (ui die schrift­größe in der textarea hier ist ja ver­bo­ten klein)

  4. soo­phie: Danke für den Tipp! Die Mög­lich­keit ist mir bis­her noch nicht unter­ge­kom­men, ich werde mir das auch mal noch anschauen.

  5. Oh, und die Sache mit der Schrift­art: Danke auch hier für den Hin­weis! Ich werde „textarea-Styling che­cken“ mal auf meine Liste auf­neh­men.
    font-family: inherit; ist bereits zur Ret­tung erschienen!

  6. Cufon hab‘ ich bei mir auch im Ein­satz. Es hat den Vor­teil, dass die Kan­ten­glät­tung auf allen Sys­te­men und allen Brow­sern gut aus­sieht. Das ist bei @font-face, Typekit und der Google Font-API nicht so.

    Nach­teile hat Cufon aber auch: Text lässt sich nicht mar­kie­ren und wenn es als Link ver­wen­det wird, ändert sich die Farbe trotz Hover-Kennzeichnung im CSS nicht (kann man bei mir an den Head­lines erken­nen). Aber sonst ist das Ding echt genial.

  7. Ohne selbst mit Cufon gear­bei­tet zu haben, scheint mir @font-face bis­her die kom­for­ta­belste Mög­lich­keit (für mich) zu sein. Wenn man so sprung­haft ist wie ich, muss ein­fach alles per CSS regel­bar sein. ;-)

Ein Pingback

  1. sIFR leicht gemacht » der tag und ich

Schreibe einen Kommentar