Symbolskrifter som grafik

I denne artikel vender jeg kasketten og demonstrerer, hvornår og hvordan du med fordel og på en nem måde kan lave grafik ud af skrift.

Det drejer om symbolskrifter. Dem har du en del af installeret på din computer. På min computer, som jeg har installeret for forholdsvis nylig med Windows 2000 og Internet Explorer 6 har jeg alene med disse programmer fået rådighed over følgende symbolskrifter:

Klikker du på et skriftnavn, indlæser du en side, der viser alle de symboler, der er i hver af disse fonts. Længere nede i denne artikel fortæller jeg, hvordan du let laver tilsvarende oversigter over de symbolskrifter, der er installeret på din computer.

Overførbare symboler

Lad os nu sætte, at jeg vil lave noget om rejser, og derfor ønsker at bruge symboler for tog, bus og skib fra symbolskriften Webdings. Disse symboler ser du herunder, hvis du ellers har Webdings installeret som skrift på din computer (hvis ikke, vil du se bogstaverne t, v og T):

t v T

Men jeg kan jo ikke regne med, at alle mine brugere har denne font installeret.

5. juni 2006: Mens jeg gennemskriver denne artikel opdager jeg, at Firefox 1.5 og Opera 8 ikke vil vise dise tegn, mens Internet Explorer, Mozilla 1 og Netscape 6 kan. ???

Det mærkelige er, at Firefox udmærket kan vise de pågældende figurer, når jeg indlæser siden Webdings.

26. juni 2006: Mysteriet var ikke så stort: Firefox vil vise siden Webdings med alle de rigtige symboler. Men kun, hvis man bruger en ikke-standardsættende dokumenttypeerklæring og udelader tegnsætreferencen.

Så meget des mere har du brug for den grafisk løsning, jeg skitserer nedenfor.

Det problem kan jeg løse på to måder, enten ved at lave en fontdefinitionsfil, der omfatter disse symboler, eller ved at lave grafikker ud af dem.

En fontdefinitionsfil med disse symboler alene (du kan i det WEFT-program, der er omtalt på websiden Overførbare skrifter vælge kun at lade fontdefinitionsfilen omfatte et mindre antal tegn) har en tyngde på ca. 8 kilobyte.

For god ordens skyld viser jeg herunder resutatet af denne øvelse:

t v T

Bemærk, at her vil kun Internet Explorer vise symbolerne, mens alle andre browsere vil vise bogstaverne t, v og T, som faktisk svarer til det, jeg har skrevet:

<p class="speciel">t v T</p>

Og igen, for en ordens skyld, stylesheet'et:

@font-face {
    font-family: symboler;
    font-style:  normal;
    font-weight: normal;
    src: url(webdings.eot);
}
p.speciel {
    font-family:symboler;
    font-size:36px;
    color:#036;
}

