Canvas font ਪ੍ਰਤੀਭਾਗ

Canvas ਪ੍ਰਤੀਯੋਗਿਤਾ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

font ਪ੍ਰਤੀਭਾਗ ਨੂੰ ਸੈਟ ਕਰਨ ਜਾਂ ਵਾਪਸ ਕਰਨ ਲਈ ਕੈਂਵਾਸ 'ਤੇ ਟੈਕਸਟ ਦੇ ਮੌਜੂਦਾ ਫੰਟ ਪ੍ਰਤੀਭਾਗ ਨੂੰ ਸੈਟ ਕਰਨਾ

font ਪ੍ਰਤੀਭਾਗ ਦੀ ਸਿਧਾਂਤਕ ਵਰਤੋਂ ਨਾਲ CSS font ਪ੍ਰਤੀਯੋਗਿਤਾਇੱਕੋ ਜਿਹਾ

ਉਦਾਹਰਣ

40 ਪਿਕਸਲ ਟੈਕਸਟ ਲਿਖੋ ਜਿਸ ਵਿੱਚ ਫੰਟ ਹੈ "Arial":

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ ਕੈਂਵਾਸ ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ ਹੈ。

JavaScript:

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

ਸਵੈ ਮੁਹਾਰਤ ਕਰੋ

ਸਿਧਾਂਤ

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

ਪ੍ਰਤੀਭਾਗ

ਮੁੱਲ ਵਰਣਨ
font-style

ਫੰਟ ਸਟਾਈਲ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ

  • normal
  • italic
  • oblique
font-variant

ਫੰਟ ਵਿਵਰਣ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ

  • normal
  • small-caps
font-weight

ਫੰਟ ਦੀ ਮੂਰਤੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size / line-height ਫੰਟ ਸਾਈਜ਼ ਅਤੇ ਲਾਈਨ ਹਾਈ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ ਪਿਕਸਲ ਵਿੱਚ
font-family ਫੰਟ ਸੀਰੀਜ਼ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੋ
caption ਟਾਇਟਲ ਕੰਟਰੋਲ ਦੀ ਫੰਟ ਦੀ ਵਰਤੋਂ (ਜਿਵੇਂ ਕਿ ਬਟਨ, ਡਰਾਪ-ਡਾਉਨ ਲਿਸਟ ਆਦਿ)
icon ਆਈਕਾਨਾਂ ਦੀ ਫੰਟ ਦੀ ਵਰਤੋਂ
menu ਮੇਨੂ ਵਿੱਚ ਫੰਟ ਦੀ ਵਰਤੋਂ (ਡਰਾਪ-ਡਾਉਨ ਲਿਸਟ ਅਤੇ ਮੇਨੂ ਲਿਸਟ)
message-box ਡਾਇਲਾਗ ਵਿੱਚ ਫੰਟ ਦੀ ਵਰਤੋਂ
small-caption ਉਪਯੋਗ ਕਰਨ ਲਈ ਛੋਟੇ ਕੰਟਰੋਲਾਂ ਦੀ ਫੰਟ
status-bar ਵਿੰਡੋ ਸਟੇਟਸ ਬਾਰ ਵਿੱਚ ਵਰਤਿਆ ਗਿਆ ਫੰਟ ਹੈ।

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: 10px sans-serif

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਅੰਕ ਇਸ ਸ਼ਰਤ ਦੇ ਪਹਿਲੇ ਸਮਰਥਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਸੰਸਕਰਣ ਦਿਸਾਈ ਹੋਏ ਹਨ。

ਚਰਮੇ ਐਜ਼ਡ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
ਚਰਮੇ ਐਜ਼ਡ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
4.0 9.0 3.6 4.0 10.1

ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਅਨੁਸੂਚਿਤ ਸੰਸਕਰਣ ਨਹੀਂ <canvas> ਐਲੀਮੈਂਟ ਸਮਰਥਨ ਕਰਦੇ ਹਨ。

Canvas ਪ੍ਰਤੀਯੋਗਿਤਾ