Hay una variedad de fuentes disponibles en CSS y uno puede usar cualquier tipo de fuente en sus hojas de estilo. Sin embargo, es posible que no todas las fuentes sean compatibles con el navegador o el sistema operativo del usuario. Para superar este problema, se utiliza un sistema alternativo con fuentes web seguras para garantizar la máxima compatibilidad.
Asignamos varios nombres de fuentes a la propiedad “font-family”. Comenzamos especificando la fuente que se necesita primero y terminamos con una familia de fuentes genérica. Por lo tanto, surge la incompatibilidad con la primera fuente, sigue probando con la siguiente fuente que se puede mostrar y finalmente termina con una fuente genérica que se puede mostrar de manera confiable en la mayoría de los navegadores.
Sintaxis:
CSS element {
font-family: font details
}
Ejemplo 1: En este ejemplo, se muestra el uso de fuentes web seguras.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p.welcome {
font-family: Georgia, serif;
}
p.hello {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>
<p class="welcome">
Welcome to GeeksforGeeks
</p>
<p class="hello">
Hello from GeeksforGeeks
</p>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, se demuestra el mecanismo alternativo.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p.known-font {
font-family: Courier, monospace;
font-size: 16px;
}
p.unknown-font {
/* Intentionally specifying
an unknown font */
font-family: "Unknown Font", monospace;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Demonstrating the fallback property</h1>
<p class="known-font">
This is a known font.
</p>
<p class="unknown-font">
This is an unknown font,
causing fallback to monospace.
</p>
</body>
</html>
Producción:
Nota: La mayoría de las familias de fuentes no tienen cambios notables y, debido a eso, es posible que no pueda diferenciar entre fuentes. Por ejemplo, aunque Times New Roman y Times se ven exactamente iguales, las diferencias se pueden ver en tamaños de fuente más grandes y son insignificantes. Además, no se garantiza que ambas fuentes sean compatibles con todos los navegadores.
Hay muchas más combinaciones de fuentes para usar en nuestros proyectos web. Aquí hay algunas combinaciones de fuentes de uso común:
Publicación traducida automáticamente
Artículo escrito por pavan_rachapudi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA