La propiedad de fuente de lienzo HTML se utiliza para cambiar la familia de fuentes actual del contenido de texto del elemento <canvas> . La propiedad de fuente tiene una propiedad predeterminada, es decir , 10px sans-serif
Sintaxis:
context.font="italic small-caps bold 12px arial";
Valores de propiedad:
- font-family: se utiliza para establecer el tipo de fuente de un elemento HTML. Tiene varios nombres de fuente como respaldo
- font-style: se utiliza para especificar el estilo de fuente de un elemento HTML. Puede ser “ normal , cursiva u oblicua ”.
- font-weight: Se utiliza para establecer la negrita de la fuente. Su valor puede ser “ normal , negrita , más claro , más negrita ”.
- font-variant: Se utiliza para crear el efecto de las versalitas. Puede ser “ normal o de pequeña capitalización ”.
- font-size: Se utiliza para establecer el tamaño de fuente de un elemento HTML. El tamaño de fuente se puede establecer de diferentes maneras, como en » píxeles , porcentaje , em o podemos establecer valores como pequeño , grande «, etc.
- subtítulo: use los controles de subtítulos de fuente (como botones , menús desplegables, etc.)
- icono: use la fuente utilizada para etiquetar iconos.
- menú: Utilice la fuente utilizada en los menús ( menú desplegable y listas de menú ).
- cuadro de mensaje: use la fuente utilizada en los cuadros de diálogo.
- subtítulo pequeño: use la fuente utilizada para etiquetar controles pequeños
- barra de estado: use las fuentes utilizadas en la barra de estado de la ventana.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> HTML canvas font Property </title> </head> <body style="text-align:center"> <h1 style="color:green"> GeeksForGeeks </h1> <h2 style="color:green"> HTML canvas font Property </h2> <canvas id="sudo" width="300" height="150" style="border:2px solid"> </canvas> <script> var c = document.getElementById("sudo"); var ctx = c.getContext("2d"); ctx.font = "40px Arial"; ctx.fillText("GeeksForGeeks", 10, 50); </script> </body> </html>
Producción:
Navegadores compatibles: los navegadores compatibles con HTML canvas font Property se enumeran a continuación:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA