Fyrirlestur — Letur & litir

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Leturgerðir

• Leturgerð (e. font) segir til um hvaða hönnun á letri við notum til að birta texta
• Í grunninn höfum við aðgang að almennum leturgerðum
• Vef öruggar leturgerðir eru aðgengilegar á langflestum tækjum

---

Almennar leturgerðir

• serif, letur með þverendum
• sans-serif, letur án þverenda
• cursive, letur sem lítur út fyrir að vera handskrifað
• monospace, letur þar sem allir stafir eru jafnbreiðir
• fantasy, ævintýralegt letur

---

Vef öruggar leturgerðir

• „Times New Roman“, serif týpa
• „Georgia“, serif týpa
• „Arial“, sans-serif týpa
  • Skilgreinum með Helvetica
• „Verdana“, sans-serif týpa
• „Courier new“, monospace týpa

---

Letur

• font-family skilgreinir hvaða leturgerð við viljum nota, í röð
  • font-family: helvetica, arial, sans-serif; ef helvetica er ekki til hjá notanda notum við arial annars sjálfgefna sans-serif leturgerð
  • Ættum alltaf að enda á vef öruggri leturgerð

---

• font-style skásetur letur (italic) eða normal
• font-weight setur þyngd leturs, í tölum (t.d. 700), heitum (t.d. bold), eða hlutfallslega (t.d. bolder)

---

• Ef letrið sem við notum styður ekki skásett letur eða þyngd mun vafri herma
  • Bæta við/fjarlægja breidd af letri til að herma þyngd
  • Halla letri til að fá fram skásettningu
• faux bold og faux italic

---

• font-variant shorthand sem setur ýmsar breytur á leturgerð, t.d.
  • Birtingu á texta, t.d. setja texta í small-caps
  • Birting á tölum, t.d. skurðlína í 0 eða jafnbreiðar tölur

---

• font-size setur stærð leturs, með nákvæmari einingu eða letur-hlutfallslegri einingu
  • Getum líka notað lykilorð, t.d. small eða hlutfallsleg larger en mjög sjaldan notað

---

• line-height setur hæð línu (hlutfall af leturstærð), skilgreint án einingar
• Stýrir hversu mikið pláss lína af texta tekur—línubil
• line-height: 1.5;, hver lína tekur 150% af stærð leturs, það myndast pláss á milli lína sem eykur læsileika

---

• Shorthand:
  • font: (style|variant|weight) size/line-height family;
  • font: italic small-caps bold 14px/1.5 arial, sans serif;

---

• Getum hlaðið inn leturgerðum með @font-face og notað eins og annað letur
• Þurfum letur í mismunandi formum fyrir mismunandi vafra, margar þjónustur sem einfalda (t.d. Google Fonts, Font Squirrel)
• Notum með fallback á letur sem við treystum og stillum hvernig hlaðið inn með font-display

---

• font-display segir vafra hvernig birta eigi letur meðan það er ekki búið að sækja það
• Vafri reynir að birta efni á skjá eins hratt og mögulegt er, að sækja leturgerð áður og bíða er ekki endilega það sem við viljum
• Gefum tíma þar sem beðið er eftir letri (block period) og hve lengi megi skipta út leturgerð (swap period)

---

• Notum yfirleitt font-display: swap;
• Beðið í mjög stuttan tíma eftir leturgerð, annars er næsta skilgreinda leturgerð notuð
• Þegar umbeðin leturgerð er komin, er skipt í hana
  • Getur verið skrítið! Förum úr einni leturgerð meðan við erum að lesa texta

---

• Kallað flash of unstyled content (FOUC), eða flash of unstyled text (FOUT)
• Betra en flash of invisible text

---

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(path-to-font) format('woff2');
}

---

Variable fonts

• Variable fonts eru nýleg tækni til birtingar á letugerðum
• Letur er kóðað til að vera breytanlegt, sendum inn breytur gegnum CSS
• Leyfir mun meiri stjórn yfir útliti leturs, t.d. þyngd frá 100 til 999

