CSS
Typografie

Syntaxis

• lettertype: [ lettertype ] [lettertype-variant] [lettergewicht] lettergrootte [/ regelhoogte] lettertype-familie ;
• lettertype: lettertype
• lettertype-variant: lettertype-variant
• lettertype-gewicht: lettertype-gewicht ;
• lettergrootte: lettergrootte ;
• lijnhoogte: lijnhoogte ;
• font-family: font-family ;
• kleur: kleur ;
• quotes: geen | string | initiaal | erven ;
• font-stretch: font-stretch ;
• text-align: text-align ;
• text-indent: length | initial | inherit ;
• text-overflow: clip | ellipsis | string | initial | inherit ;
• text-transform: none | hoofdletter | hoofdletters | kleine letters | initiaal | erven ;
• text-shadow: h-shadow v-shadow blur-radius kleur | geen | initiaal | erven ;
• font-size-adjust: number | none | initial | inherit;
• lettertype-stretch: ultra-gecondenseerd | extra-gecondenseerd | gecondenseerd | semi-gecondenseerd | normaal | semi-uitgebreid | uitgebreid | extra-uitgebreid | ultra-uitgebreid | eerste | erven;
• koppeltekens: geen | handleiding | auto ;
• tabgrootte: aantal | lengte | initiaal | erven ;
• letterafstand: normaal | lengte | initieel | erven ;
• woordafstand: normaal | lengte | initieel | erven ;

parameters

Opmerkingen

Lettertypegrootte

HTML:

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS:

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

De tekst binnen #element-one zal 30 30px groot zijn, terwijl de tekst in #element-two 10px groot zal zijn.

Het lettertype steno

Met de syntaxis:

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

U kunt al uw lettertypegerelateerde stijlen in één declaratie hebben met de font steno. Gebruik eenvoudig de eigenschap font en plaats uw waarden in de juiste volgorde.

Als u bijvoorbeeld alle p elementen vet wilt maken met een lettergrootte van 20 px en Arial als de lettertypefamilie wilt gebruiken, codeert u het meestal als volgt:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

Met het lettertype steno kan het echter als volgt worden gecondenseerd:

p {
    font: bold 20px Arial, sans-serif;
}

Opmerking : aangezien font-style , font-variant , font-weight en line-height optioneel zijn, worden deze drie in dit voorbeeld overgeslagen. Het is belangrijk op te merken dat met behulp van de snelkoppeling de andere niet-toegewezen kenmerken worden gereset . Een ander belangrijk punt is dat de twee noodzakelijke kenmerken voor het lettertype snelkoppeling naar werk zijn font-size en font-family . Als ze niet beide zijn opgenomen, wordt de snelkoppeling genegeerd.

Beginwaarde voor elk van de eigenschappen:

• font-style: normal;
• font-variant: normal;
• font-weight: normal;
• font-stretch: normal;
• font-size: medium;
• line-height: normal;
• font-family - afhankelijk van user-agent

Lettertypestapels

font-family: 'Segoe UI', Tahoma, sans-serif;

De browser probeert het lettertype "Segoe UI" toe te passen op de tekens binnen de elementen waarop de bovenstaande eigenschap betrekking heeft. Als dit lettertype niet beschikbaar is of als het lettertype geen glyph bevat voor het vereiste teken, valt de browser terug naar Tahoma en, indien nodig, elk schreefloos lettertype op de computer van de gebruiker. Houd er rekening mee dat lettertypenamen met meer dan één woord, zoals "Segoe UI", enkele of dubbele aanhalingstekens moeten hebben.

font-family: Consolas, 'Courier New', monospace;

De browser probeert het lettertype "Consolas" toe te passen op de tekens binnen de elementen waarop de bovenstaande eigenschap betrekking heeft. Als dit lettertype niet beschikbaar is of als het lettertype geen glyph bevat voor het vereiste teken, zal de browser terugvallen op "Courier New" en, indien nodig, op elk monospace-lettertype op de computer van de gebruiker.

Letterafstand

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

De eigenschap letterafstand wordt gebruikt om de ruimte tussen de tekens in een tekst op te geven.

