HTML canvas font ominaisuus

HTML5 Canvas -käyttöohje

Määritelmä ja käyttö

font ominaisuus asettaa tai palauttaa taulun tekstin nykyiset kirjasinominaisuudet.

font Ominaisuuden syntaksi on sama kuin CSS font -ominaisuussama

Esimerkki

Kirjoita 40 pikselin korkeinen teksti taululle, käyttäen kirjasinta "Arial":

Selaimesi ei tue canvas-merkkiä.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);

Kokeile itse

syntaksi

context.font="italic small-caps bold 12px arial";

ominaisuusarvo

arvo kuvaus
font-style

Määrittää kirjasimen tyylin. Mahdolliset arvot:

  • normaali
  • kalligrafinen
  • kalottu
font-variant

Määrittää kirjasimen muodon. Mahdolliset arvot:

  • normaali
  • pienikirjasin
font-weight

Määrittää kirjasimen paksuuden. Mahdolliset arvot:

  • normaali
  • paksu
  • paksumpi
  • kevyempi
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size / line-height Määritä koko ja rivi-etäisyys pikseleissä.
font-family Määritä kirjasinkerta.
caption Käytä otsikkokontrollin kirjasinta (esim. painikkeet, pudotusvalikot jne.).
icon Käytä kirjasinta kuvakkeille.
menu Käytä kirjasinta valikoissa (pudotusvalikot ja valikkolista)
message-box Käytä ikkunoissa käytettävää kirjasinta.
small-caption Käytä kirjasinta pienille ohjainteille.
status-bar Käytä ikkunavirheen tilan kirjasinta.

Tekninen yksityiskohta

Oletusarvo: 10px sans-serif

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas> -elementtiä.

HTML5 Canvas -käyttöohje