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śc 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);	
            

Dodaj komentarz

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