Canvas font ominaisuus

Canvas-ohje

määrittely 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 korkeutta oleva teksti taululle, käytettynä kirjasintyypinä "Arial":

Selaimesi ei tue canvas-tikittä.

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ääritä kirjasimen tyyli. Mahdolliset arvot:

  • normal
  • italic
  • oblique
font-variant

Määritä kirjasimen muotoilu. Mahdolliset arvot:

  • normal
  • small-caps
font-weight

Määritä kirjasimen paksuus. Mahdolliset arvot:

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size / line-height Määritä kokoinen ja rivi-etäisyys pikseleissä.
font-family Määritä kirjasinkerta.
caption Käytä otsikkokomponenttien kirjasinta ( esimerkiksi painikkeet, pudotusvalikot yms. ).
icon Käytä kirjasinta kuvakkeiden merkintöihin.
menu Käytä kirjasinta valikkojen ( pudotusvalikot ja valikkolistaat ) kirjoituksessa.
message-box Käytä kirjasinta dialogeissa.
small-caption Käytä kirjasinta merkkiä pienille käyttöliittymäkomponenteille.
status-bar Käytä kirjaintyyppiä, joka näkyy ikkunan tilapalkissa.

Tekninen yksityiskohta

Oletusarvo: 10px sans-serif

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan siihen ominaisuuden 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ä.

Canvas-ohje