CSS | Colección de familias de fuentes genéricas

Posted on by Rudeus Greyrat

La propiedad font-family se utiliza para establecer la fuente del texto en un documento HTML. Las diferentes familias de fuentes se utilizan para crear páginas web atractivas. Hay muchas fuentes disponibles para elegir del grupo de fuentes, como fuentes de Google, fuentes de Adobe, etc., y requieren vinculación y personalización de la API de fuente. Las familias de fuentes genéricas se clasifican principalmente en las siguientes categorías, que se enumeran a continuación:

  • Serif
  • sans-serif
  • cursivo
  • monoespaciado
  • fantasía

La descripción detallada de la familia de fuentes genérica se enumera a continuación:

  • serif: se usa principalmente cuando el texto se escribe con fines de impresión, como libros, periódicos, revistas, etc. Los caracteres del texto están decorados con un trazo al final. El ejemplo de familia tipográfica serif es Times New Roman, Garamond, Georgia, Literata, Minion, Perpetua, etc.

    Sintaxis:

    element {
    font-family:serif;
}

    Ejemplo:

    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            Generic Font Family
        </title>
          
        <style>
            .GFG {
                font-family:serif ;
            }
            body {
                color:green;
                font-size:20px;
            }
        </style>
    </head>
      
    <body>
        <p>GeeksforGeeks</p>
          
        <p class = "GFG">GeeksforGeeks</p>
    </body>
      
    </html>                    

    Producción:

  • sans-serif: Su estilo es moderno, formal y de apariencia sencilla. A diferencia de “Serif” no tiene trazo en los extremos. Tiene una amplia gama de usos, pero con mayor frecuencia en forma digital de texto. El ejemplo de sans-serif es Verdana, Arial, Calibri, Helvetica, Futura, Impact, Lato, Optima, Skia, etc. 
    element {
    font-family: sans-serif;
}

    Ejemplo:

    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            Generic Font Family
        </title>
          
        <style>
            .GFG {
                font-family:sans-serif ;
            }
            body {
                color:green;
                font-size:20px;
            }
        </style>
    </head>
      
    <body>
        <p>GeeksforGeeks</p>
          
        <p class = "GFG">GeeksforGeeks</p>
    </body>
      
    </html>                    

    Producción:

  • cursiva: Este tipo de fuente se utiliza principalmente en la carta de invitación, mensajes informales, titulares, etc. Su apariencia es como un texto escrito a mano con un bolígrafo o pincel. El ejemplo de familia tipográfica cursiva es Flanella, Belluccia, Insolente, Corsiva, Zapfino, etc.

    Sintaxis:

    element {
    font-family:cursive;
}

    Ejemplo:

    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            Generic Font Family
        </title>
          
        <style>
            .GFG {
                font-family:cursive;
            }
            body {
                color:green;
                font-size:20px;
            }
        </style>
    </head>
      
    <body>
        <p>GeeksforGeeks</p>
          
        <p class = "GFG">GeeksforGeeks</p>
    </body>
      
    </html>                    

    Producción:

  • monoespaciado: Se utiliza para dar ejemplos, texto TypeScript, instrucciones, dirección postal, ejemplos de código, etc. Cada carácter del texto tiene el mismo ancho. El ejemplo de familia tipográfica monoespaciada es Courier, Consolas, Monaco, SimSun, Terminal, Menlo, Inconsolata, etc.

    Sintaxis:

    element {
    font-family:monospace;
}

    Ejemplo:

    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            Generic Font Family
        </title>
          
        <style>
            .GFG {
                font-family:monospace;
            }
            body {
                color:green;
                font-size:20px;
            }
        </style>
    </head>
      
    <body>
        <p>GeeksforGeeks</p>
          
        <p class = "GFG">GeeksforGeeks</p>
    </body>
      
    </html>                    

    Producción:

  • fantasía: Se utiliza para hacer que el texto sea más decorativo, impactante y expresivo. Este tipo de fuente debe usarse en el texto más corto, ya que no siempre es fácil leerlo con facilidad. El ejemplo de la familia de fuentes de fantasía es Impact, Cracked, Critter, Studz, Copperplate, etc.

    Sintaxis:

    element {
    font-family:fantasy;
}

    Ejemplo:

    <!DOCTYPE html>
    <html>
          
    <head>
        <title>
            Generic Font Family
        </title>
          
        <style>
            .GFG {
                font-family:fantasy;
            }
            body {
                color:green;
                font-size:20px;
            }
        </style>
    </head>
      
    <body>
        <p>GeeksforGeeks</p>
          
        <p class = "GFG">GeeksforGeeks</p>
    </body>
      
    </html>                    

    Producción:

La siguiente es la descripción de algunas familias de fuentes mencionadas como ejemplos en las familias de fuentes genéricas anteriores que se enumeran a continuación:

  • Verdana:
    • Diseñado por: Matthew Carter
    • Categoría: sans-serif
    • Publicado el: 1996
  • helvética:
    • Diseñado por: Max Miedinger, Eduard Hoffmann
    • Categoría: sans-serif
    • Publicado el: 1957
  • mensajero:
    • Diseñado por: Howard «Bud» Kettler
    • Categoría: Monoespaciado
    • Publicado el: ~1956
  • arial:
    • Diseñado por: Robin Nicholas y Patricia Saunders
    • Categoría: Sans-serif
    • Publicado el: 1982
  • impacto:
    • Diseñado por: Geoffrey Lee
    • Categoría: Sans-serif
    • Publicado el: 1965
  • calibre:
    • Diseñado por: Luc(as) de Groot
    • Categoría: Sans-serif
    • Publicado el: 2007
  • consolas:
    • Diseñado por: Luc(as) de Groot
    • Categoría: Monoespaciado
    • Publicado el: 2002
  • Georgia:
    • Diseñado por: Matthew Carter
    • Categoría: Serif
    • Publicado el: 1996
  • garamond:
    • Diseñado por: Paul Hickson
    • Categoría: Serif
    • Publicado el: 1993
  • perpetuo:
    • Diseñado por: Eric Gil
    • Categoría: Serif
    • Publicado el: 1929-32
  • ónix:
    • Diseñado por: Gerry Powell
    • Categoría: Serif
    • Publicado el: 1955

Ejemplo: este ejemplo utiliza diferentes tipos de familias de fuentes.

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Generic Font Family
    </title>
      
    <style>
        body {
            color:green;
            font-size:20px;
        }
    </style>
</head>
  
<body>
    <p>GeeksforGeeks</p>
      
    <p style="font-family:verdana;">GeeksforGeeks</p>
    <p style="font-family:helvetica;">GeeksforGeeks</p>
    <p style="font-family:courier;">GeeksforGeeks</p>
    <p style="font-family:arial;">GeeksforGeeks</p>
    <p style="font-family:impact;">GeeksforGeeks</p>
    <p style="font-family:calibri;">GeeksforGeeks</p>
    <p style="font-family:consolas;">GeeksforGeeks</p>
    <p style="font-family:georgia;">GeeksforGeeks</p>
    <p style="font-family:garamond;">GeeksforGeeks</p>
    <p style="font-family:perpetua;">GeeksforGeeks</p>
    <p style="font-family:onyx;">GeeksforGeeks</p>
</body>
  
</html>                    

Producción:

Publicación traducida automáticamente

Artículo escrito por abhilekhnathdas111 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 *