Substituering af skrifter

Bruger du overførbare skrifter, er det særligt interessant, hvad der sker i browsere, der ikke kan vise den overførte skrift.

Jeg holder fast i mit eksempel fra de foregående sider for at udforske, hvad der sker i en browser, der ikke kan vise den overførte skrift. Eksemplet herunder er baseret på mit stylesheet fra før:

  .eksempel p{
    font-family:times,serif;
    font-size:1.4em;
    font-style:italic;
    line-height:100%;
    margin:12px;  }

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

Every solution from Xxxxxx Xxxxxx 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.

Browsernes evne til at substituere en skrift, der ligger lidt uden for de sædvanlige serif og sans-serif skriftarter, lader en del tilbage at ønske. For at sige det ligeud – hverken Internet Explorer eller Firefox kan finde en skrift, der matcher artsbetegnelserne cursive eller fantasy, så skriftbilledet bare minder en lille smule om det tilsigtede.

Nu kan man lade fem være lige og erkende, at Internet Explorer familien udgør 70 procent af alle browsere, der er i anvendelse i dag. Dette tal er dog faldende, efterhånden som publikum får øjnene op for, at der findes browsere, der også set fra et brugersynspunkt er væsentligt bedre end IE.

Jeg vil dog alligevel her beskrive, hvordan du ordner det, så andre browsere også ser et skriftbillede, der ligner det vi ønsker.

Øvelsen går meget enkelt ud på at indlæse et stylesheet for alle browsere, og dernæst et stylesheet, som kun Internet Explorer læser.

Det sker ved at indsætte et stylesheet på siden indlejret i Microsofts betingede kommentarer:

<style type="text/css" media="screen">
.eksempel2 p{
  font-family:times,serif;
  font-size:1.4em;
  font-style:italic;
  line-height:100%;
  margin:12px;  }
</style>
<!--[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]-->

Alle browsere læser det øverste stylesheet, men kun Internet Explorer læser det nederste. Du kan læse mere om denne måde at markere html på i artiklen Microsoft betingede kommentarer.

Dette viser følgende skriftbillede:

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

Every solution from Xxxxxx Xxxxxx 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 alle browsere viser ovennævnte tekst med 1.4em times kursiv. Formdeklarationen for dette afsnit inkluderer ikke en reference til skriften myfont.

Kunden vil nok synes, det er lidt kedeligt, men må trøste sig med at det brede publikum i overvejende grad bruger den browser, der viser dette tekstafsnit som det er tænkt, nemlig med den specielle skrift der er ønsket.

Skriftsubstituering

Når du skal substituere en skrift, som du formoder ikke forekommer på dine læseres computer, er udvalget af skrifter til at overskue, hvis du vil vælge en, du vil være sikker på.

Af serif skrifter er der faktisk kun et par stykker, der kan komme på tale, nemlig times og georgia. (Jf. den fortræffelige oversigt på www.codestyle.org).

Jeg har i ovenstående eksempel valgt times, og sat en skriftstørrelse, der gør at tekststykket fylder nogenlunde det samme på siden.

font-size-adjust

For at skabe et mere rigtigt indtryk af den substituerede skrift, burde jeg kunne brug font-size-adjust egenskaben.

font-size-adjust er en egenskab, der tillader os at give en skrift en anden aspect ratio end skriften egentlig har. Aspect ratio er forholdet mellem den virkelige ex-højde og em-højden af en skrift, eller i måske mere klart sprog, forholdet mellem et lille x og et stort X.

Dette forhold har stor betydning ved små skrifstørrelser. Nedenstående to tekstafsnit er med henholdsvis verdana og times, begge i en 12 pixel skrift:

Every thing fills a place. Every problem inspires to a solution. Every solution from xxxx is conceived and designed by recognized Danish Designers, who do not always follow the beaten track but readily find a new one.

Every thing fills a place. Every problem inspires to a solution. Every solution from xxxx is conceived and designed by recognized Danish Designers, who do not always follow the beaten track but readily find a new one.

Tekstafsnittet med times er klart mindre læseligt ved denne skrifstørrelse end tekststykket med verdana. Det kan også aflæses af de to skrifters apsect ratio, som er 0.58 for verdana imod 0.46 for times.

Det kan vi imidlertid ikke bruge til noget, for ingen browsere kan så vidt jeg ved tolke font-size-adjust egenskaben. Og så er vi jo lige vidt.

Omkostningerne

Jeg mangler at fortælle noget om omkostningerne ved overførbare skrifter. Den eot-fil, der er anvendt i disse eksempler, omfatter 95 tegn og vejer ca. 15 kilobyte, der naturligvis skal overføres, før skriften kan vises. Men kommer vi i hu, at den oprindelig grafik med de mange store bogstaver fylder 8 kilobyte, og at der er rigtig mange af slagsen på den website, jeg har hentet eksemplet fra, kan du godt se, at denne teknologi nok er værd at udforske, før du også forfalder til at lave grafikker ud af skrifter.

Der er lige et par punkter mere, jeg godt vil af med. Læs videre på næste side for en diskussion om copyright på skrifter.

1 2 3 4 5

Denne side er senest opdateret: 19. November, 2008