! letterafstand ondersteunt ook negatieve waarden:

p {
  letter-spacing: -1px;
}

Bronnen: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

Teksttransformatie

Met de eigenschap text-transform kunt u het hoofdlettergebruik van tekst wijzigen. Geldige waarden zijn: uppercase , capitalize , lowercase , initial , inherit en none

CSS:

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

HTML

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

Tekst streepje

p {
    text-indent: 50px;
}

De eigenschap text-indent geeft aan hoeveel tekst in de horizontale ruimte moet worden verplaatst vóór het begin van de eerste regel van de tekstinhoud van een element.

Middelen:

• Alleen de eerste regel tekst in een alinea laten inspringen?
• https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Tekstdecoratie

De eigenschap text-decoration wordt gebruikt om decoraties in tekst in te stellen of te verwijderen.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

text-decoration kan worden gebruikt in combinatie met text-decoration-style en text-decoration-color als verkorte eigenschap:

.title { text-decoration: underline dotted blue; }

Dit is een korte versie van

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

Opgemerkt moet worden dat de volgende eigenschappen alleen worden ondersteund in Firefox

• text-decoration-color
• text-decoration-lijn
• text-decoration-stijl
• text-decoration-skip

Tekstoverloop

De eigenschap text-overflow behandelt hoe overstroomde inhoud aan gebruikers moet worden gesignaleerd. In dit voorbeeld staat de ellipsis voor geknipte tekst.

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

Helaas, text-overflow: ellipsis werkt alleen op een enkele regel tekst. Er is geen manier om ellipsen op de laatste regel in standaard CSS te ondersteunen, maar het kan worden bereikt met een niet-standaard implementatie van alleen flexboxen voor webkits.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Voorbeeld (geopend in Chrome of Safari):

http://jsfiddle.net/csYjC/1131/

Middelen:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

Woordafstand

De eigenschap woordafstand geeft het afstandsgedrag tussen tags en woorden op.

Mogelijke waarden

• een positieve of negatieve lengte (met behulp van em px vh cm enz.) of percentage (met % )
• het trefwoord normal gebruikt de standaard woordafstand van het lettertype
• het sleutelwoord inherit neemt de waarde van het bovenliggende element

CSS

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

Online-Demo

Probeer het zelf

Verder lezen:

• woordafstand - MDN
• woordafstand - w3.org

Tekstrichting

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

De eigenschap direction wordt gebruikt om de horizontale tekstrichting van een element te wijzigen.

Syntaxis: direction: ltr | rtl | initial | inherit;

De eigenschap writing-mode wijzigt de uitlijning van tekst zodat deze van boven naar beneden of van links naar rechts kan worden gelezen, afhankelijk van de taal.

Syntaxis: direction: horizontal-tb | vertical-rl | vertical-lr;

Variant van lettertype

attributen:

normaal

Standaardkenmerk van lettertypen.

small-caps

Zet elke letter in hoofdletters, maar maakt de kleine letters (van de originele tekst) kleiner dan de letters die oorspronkelijk in hoofdletters waren.

CSS:

.smallcaps{
   font-variant: small-caps;
}

HTML:

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

OUPUT:

Opmerking: de eigenschap font-variant is een afkorting voor de eigenschappen: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures en font-variant-east-asian.

Citaten

De eigenschap quotes wordt gebruikt om de aanhalingstekens voor openen en sluiten van de tag <q> .

q {
    quotes: "«" "»";
}

Schaduw tekst

Gebruik de eigenschap text-shadow om schaduwen aan tekst toe te voegen. De syntaxis is als volgt:

text-shadow: horizontal-offset vertical-offset blur color;

Schaduw zonder vervagingstraal

h1 {
  text-shadow: 2px 2px #0000FF;
}

Dit creëert een blauw schaduweffect rond een kop

Schaduw met vervagingstraal

Om een vervagingseffect toe te voegen, voegt u een optie argument blur radius

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

Meerdere schaduwen

Om een element meerdere schaduwen te geven, scheidt u deze met komma's

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}