HTML canvas fontPropiedad

Canvas 对象参考手册Objeto Canvas

Ejemplos

Escribe un texto de 30 píxeles en el lienzo, usando la fuente "Arial":

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

Pruébalo »

Soporte del navegador

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con la propiedad font.

Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.


Definición y uso

La propiedad font establece o devuelve la propiedad de fuente actual del contenido de texto en el lienzo.

La sintaxis que usa la propiedad font es la misma que lapropiedad CSS fontmisma.

Valor predeterminado: 10px sans-serif
Sintaxis de JavaScript: context.font="italic small-caps bold 12px arial";

Valores de la propiedad

Valor Descripción
font-style Especifica el estilo de fuente. Valores posibles:
  • normal
  • italic
  • oblique
font-variant Especifica la variante de fuente. Valores posibles:
  • normal
  • small-caps
font-weight Especifica el grosor de la fuente. Valores posibles:
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size/line-height Especifica el tamaño de fuente y la altura de línea, en píxeles.
font-family Especifica la familia de fuentes.
caption Usa la fuente de los controles de título (como botones, listas desplegables, etc.).
icon Usa la fuente utilizada para etiquetar iconos.
menu Usa la fuente utilizada en los menús (listas desplegables y listas de menú).
message-box Usa la fuente utilizada en los cuadros de diálogo.
small-caption Usa la fuente utilizada para etiquetar controles pequeños.
status-bar Usa la fuente utilizada en la barra de estado de la ventana.


Canvas 对象参考手册Objeto Canvas

Otras extensiones