CSS
Tipografia

Sintassi

• font: [ font-style ] [font-variant] [font-weight] font-size [/ line-height] font-family ;
• stile font : stile font
• font-variant: font-variant
• font-weight: font-weight ;
• font-size: font-size ;
• line-height: line-height ;
• font-family: font-family ;
• colore: colore ;
• citazioni: nessuno | stringa | iniziale | eredita ;
• font-stretch: font-stretch ;
• allineamento del testo : allineamento del testo ;
• text-indent: length | initial | inherit ;
• overflow del testo: clip | ellissis | string | initial | inherit ;
• text-transform: none | capitalize | uppercase | minuscolo | initial | inherit ;
• text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit ;
• font-size-adjust: numero | none | initial | inherit;
• font stretch: ultra-condensato | extra-condensato | condensato | semi-condensato | normale | semi-espanso | espanso | extra-espanso | ultra-espanso | iniziale | ereditato;
• trattini: nessuno | manuale | auto ;
• tab-size: numero | lunghezza | iniziale | eredita ;
• letter-spacing: normal | length | initial | inherit ;
• spaziatura delle parole: normale | lunghezza | iniziale | eredita ;

Parametri

Osservazioni

Dimensione del font

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;
}

Il testo all'interno di #element-one avrà #element-one dimensione di 30px , mentre il testo in #element-two avrà una dimensione di 10px .

La stenografia del font

Con la sintassi:

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

Puoi avere tutti gli stili relativi ai font in una dichiarazione con la stenografia del font . Basta usare la proprietà del font e inserire i valori nell'ordine corretto.

Ad esempio, per rendere tutti gli elementi p grassetto con una dimensione del font di 20px e usando Arial come tipografia, tipicamente lo si codificherebbe come segue:

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

Tuttavia con la stenografia dei font può essere sintetizzata come segue:

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

Nota : dal momento che font-style , font-variant , font-weight e line-height sono opzionali, in questo esempio vengono saltati tre di questi. È importante notare che l'utilizzo della scorciatoia ripristina gli altri attributi non dati. Un altro punto importante è che i due attributi necessari per il collegamento ai font da utilizzare sono font-size e font-family . Se non sono entrambi inclusi, la scorciatoia viene ignorata.

Valore iniziale per ciascuna proprietà:

• font-style: normal;
• font-variant: normal;
• font-weight: normal;
• font-stretch: normal;
• font-size: medium;
• line-height: normal;
• font-family - dipende dal programma utente

Stack di font

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

Il browser tenterà di applicare il carattere di carattere "Segoe UI" ai caratteri all'interno degli elementi scelti come target dalla proprietà precedente. Se questo font non è disponibile, o il font non contiene un glifo per il carattere richiesto, il browser tornerà a Tahoma e, se necessario, qualsiasi font sans-serif sul computer dell'utente. Nota che i nomi dei font con più di una parola come "Segoe UI" devono avere virgolette singole o doppie intorno a loro.

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

Il browser tenterà di applicare il carattere "Consolas" ai caratteri all'interno degli elementi scelti come target dalla proprietà precedente. Se questo font non è disponibile, o il font non contiene un glifo per il carattere richiesto, il browser tornerà a "Courier New" e, se necessario, qualsiasi font monospace sul computer dell'utente.

Spaziatura del carattere

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

La proprietà letter-spacing viene utilizzata per specificare lo spazio tra i caratteri in un testo.

! la spaziatura delle lettere supporta anche valori negativi:

p {
  letter-spacing: -1px;
}

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

Trasformazione del testo

La proprietà text-transform consente di modificare la maiuscola del testo. I valori validi sono: uppercase , capitalize , lowercase , initial , inherit e 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>

Indentatura del testo

p {
    text-indent: 50px;
}

La proprietà text-indent specifica quanto testo dello spazio orizzontale deve essere spostato prima dell'inizio della prima riga del contenuto testuale di un elemento.

risorse:

• Indentazione solo della prima riga di testo in un paragrafo?
• https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Decorazione del testo

La proprietà text-decoration viene utilizzata per impostare o rimuovere le decorazioni dal testo.

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

la decorazione del testo può essere utilizzata in combinazione con lo stile di decorazione del testo e il colore della decorazione del testo come proprietà di stenografia:

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

Questa è una versione abbreviata di

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

Va notato che le seguenti proprietà sono supportate solo in Firefox

• text-decoration-color
• text-decoration-line
• text-decoration-style
• testo-decorazione-salto

Overflow del testo

La proprietà text-overflow riguarda il modo in cui il contenuto in overflow deve essere segnalato agli utenti. In questo esempio, i ellipsis rappresentano il testo ritagliato.

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

Sfortunatamente, text-overflow: ellipsis funzionano solo su un'unica riga di testo. Non è possibile supportare i puntini di sospensione nell'ultima riga del CSS standard, ma è possibile ottenerli con l'implementazione di Flexbox non standard.

.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 */
}

Esempio (aperto in Chrome o Safari):

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

risorse:

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

Word Spacing

La proprietà word-spacing specifica il comportamento di spaziatura tra tag e parole.

Valori possibili

• una lunghezza positiva o negativa (usando em px vh cm ecc.) o percentuale (usando % )
• la parola chiave normal utilizza la spaziatura delle parole predefinita del font
• la parola chiave inherit prende il valore dall'elemento genitore

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

Prova tu stesso

Ulteriori letture:

• word-spacing - MDN
• word-spacing - w3.org

Direzione del testo

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 */
}

La proprietà direction viene utilizzata per modificare la direzione orizzontale del testo di un elemento.

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

La proprietà in writing-mode modifica l'allineamento del testo in modo che possa essere letto dall'alto verso il basso o da sinistra a destra, a seconda della lingua.

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

Carattere Variante

attributi:

normale

Attributo predefinito dei caratteri.

maiuscoletto

Imposta ogni lettera in maiuscolo, ma rende le lettere minuscole (dal testo originale) di dimensioni inferiori rispetto alle lettere che in origine sono maiuscole.

CSS:

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

HTML:

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

USCITA:

Nota: la proprietà font-variant è una scorciatoia per le proprietà: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures e font-variant-east-asian.

Citazioni

La proprietà quotes viene utilizzata per personalizzare le virgolette di apertura e chiusura del tag <q> .

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

Ombra di testo

Per aggiungere ombre al testo, usa la proprietà text-shadow . La sintassi è la seguente:

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

Ombra senza raggio di sfocatura

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

Questo crea un effetto ombra blu attorno a un'intestazione

Ombra con il raggio di sfocatura

Per aggiungere un effetto sfocatura, aggiungi un'opzione argomento blur radius

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

Ombre multiple

Per dare a un elemento più ombre, separale con virgole

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