HTML | propiedad de fuente de lienzo

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *