/
Etablere skrifttyper

Etablere skrifttyper

English

Vi kan tilpasse skrifttypene i våre tjenester ved å etablere fontene i CSS og inkludere det i designet.

Skriftfilen definerer den grafiske representasjonen av tekst som kan inneholde informasjon som punktstørrelse, vekt, bredde og design.

Skriftfilene kommer i flere formater:

  1. TruetType (.tff)

  2. OpenType (.otf)

  3. Web Open Font Format (.woff)

For vår bruk, har ikke forskjellen så stor betydning. Det kan utgjøre en forskjell på hvor rask en nettside laster opp. Web Open Font Format (.woff) er for eksempel mer komprimert sammenlignet med TruetType (.tff) og OpenType (.otf) og gjør nedlastingen av innholdet vil gå raskere.

Slik legger du til egen definerte skrifttyper i skjemaet:

Teknisk sett kan du legge til omtrent hvilken som helst skrift på et hvilket som helst nettsted. Måten man laster ned skrifttyperfilene varierer. Noe ligger ute gratis som på Google Fonts, mens andre trengs det å betale lisens. Compose tilbyr ikke eget bibliotek for skrifttyper.

1. Laste ned skrifttypefiler

Når skriftfilene er lastet ned i et av de tre skriftformatene som er nevnt, kan vi inkludere det i designmappen. Vi oppretter en mappe kalt "fonts" og plasserer de nedlastede fontfilene her.

2. CSS-kode

I CSS-koden må man spesifisere skrift navnet, og spesifisere filplasseringen med ULR-lenke. Eksempel:

@font-face { font-family: "IBMPlexSans-Bold"; src: url("fonts/IBMPlexSans-Bold.ttf"); }

@font-face { font-family: "IBMPlexSans-BoldItalic"; src: url("fonts/IBMPlexSans-BoldItalic.ttf"); }

For å bruke denne fonten i CSS koden, referer vi ved å bruke skrift navnet i deklarasjonen slik:

h1 {
font-family: "IBMPlexSans-Bold","Helvetica","Arial","sans-serif";
font-weight:normal;
font-style:normal;
}

Som man kan se kan font-family attributten inneholde flere skrifttyper som et “reservesystem”. Hvis nettleseren ikke støtter den første skrifttypen, prøver den neste. Begynn med skrifttypen du ønsker, og avslutt alltid med en generisk skrifttype. Slik at nettleseren kan velge en lignende skrift hvis ingen andre ikke er tilgjengelig.

For eksempel kan man instruere nettleseren å bruke “Helvetica, Arial, sans-serif”, som betyr å bruke Helvetica hvis den er tilgjengelig (for Mac OS), Arial hvis Helvetica ikke er tilgjengelig (en lignende skrift tilgjengelig på Windows) eller systemets standard sans-serif skrift hvis den ikke finner noen av disse.

Andre attributter:

font-strech: Angir hvordan skriften skal være strekt. Standard er “normal“.

font-style: Angir hvordan skriften er stylet (normal, italic, oblique). Standard er “normal“.

font-weight: Angir hvor fet skrifttype det skal være. Standard er “normal“.

font-size: Angir størrelsen på skriften. Denne egenskaps justeringen for skriftstørrelse skal ikke brukes for å få avsnitt til å se ut som overskrift og vice versa. Bruk alltid riktige HTML selektorer slik som <h1>-<h6> for overskrift og <p> for avsnitt. Skriftstørrelsen kan stilles inn med piksler (em) eller med Em. Standard skriftstørrelse i nettlesere er 16 px, mens 1em er lik gjeldene standardstørrelse. 1em = 16 px.