Nazwa czcionki (HTML5 canvas)

Nazwa czcionki

Ustawienia czcionki są podawane w następującej kolejności: “styl wariant grubość wielkość nazwa“

Każdą z wartości domyślnych określonych jako ‘normal’ można pominąć, np.
‘normal normal normal 16px courier’ możemy podać jako:
font='16px courier'

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

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świetli dostępną 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);