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