CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS lettertipes


Dit is belangrik om die regte lettertipe vir jou webwerf te kies!


Lettertipekeuse is belangrik

Die keuse van die regte lettertipe het 'n groot impak op hoe die lesers 'n webwerf ervaar.

Die regte lettertipe kan 'n sterk identiteit vir jou handelsmerk skep.

Dit is belangrik om 'n lettertipe te gebruik wat maklik is om te lees. Die lettertipe voeg waarde by jou teks. Dit is ook belangrik om die korrekte kleur en teksgrootte vir die lettertipe te kies.


Generiese Font Families

In CSS is daar vyf generiese fontfamilies:

  1. Serif -lettertipes het 'n klein streep aan die rande van elke letter. Hulle skep 'n gevoel van formaliteit en elegansie.
  2. Sans-serif- lettertipes het skoon lyne (geen klein strepies aangeheg nie). Hulle skep 'n moderne en minimalistiese voorkoms.
  3. Monospace fonts - hier het al die letters dieselfde vaste breedte. Hulle skep 'n meganiese voorkoms. 
  4. Kursiewe lettertipes boots menslike handskrif na.
  5. Fantasielettertipes is dekoratiewe/speelse lettertipes.

Al die verskillende fontname behoort aan een van die generiese fontfamilies. 


Verskil tussen Serif- en Sans-serif-lettertipes

serifs vs.  Sans-serif

Let wel: Op rekenaarskerms word sans-serif-lettertipes as makliker om te lees as serif-lettertipes beskou.


Sommige lettertipe voorbeelde

Generic Font Family Examples of Font Names
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

Die CSS-fontfamilie Eiendom

In CSS gebruik ons ​​die font-familyeiendom om die lettertipe van 'n teks te spesifiseer.

Let wel : As die lettertipenaam meer as een woord is, moet dit tussen aanhalingstekens wees, soos: "Times New Roman".

Wenk: Die font-familyeiendom moet verskeie fontname as 'n "terugval"-stelsel bevat, om maksimum versoenbaarheid tussen blaaiers/bedryfstelsels te verseker. Begin met die font wat jy wil hê, en eindig met 'n generiese familie (om die blaaier 'n soortgelyke font in die generiese familie te laat kies, indien geen ander fonts beskikbaar is nie). Die fontname moet met kommas geskei word. Lees meer oor terugvallettertipes in die volgende hoofstuk .

Voorbeeld

Spesifiseer 'n paar verskillende lettertipes vir drie paragrawe:

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}