Zielony Smok

HTML5 canvas – tutorial

Wielkość czcionki

Wielkość czcionki podajemy przed nazwą czcionki lub rodziny czcionek:
’10px san-serif’. Jednostka powinna być podana po cyfrze bez spacji.

Jeśli wielkość czcionki nie jest podana to wyświetlana jest czcionka wielkości domyślnej ’10px’

Wielkość czcionki możemy określić w jednostkach:

  • px – bezwzględna wartość w pikselach wyświetlacza, np ’12px’. Wielkość czcionki zmieni się jeśli użytkownik zmieni rozdzielczość ekranu, gdyż zmieni się liczba pikseli na cal.
  • pt – bezwzględna wartość w punktach (drukarskich), np ‘1pt’. ‘1pt’ ma 1/72 cala, czyli 0,35 mm. Wielkość czcionki nie zmienia się przy zmianie wielkości monitora.
  • em – względna wartość w stosunku do wielkości czcionki domyślnej w przeglądarce, np. ‘0.5em’. ‘1em’ to wielkość aktualnie używanej czcionki.
  • % – względna wartość w stosunku do wielkości czcionki domyślnej w przeglądarce.

Na stronach internetowych najczęściej wielkość czcionki podaje się w %, a wielkości marginesów i odstępów w ’em’-ach.

Jeśli czcionka domyślna przeglądarki ustawiona jest np. na 16px to ustawienie wielkości czcionki na ‘70%’ spowoduje wyświetlenie napisu o wielkości 11 pikseli. Ustawienie na 0.9em w stosunku do 11 pikseli wyświetli napis o wielkości 10px.

Jeżeli użytkownik zmieni w przeglądarce wielkość fontu na stronie, a wielkości są ustawione na ‘px’ i ‘pt’ – to zmiany te nie odniosą skutku. Dlatego lepiej jest określać wielkość w ‘%’ i ’em’-ach – po zmianie wielkości fontu w przeglądarce – zmieniają się wielkości napisów na monitorze.

Jeśli jednak wymiary czcionki są ważne (np. mierzone) to lepiej używać jednostek bezwzględnych.

Wielkość czcionki można również określić używając określeń:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller – określa wielkość czcionki względem fontu rodzica.
  • larger – określa wielkość czcionki względem fontu rodzica.

Powyższe, pierwsze siedem określeń określa czcionkę od najmniejszej do największej. Wszystkie te określenia są względne. Określają wielkość w stosunku do domyślnej wielkości czcionki ustawionej w przeglądarce.

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 = "16px sans-serif";
	ctx.fillText('16px san-serif', 20, 20);
	ctx.font = "1em sans-serif";
	ctx.fillText('1em san-serif', 20, 50);
	ctx.font = "100% sans-serif";
	ctx.fillText('100% san-serif', 20, 80);
	ctx.font = "1.5em sans-serif";
	ctx.fillText('1.5em san-serif', 20, 110);
	ctx.font = "150% sans-serif";
	ctx.fillText('150% san-serif', 20, 140);
	ctx.font = "20pt sans-serif";
	ctx.fillText('20 pt san-serif', 20, 170);
	ctx.font = "xx-large sans-serif";
	ctx.fillText('xx-large san-serif', 20, 200);
	ctx.font = "medium sans-serif";
	ctx.fillText('medium san-serif', 20, 230);
	ctx.font = "x-small sans-serif";
	ctx.fillText('x-small san-serif', 20, 260);