HTML5 Game - Components of the font property

Introduction

Font Property	Valid Values
font-style	Three values are allowed: normal, italic, oblique.
font-variant	Two values are allowed: normal, small-caps.
font-weight	thickness of a font's characters: normal, bold, bolder (one font weight darker than base font), lighter (one font weight lighter than base font), 100, 200, 300, . . . , 900. A weight of 400 is normal, 700 is bold.
font-size	Values for the size of the font: xx-small, x-small, medium, large, x-large, xx-large, smaller, larger, length, %.
line-height	The browser forces this property to its default value, which is normal. If you set this property, the browser will ignore your setting.
font-family	Two types of font family names are allowed: family-name, such as helvetica, verdana, palatino, etc., and generic-family names: serif, sans-serif, monospace, cursive, and fantasy. You can use either family-name or generic-family, or both for the font-family component of the font.

Demo

ResultView the demo in separate window

<!DOCTYPE html>
   <head>
      <title>Specifying Fonts</title>
      <style>
        body {/*w ww.  j a  va2s. c  o  m*/
           background: #eeeeee;
        }
        #canvas {
            background: #ffffff;
            margin-top: 5px;
            margin-left: 10px;
            border: 1px solid rgba(0,0,0,0.2);
        }
      </style>
   </head>

   <body>
      <canvas id='canvas' width='850' height='440'>
         Canvas not supported
      </canvas>
      <script>
        let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),

    LEFT_COLUMN_FONTS = [
       '2em palatino',                     'bolder 2em palatino',
       'lighter 2em palatino',             'italic 2em palatino',
       'oblique small-caps 24px palatino', 'bold 14pt palatino',
       'xx-large palatino',                'italic xx-large palatino'
    ],

    RIGHT_COLUMN_FONTS = [
       'oblique 1.5em lucida console',     'x-large fantasy',
       'italic 28px monaco',               'italic large copperplate',
       '36px century',                     '28px tahoma',
       '28px impact',                      '1.7em verdana'
    ],

    LEFT_COLUMN_X = 50,
    RIGHT_COLUMN_X = 500,
    DELTA_Y = 50,
    TOP_Y = 50,
    y = 0;

function drawBackground() {
   let STEP_Y = 12,
       i = context.canvas.height;
   
   context.strokeStyle = 'rgba(0,0,200,0.225)';
   context.lineWidth = 0.5;

   context.save();
   context.restore();

   while(i > STEP_Y*4) {
      context.beginPath();
      context.moveTo(0, i);
      context.lineTo(context.canvas.width, i);
      context.stroke();
      i -= STEP_Y;
   }

   context.save();

   context.strokeStyle = 'rgba(100,0,0,0.3)';
   context.lineWidth = 1;

   context.beginPath();

   context.moveTo(35,0);
   context.lineTo(35,context.canvas.height);
   context.stroke();

   context.restore();
}

drawBackground();

context.fillStyle = 'blue',

LEFT_COLUMN_FONTS.forEach( function (font) {
   context.font = font;
   context.fillText(font, LEFT_COLUMN_X, y += DELTA_Y);
});

y = 0;

RIGHT_COLUMN_FONTS.forEach( function (font) {
   context.font = font;
   context.fillText(font, RIGHT_COLUMN_X, y += DELTA_Y);
});


        </script>
   </body>
</html>

HTML5 Game - Components of the font property

Introduction

Demo

Related Topic