---

• Stýrum „breytum“ í letri með font-variation-settings, þær heita yfirleitt styttum nöfnum
• font-variation-settings: 'wght' 375, 'GRAD' 88;
  • Þyngd leturs á að vera 375, grade á að vera 88
• Variable Fonts

---

Útlit texta

• text-transform stýrir hvort texti sé aðeins í hástöfum (uppercase), lágstöfum (lowercase) eða hver stafur í hástöfum (capitalize)
• Ættum því aldrei að þurfa að skrifa efnið okkar í hástöfum—stýrum útliti með CSS!

---

• text-decoration stýrir strikun gegnum texta, underline, overline, line-through
• letter-spacing stýrir hversu mikið bil er milli hvers stafs, yfirleitt sett í em, þ.a. letter-spacing: 1em; setur eitt leturbil milli hvers stafs. Neikvæð tala dregur texta saman

---

Texti

• text-shadow setur skugga á letur
• text-shadow: offset-x | offset-y | blur-radius | color
• offset gildi segja til um hversu mikið skuggi er dreginn eftir x eða y ás

---

Columns

• Multi-col leyfir okkur að skipta texta upp í dálka, eins og í dagblöðum
• Tilgreinum hámarksfjölda dálka og lágmarks breidd með columns
• Getum líka tilgreint bil og línu á milli með column-gap og column-rule

---

section {
  columns: 3 14em;
  column-gap: 2em;
  column-rule: inset 1px #999;
}

---

Prent CSS

• Við getum haft áhrif á það hvernig síðurnar okkar prentast út, t.d.
  • Fjarlægja óþarfa element
  • Stýra hvernig hlutir lenda milli síðna
• Skilgreinum með media attribute á <link> eða með @media print { } at-reglu

---

<link rel="stylesheet" media="print" href="print.css">`

@media print {
  nav,
  footer {
    display: none;
  }

  img {
    page-break-inside: avoid;
  }
}

---

Letur & texta dæmi

• Almennar og vef öruggar leturgerðir
• Dæmi um letur og texta
• Dæmi um lóðréttan hrynjanda

---

Bakgrunnur og litir

• background-color setur lit á bakgrunn, sjálfgefið gildi er gegnsætt (transparent)
• background-image setur mynd á bakgrunn eftir slóð, svona notum við myndir í CSS

---

Bakgrunnur

• background-repeat segir til um hvernig bakgrunnurinn endurtekur sig
  • repeat og hann endurtekur sig á báðum ásum
  • repeat-x og repeat-y skilgreina endurtekningu á einum ás

---

• background-position skilgreinir hvar myndin birtist
  • Lykilorð (right, left, top, bottom, center), nákvæmum einingum eða hlutföllum
• background-attachment skilgreinir hvernig bakgrunnur hagar sér í skrolli – með (scroll) eða fastur (fixed)

---

• background er shorthand fyrir allt að ofan
  • background: [color] [image] [repeat] [attachment] [position]
  • background: #fff url(bg.png) no-repeat left top;
• color breytir lit á texta elements

---

Bakgrunnur í stað texta?

• Stundum viljum við birta myndir þar sem texti er hugsanlega fyrir
  • T.d. logo í staðinn fyrir heiti
• Freistandi að hafa tóm element og stíla bakgrunn
• Höldum texta og felum!
  • Dæmi um aðferð til að fela texta

---

Gegnsæi

• Getum notað rgba() og hsla() liti í bakgrunni til að fá gegnsæja bakgrunsliti
• opacity stýrir gegnsæi alls innan í box
  • opacity: 1; ekkert gegnsætt
  • opacity: 0; al gegnsætt

---

Gradient

• Getum skilgreint lita gradient sem bakgrunns mynd
  • background: linear-gradient(135deg, red, blue);
• Notum með fallback og vendor prefixum
• Til tól til að útbúa:
  • Ultimate CSS Gradient Generator

---

Dæmi um bakgrunn og liti

• Dæmi um bakgrunn
• Dæmi um gegnsæi