Wielkość 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'
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-smallx-smallsmallmediumlargex-largexx-largesmaller– 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.
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);