CSS | Fuentes web

Las fuentes web se utilizan para permitir el uso de fuentes en CSS, que no están instaladas en el sistema local. Después de elegir la fuente no instalada, simplemente incluya el archivo de fuente en el servidor web y se descargará automáticamente cuando sea necesario.

Sintaxis:

@font-face {
    font details
}

Tipos de formatos de fuente: hay muchos tipos de formatos de fuente que se enumeran a continuación:

• Fuentes TrueType (TTF): Ya sea que se utilicen sistemas operativos Microsoft o Mac, el formato de fuente más utilizado es TrueType. Este es un estándar de fuente desarrollado por Microsoft y Apple a fines de la década de 1980. Las fuentes TrueType describen cada glifo como un conjunto de rutas. Un camino significa una curva cerrada especificada usando puntos y matemáticas particulares. Por ejemplo, una ‘i’ minúscula tiene dos caminos, uno para el punto y otro para el resto. Los píxeles se usan para llenar la ruta para crear la forma final de la letra. La ventaja del formato de fuente TrueType es que los glifos son escalables, lo que significa que se pueden configurar en cualquier escala y en cualquier tamaño de punto.
• Fuentes OpenType (OTF): OpenType es un formato de fuente que se creó en TrueType. El formato de fuente OpenType fue desarrollado por Microsoft y Adobe, pero es una marca registrada de Microsoft. Las funciones de diseño dentro de las fuentes OpenType están organizadas por scripts e idiomas, lo que permite que una sola fuente admita múltiples sistemas de escritura, dentro del mismo script. El formato de fuente OpenType aborda los objetivos de una mejor protección para los datos de fuentes, soporte multiplataforma más amplio, por nombrar algunos.
• El formato de fuente abierta web (WOFF): WOFF es un formato de fuente que se usa en páginas web desarrolladas en 2009 por Mozilla en colaboración con Type Supply, LettError y otras organizaciones. WOFF es básicamente un OpenType o TrueType con compresión y metadatos adicionales. El objetivo de WOFF es admitir la distribución de fuentes desde un servidor a un cliente a través de una red con restricciones de ancho de banda. Hay dos versiones de WOFF, que son WOFF y WOFF2, en su mayoría difieren en cuanto al algoritmo de compresión utilizado. Se describen mediante el descriptor de formato ‘woff’ y ‘woff2’ respectivamente.
• Fuentes/formas SVG: SVG significa gráficos vectoriales escalables. Cuando se especificó SVG por primera vez, la mayoría de los navegadores web no eran totalmente compatibles con las fuentes web. Pero para representar el texto correctamente, más tarde se agregó una tecnología de descripción de fuente a SVG para proporcionar esta capacidad. Proporciona los medios para incrustar información de glifos en SVG cuando se procesa.
• Fuentes OpenType incrustadas (EOT): el formato de archivo OpenType incrustado fue desarrollado por Microsoft. Las fuentes EOT son una forma compacta de fuentes OpenType para usar como fuentes incrustadas en páginas web. Fue diseñado con el propósito de permitir que las fuentes TrueType y OpenType se vinculen a páginas web para su descarga y representar la página web con la fuente requerida por el usuario.

Descriptores de fuentes: los descriptores se pueden definir dentro de la regla @font-face. A continuación, explicaremos los diferentes tipos de descriptores de fuentes.

• font-family: Se utiliza para definir el nombre de la fuente. Es necesario para que funcionen las fuentes web.
• src: Se utiliza para definir la URL de la que obtenemos la fuente. Al igual que la familia de fuentes, también se requiere src. Excepto estos dos campos, el resto de los descriptores son opcionales.
• font-stretch: se usa para encontrar cómo se debe estirar la fuente. Normal es el valor que se toma por defecto. Los diferentes valores de extensión de fuente son normal, condensada, semicondensada, ultracondensada, extracondensada, expandida, semiexpandida, extraexpandida y, por último, ultraexpandida.
• font-style: Se utiliza para definir diferentes estilos de fuente. Los diferentes estilos que se pueden configurar son oblicuos y el estilo predeterminado es normal.
• font-weight: El peso de la fuente se puede definir usando este descriptor. El valor predeterminado de font-weight es «normal». Los diferentes valores para la negrita son normal, negrita y también podemos dar valores numéricos que van desde 100-900 en incrementos de 100.

Ejemplo 1: Este ejemplo ilustra el uso de fuentes web.

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        @font-face{
            font-family: monospace;
            src:url(sansation_light.woff);
        }
          
        /* Sets  font family to monospace */
        * {
        font-family: monospace; 
        }
    </style>
</head>
  
<body>
    <div>
        <h1>GeeksForGeeks</h1>
          
        <p>A computer science portal for geeks.</p>
    </div>
      
    <h1>Great Geek's font face example.</h1>
</body>
  
</html>                    

Producción:

Ejemplo 2: Este ejemplo ilustra el uso de fuentes web.

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        @font-face{
                  
            /* Set font family to monospace */
            font-family:monospace; 
            src:url(sansation_light.woff);
        }
          
        * {
            font-family:monospace;
              
            /** font style to italic */
            font-style:italic;
            font-weight:bold; 
        }
    </style>
</head>
  
<body>
    <div>
        <h1>GeeksForGeeks</h1>
        <p>A computer science portal for geeks.</p>
    </div>
      
    <h1>Great Geek's font face example.</h1>
</body>
  
</html>                    

Producción: