Una fuente es un conjunto de caracteres de texto con algún estilo y tamaño que agregan valor a la aplicación. CSS nos permite hacer fuentes personalizadas de acuerdo con nuestras necesidades utilizando el "@Perfil delantero" regla. Para esto, se requiere descargar la fuente o proporcionar un enlace a las fuentes desde el servidor. Más específicamente, los desarrolladores necesitan diferentes fuentes para sus proyectos, y sin la regla de @font-face, el sistema se limitará a fuentes ya instaladas en nuestro sistema.

Este blog hablará sobre el uso de la regla CSS @Font-Face.

¿Qué es la regla CSS @Font-Face??

La regla de @font-face en CSS se utiliza para hacer fuentes personalizadas para nuestros proyectos. Estas fuentes se pueden cargar desde el servidor o las fuentes instaladas del sistema.

Cómo usar la regla CSS @Font-Face?

La sintaxis para usar la regla CSS @Font-Face se menciona a continuación:

@Perfil delantero
Font-Family: MyNewFont;
Src: url ()

La regla de @font-face se define especificando un valor en la propiedad de fuentes-familias y la URL relacionada desde donde esta fuente se encuentra como atributo SRC.

Ejemplo

En el siguiente ejemplo, personalizaremos las fuentes. Para hacerlo, primero, descargue las fuentes del navegador y agrégalas a la carpeta de su proyecto. También puede usar enlaces si está utilizando fuentes desde el servidor.

En primer lugar, agregar

y

etiquetas, luego aplique para personalizar las fuentes a cada una de ellas. Implementemos el escenario descrito anteriormente en tres pasos.

Paso 1: Agregue elementos al archivo HTML

En html, dentro de la sección, agregue

y

Para agregar un contenido relacionado con la página web:

Bienvenido a Linuxhint!

Bienvenido a Linuxhint!

Paso 2: Especifique la regla de @font-face en CSS

Para especificar la regla, la palabra clave "@Perfil delantero"Se utiliza en CSS. Dentro de sus soportes rizados, agregue la propiedad de fuente de fuente y agregue el nombre de fuente como su valor. Luego, use la propiedad SRC para especificar la ruta de URL de la fuente descargada:

@Perfil delantero
Font-Family: myFont;
src: url ("/fonts/batuphat \ script.OTF ");

Del mismo modo, agregaremos otro bloque de fuentes personalizado:

@Perfil delantero
Font-Family: myFont2;
src: url ("/fonts/olive_vine \ demo.OTF ");

Ahora, aplique el estilo al

y

elementos.

Elemento de estilo H2

H2
Font-Family: myFont;
tamaño de fuente: 50px;

Las propiedades aplicadas al

El elemento se explican a continuación:

• "Familia tipográfica"Está configurado con el valor"myfont"Que es lo que hemos declarado en la regla de @font-face.
• "tamaño de fuenteLa propiedad establece el tamaño de la fuente a 50px.

Elemento de estilo H1

H1
Font-Family: myFont2;
tamaño de fuente: 70px;
color marrón;

Aquí el "colorLa propiedad se usa para colorear la fuente.

Se puede ver a partir de la imagen proporcionada a continuación que

y

Las etiquetas se diseñan con éxito con las fuentes recientemente declaradas:

Hemos proporcionado el método para usar la regla CSS @Font-Face.

Conclusión

Los estilos de fuentes juegan un papel importante en hacer que cualquier aplicación sea estéticamente atractiva. Nuestro sistema tiene estilos de fuentes limitados, mientras que un desarrollador necesita diferentes fuentes para agregar embellecimiento a sus aplicaciones web. Para hacerlo, CSS nos permite usar la regla de @Font-Face para agregar fuentes personalizadas. Este artículo ha demostrado la regla de @font-face a través de la cual puede personalizar el estilo de fuente en nuestra aplicación.