Mit problem er nu, at jeg kan vælge at at bruge overførbare fonts, og lade fem være lige for de brugere, hvis browsere ikke understøtter denne teknologi; eller jeg kan vælge at speficere den aktuelle symbolfont i mit stylesheet (.dings {font-family: webdings; font-size: 36px; color: maroon;}, og dermed lade fem være lige for de brugere, der ikke har webdings installeret.

Dilemmaet bliver til at føle på, hvis du vælger en symbolskrift, der er meget mindre udbredt end webdings. Hvis du f.eks. ser på linien herunder, taler sandsynligheden for, at du ser en række bogstaver i standard brødskriften:

A B C D F K

Jeg ser en række symboler på sportsgrene, fordi jeg har installeret en font, der hedder Signs, og som netop indeholder forskellige slags symboler og pictogrammer.

Symboler som grafik

Jeg kunne godt lave en overførbar skrift og anvende denne. Men så lader jeg jo et forholdsvis stort mindretal i stikken (procenterne er muligvis små, men tænk på at stort set alle AOL-kunder stort set er henvist til AOL-browseren, der er en afart af Netscape 6. Samt at Apple nu lancerer deres nye Safari-browser som en afløser for Internet Explorer.)

Så i tilfælde som dette, hvor jeg har et antal tegn fra en symbolskrift, jeg ønsker at anvende på min website, betænker jeg mig ikke meget på at lave dem som små grafikker. Det er relativt let, som jeg også har beskrevet det i min gamle artikel om dette, Nem grafik til websider (PDF-fil). For en ordens skyld resumerer jeg her fremgangsmåden:

  1. Fyr op under dit grafikprogram. Det er stort set ligegyldigt, hvilken et, du bruger. Jeg er selv tilhænger af det billige og til webgrafik meget gode Paintshop Pro program.
  2. Opret en ny grafik, f.eks. 300 * 300 pixel
  3. Giv denne grafik den baggrundsfarve, dine symboler skal vises på.
  4. Vælg den forgrundsfarve, de færdige grafikker skal have.
  5. Vælg dit tekstværktøj
  6. I den funktion, hvor du vælger skrifttype, vælger du den symbolskrift, du skal bruge, samt en passende størrelse.
  7. Og så taster du i dialog-boksen de bogstaver, der svarer til de tegn, du vil lave grafik af.
  8. Nu har du en serie småbilleder i grafikprogrammet, som du kan beskære og gemme som gif-filer.

Det er på denne måde, jeg har lavet de sportssymboler, de samme som dem, du ikke kan se herover.

sportssymboler

Inden du går helt overbord skal du betænke, at dine websider aldrig må indeholde noget information, der er afhængigt af at en browser kan vise grafikken. Brugen af alt-tekster og title-attributten er absolut påkrævet, når du bruger grafisk elementer til for eksempel menuer eller som links i bred almindelighed.

Fonts Management

Det kan godt være, det er banalt, men jeg vil alligevel fortælle lidt om, hvordan du bedst finder ud af, hvilke fonts, der indeholder hvad, og hvad du skal taste i tekstboksen i dit grafikprogram:

En god hjælp er Windows' "Character Map" (Tegnoversigt) i Tilbehørskassen. Men jeg har nu fundet et program, der er meget bedre. Det er Mike Gibbards "Characteristica", som kan downloades fra bl.a. www.simtel.net/pub/pd/34573.html.

Characteristica er et freeware program, der giver et fortrinlig - og ikke mindst lettere læst, på grund af tegnenes størrelse - overblik over indholdet af en given skrift. Ligesom i Windows' tegnoversigt ser du også det givne tegns hex- og ascii-kode, når det er markeret. Du kan også udskrive komplette oversigter over hver fonts indhold som HTML-sider. Det er den måde, jeg har lavet de oversigtssider, der er nævnt i listen i artiklens begyndelse.

Og nu skriver jeg igen noget, som de fleste af mine læsere godt ved i forvejen: Hvis du skal skrive et tegn, som du ikke kan se på tastaturet, holder du Alt-tasten nede og taster på det numeriske tastatur (med NumLock-tatsen slået til) tegnets ascii-kode, som du har noteret dig fra Charcteristica eller Windows' Character Map.

Et andet fortrinligt værktøj er Stonewares Fontviewer, der kan downloades fra Stoneware.

Begge de nævnte værktøjer er freeware programmer.

Flere fontsbiblioteker

Siden jeg skrev de første 4 artikler om skrifter på websider i slutningen af februar, har jeg gennemgået nogle ældre notater om samme sag. Der har jeg fundet nogle yderligere links til fonts-ressourcer på nettet:

http://www.fonts.dk
Et dansk websted med en god del fonts.
www.sil.org/computing/fonts/
Fonts in Cyberspace: A guide to finding language fonts on the Internet. Containing more than 452 sources for 107 languages.
www.1archive.com/
Et kæmpebliotek af skrifter, stor set alle freeware under en eller anden form.
cgm.cs.mcgill.ca/~luc/fonts.html
Font Pages: Liste over font sites og mange artikler om fonts teknologi
http://www.fontworld.com/index2.html
Fontworld - stort udbud af kommercielle fonts, en del shareware fonts.
1 2 3 4 5

Denne side er senest opdateret: 19. November, 2008