[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico] [home] [volume] [parte]


Capitolo 493.   Controllo del carattere

Il carattere tipografico può essere controllato con una serie di proprietà CSS; in particolare possono essere utili quelle che appaiono nella tabella successiva.

Tabella 493.1. Proprietà riferite ai caratteri.

Proprietà Valori Descrizione
font-family
nome Carattere tipografico indicato per nome.
serif
Carattere con grazie.
sans-serif
Carattere senza grazie.
monospace
Dattilografico.
font-style
normal
Forma normale.
italic
Corsivo.
oblique
Obliquo.
font-variant
normal
Serie normale.
small-caps
Maiuscoletto.
font-weight
normal
Tono normale.
bold
Nero.
bolder
Nerissimo.
lighter
Chiaro.
font-size
npt
Dimensione in punti.
ncm
Dimensione in centimetri.
nmm
Dimensione in millimetri.
nem
Dimensione relativa in quadratoni.
nex
Dimensione relativa in Ex.
n%
Dimensione relativa percentuale.
small
Carattere piccolo.
medium
Carattere normale.
large
Carattere grande.

Alla proprietà font-family può essere attribuito il nome di una famiglia di caratteri, oppure il nome di una «famiglia generica», che in pratica identifica uno stile del carattere senza indicare esattamente quale tipo di carattere (nella tabella appaiono solo nomi di famiglie generiche). Una famiglia di caratteri potrebbe essere times, mentre una famiglia generica potrebbe essere serif, ovvero un carattere munito di grazie. Alla proprietà font-family possono essere abbinati più tipi di caratteri, separati da una virgola, per indicare una sequenza alternativa da utilizzare in mancanza di quello preferito:

BODY { font-family: gill, helvetica, sans-serif }

L'esempio mostra proprio questo: prima si tenta di utilizzare il carattere gill; quindi si prova con helvetica; infine ci si accontenta di un carattere senza grazie, sans-serif.

Figura 493.3. Confronto visivo tra le famiglie generiche.

esempio di tabella

493.1   File «caratteri-css-01.html»

Si realizzi il file caratteri-css-01.html partendo dal file linguaggio-css-01.html, già realizzato in precedenza, modificando la dichiarazione dello stile come si vede nel testo seguente:

      1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
      2 <HTML LANG="it">
      3 <HEAD>
      4     <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
      5     <META NAME="Description" CONTENT="Carattere tipografico,
      6         esempio 01">
      7     <META NAME="Keywords" CONTENT="HTML, CSS, carattere, esempio">
      8     <META NAME="Author" CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
      9     <META NAME="Date" CONTENT="2007.01.01">
     10     <META NAME="Resource-type" LANG="en" CONTENT="Document">
     11     <META NAME="Revisit-after" LANG="en" CONTENT="15 days">
     12     <META NAME="Robots" CONTENT="ALL">
     13     <TITLE>Linguaggio CSS</TITLE>
     14     <STYLE TYPE="text/css">
     15         <!--
     16             H1 {
     17                 font-family:    serif;
     18                 font-style:     normal;
     19                 font-variant:   normal;
     20                 font-weight:    bolder;
     21                 font-size:      2cm;
     22             }
     23             P {
     24                 font-family:    sans-serif;
     25                 font-style:     italic;
     26                 font-variant:   normal;
     27                 font-weight:    lighter;
     28                 font-size:      1cm;
     29             }
     30             P.autore {
     31                 font-size:        5mm;
     32                 text-align:       right;
     33                 font-style:       italic;
     34             }
     35             P.inizio:first-letter {
     36                 font-size:        200%;
     37                 color:            Blue;
     38             }
     39         -->
     40     </STYLE>
     41 </HEAD>
     42 <BODY>
     43 
     44 <H1>H&auml;nsel e Gretel</H1>
     45 
     46 <P CLASS="autore">di Jacob e Wilhelm Grimm</P>
     47 
     48 <P CLASS="inizio">Davanti a un gran bosco abitava un povero taglialegna
     49 con sua moglie e i suoi due bambini; il maschietto si chiamava
     50 H&auml;nsel e la bambina Gretel. Egli aveva poco da metter sotto i
     51 denti, e quando ci fu nel paese una grande carestia, non poteva neanche
     52 pi&ugrave; procurarsi il pane tutti i giorni. [...]</P>
     53 
     54 <P>Per la fame, neppure i due bimbi potevan dormire, e avevano udito
     55 quel che la matrigna diceva al padre. Gretel piangeva amaramente, e
     56 disse a H&auml;nsel: - Adesso per noi &egrave; finita. - [...]</P>
     57 
     58 <P>[...]</P>
     59 
     60 </BODY>
     61 </HTML>

Figura 493.5. Aspetto del file caratteri-css-01.html.

caratteri-css-01.html

493.2   File «caratteri-css-02.html»

Si realizzi il file caratteri-css-02.html, con qualsiasi contenuto, sperimentando anche altre proprietà descritte nel capitolo a proposito del carattere tipografico.

493.3   Verifica sull'uso delle proprietà riferite ai caratteri

In base a quanto appreso fino a questo punto, si realizzi il file verifica-caratteri-css-01.html che produca un risultato abbastanza simile a quello mostrato di seguito, quando viene visto attraverso un navigatore. In questa verifica va usato in modo appropriato l'elemento SPAN:

verifica-caratteri-css-01.html

Le sillabe della prima riga e le lettere della seconda, rappresentano le sette note musicali, scritte secondo la notazione italiana e la notazione inglese. Ogni nota (sillaba o lettera) è scritta con un rapporto di circa il 150 % rispetto alla precedente, inoltre sono stati usati gli evidenziamenti seguenti:

Nota (sillaba o lettera) Carattere
do Carattere con grazie, normale.
re Carattere con grazie, corsivo.
mi Carattere senza grazie, normale.
fa Carattere senza grazie, corsivo.
sol Carattere dattilografico, normale.
la Carattere dattilografico, corsivo
si Carattere con grazie, maiuscoletto.
c Carattere con grazie, normale, nero.
d Carattere con grazie, corsivo, nero.
e Carattere senza grazie, normale, nero.
f Carattere senza grazie, corsivo, nero.
g Carattere dattilografico, normale, nero.
a Carattere dattilografico, corsivo, nero.
b Carattere con grazie, maiuscoletto, nero.

Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Inoltre, lo stile CSS deve essere incorporato nel file HTML. Si deve consegnare per la valutazione:

  1. la stampa del risultato ottenuto attraverso il navigatore;

  2. la stampa del sorgente.

Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.


Appunti di informatica libera 2008 --- Copyright © 2000-2008 Daniele Giacomini -- <appunti2 (ad) gmail·com>


Dovrebbe essere possibile fare riferimento a questa pagina anche con il nome controllo_del_carattere.htm

[successivo] [precedente] [inizio] [fine] [indice generale] [indice ridotto] [indice analitico] [home]

Valid ISO-HTML!

CSS validator!

Gjlg Metamotore e Web Directory