Overførbare skrifter

Der findes en teknologi til at sikre, at læseren af en webside ser en bestemt skrift, også selv om denne skrift ikke er installeret på læserens computer.

Fortsætter jeg med eksemplet fra foregående side – en tekst, der oprindeligt og helt unødvendigt var lavet som en grafik – kan vi forestille os, at kunden har en meget speciel skrift, som hun insisterer på at anvende. Eksemplet herunder simulerer et sådant ønske:

Every thing fills a place. Every problem inspires to a solution.

Every solution from Xxxxxx Xxxxxxxxx is conceived and designed by recognized Danish Designers, who do not always follow the beaten track but readily find a new one.

Every object in the collection is unique - applied art created for daily delight. New collectors can start here.

Bemærk at kun Internet Explorer viser ovennævnte tekst med den skrifttype,der er nævnt nedenfor. Andre browsere viser skriften med 1.4em times kursiv.

Den anvendte skrift er næppe tilgængelig på mange computere. Skriften hedder "Ribbon 131 BT" og er til formålet hentet fra skriftsamlingen på en CorelDraw 8 installations-CD. Sandsynligheden taler for, at du ser tekststykket i en 1.4 em høj times, hvis du bruger en anden browser end Internet Explorer.

Det er en smal sag at definere en sådan skrift i stylesheet formdeklarationen for tekstafsnittet herover. Det er fint nok til glæde for mig, men ikke for så vildt mange andre, der ikke har den skrift installeret på deres computer.

Kun i Internet Explorer

Men jeg har sørget for, at du kan se skriften i Internet Explorer ved at anvende en overførbar skrift (Embeddable Font) – altså et skriftobjekt, som downloades sammen med websiden og sørger for, at klienten – din browser – kan se den skrift, jeg har tænkt mig. Også selvom den overhovedet ikke er installeret på din computer. Det stylesheet, der sørger for dette, ser således ud:

<!--[if IE]>
  <style type="text/css" media="screen">
    @font-face {
    font-family:myfont;
    font-style:  normal;
    font-weight: normal;
    src: url(ribbon01.eot); }
    
    .eksempel p{
    font-family:myfont,times,serif;
    font-size:2em;
    line-height:100%;
    margin:12px;  }
  </style>
<![endif]-->

Her er forklaringen:

  1. Hele stylesheet'et er omklamret af Microsofts betingede kommentar. Det er et markørsæt, der sørger for, at kun Internet Explorer overhovedet læser markørens indhold. (Læs eventuelt mere herom på websiden Microsofts betingede kommentarer).
  2. Indholdet af denne kommentar er en style-markør med to formdeklarationer.
  3. Den nederste af disse er et godt sted at starte på den forklaring, der kommer her:
  4. Bemærk værdien af font-family: Der er anført en skrift, der hedder myfont.
  5. Som 2. valg er angivet serif. serif er en af de fem skriftarter (Generic Fonts), der altid skal angives i slutningen af en font-liste for at fortælle browseren, hvad den skal bruge, hvis ingen af de i øvrigt specificerede skrifter kan findes på klientens computer.
  6. Det, der er interessant her, er selvfølgelig skriften myfont. Den findes heller ikke på din computer. Det, der derimod findes på din computer, i og med at du har downloadet siden, er en definition af, hvad myfont er for en størrelse.
  7. Denne definition finder du i den øverste formdeklaration. @font-face er en lidt usædvanlig selektor, som jeg hår måttet helt til kilden (W3C's CSS-2 specifikation) for at finde en beskrivelse af. Det, som @font-face gør, er, at denne selektor importerer indholdet af den specificerede font, her myfont, fra en fontdefinitionsfil, her ribbon01.eot.

W3C's specifikation er lidet meddelsom omkring indhold og format på en sådan fontdefintionsfil. Det har softwareindustrien – herunder browserfabrikanterne – imidlertid interesseret sig for. Ud af dette er rundet et par skriftkoncepter, som er hhv. True Doc og Open Doc. Til vore formål er kun Open Doc-konceptet interessant, for det er det eneste, der nu understøttes af browserne, og da kun af Internet Explorer 4+. Netscape 4 understøttede True Doc-formatet og dermed overførbare fonts, men nyere versioner af Netscape (og dermed Mozilla, Firefox og andre Gecko-baserede browsere) har fuldstændig skrottet enhver understøttelse af overførbare skrifter. Konsekvenserne af dette beskriver jeg på næste side.

Microsofts Web Font Tool (WEFT)

Microsoft har understøttet Open Doc formatet på forskellige måde i mange år, herunder overførbare skrifter, siden Internet Explorer 4. I adskillige år har Microsoft tillige publiceret et program, der gør det muligt at lave de fontdefinitionsfiler (kaldet font objects), der kan importeres ved hjælp af @font-face-selektoren.

WEFT-programmet kan downloades fra msdn.microsoft.com/typography. Ved hjælp af dette program kan du lave den eot-fil, du ser i @font-face-definitionen i eksemplet her på siden.

Microsoft har en guide til denne teknologi, se About Font Embedding.

Bemærk, at WEFT-programmet ikke på alle punkter er intuitivt. (I hvert fald for denne artikels forfatter). Det er derfor vigtigt at gennemlæse denne guide.

Hermed har du redskaberne til selv at sørge for, at læserne af dine websider, hvis de bruger Internet Explorer, kan se dine sider i nøjagtig den udformning – inklusive skriften – du har tænkt dig.

Der er et par andre forhold, det er nødvendigt at overveje, før du kaster dig ud i dette eventyr. På næste side fortæller jeg lidt om, hvordan du tackler browsere, der ikke er af Microsoft-familien.

1 2 3 4 5

Denne side er senest opdateret: 19. November, 2008