Rodzina czcionek

Domyślną czcionką w znaczniku <canvas> jest czcionka
‘sans-serif’ o wielkości ’10px’.

Jeśli rodzina nie jest podana – napis wyświetlony jest czcionką
‘sans-serif’.

Przy określaniu czcionki można użyć nazwy konkretnej czcionki,
np.

  • times
  • lucida console
  • cambria
  • courier new
  • etc.

Możemy też podać nazwę rodziny czcionek i pozostawić
przeglądarce wybór odpowiedniej konkretnej czcionki, np.

  • ‘serif’ – czcionka szeryfowa
  • ‘sans-serif’ – czcionka bezszeryfowa
  • ‘cursive’ – kursywa
  • ‘fantasy’ – czcionka fantazyjna
  • ‘monospace’ – czcionka równoodstępowa

Przy określaniu możemy też podać nazwę konkretnej czcionki lub
czcionek oraz na końcu, po przecinku, nazwę rodziny czcionek. Wówczas
przeglądarka wyświetla napisy konkretną czcionką, ale jeśli jej nie
znajdzie wyświeli dostepną czcionkę z podanej rodziny, np.

  • ‘times, serif’
  • ‘nieznana, monospace’
  • ‘nieznana nieznana, fantasy’

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	var cv = document.getElementById("canvas");
	var ctx = cv.getContext("2d");
	ctx.font = "10px sans-serif";
	ctx.fillText('10px san-serif', 20, 20);
	ctx.font = "20px times";
	ctx.fillText('20px times', 20, 40);
	ctx.font = "20px lucida console";
	ctx.fillText('20px lucida console', 20, 60);
	ctx.font = "20px cambria";
	ctx.fillText('20px cambria', 20, 80);
	ctx.font = "20px courier new";
	ctx.fillText('20px courier new', 20, 100);
	ctx.font = "20px serif";
	ctx.fillText('20px serif', 20, 140);
	ctx.font = "20px sans-serif";
	ctx.fillText('20px sans-serif', 20, 160);
	ctx.font = "20px cursive";
	ctx.fillText('20px cursive', 20, 180);
	ctx.font = "20px fantasy";
	ctx.fillText('20px fantasy', 20, 200);
	ctx.font = "20px monospace";
	ctx.fillText('20px monospace', 20, 220);
	ctx.font = "20px times, serif";
	ctx.fillText('20px times, serif', 20, 260);
	ctx.font = "20px nieznana, monospace";
	ctx.fillText('20px nieznana, monospace', 20, 280);
	ctx.font = "20px nieznana nieznana, fantasy";
	ctx.fillText('20px nieznana nieznana, fantasy', 20, 300);	
            

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *