La propiedad font-family especifica la fuente de un elemento. Puede tener varias fuentes como sistema de respaldo, es decir, si el navegador no admite una fuente, se puede usar la otra. En otras palabras, esta propiedad se usa para especificar el nombre de familia y/o la familia genérica, según la prioridad de la lista, para el elemento seleccionado.
La familia de fuentes se puede clasificar en 2 tipos:
- family-name: Contiene el nombre de una familia tipográfica, como “times”, “courier”, “arial”, etc.
- familia genérica : contiene el nombre de una familia genérica, como «serif», «sans-serif», «cursiva», «fantasía», «monoespacio».
Sintaxis:
element_selector {
font-family: family-name|generic-family|initial|inherit;
}
Valores de propiedad:
- fonts-name : Esto especifica el nombre de la fuente entre comillas separadas por comas.
- generic-family : se utiliza para establecer la fuente del texto en un documento HTML de la lista de fuentes disponibles del grupo de fuentes.
- initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado.
- heredar : se utiliza para heredar una propiedad a un elemento del valor de propiedad de su elemento principal.
Nota: El nombre de la fuente se puede declarar con comillas simples cuando se usa el atributo de estilo en el HTML y también se debe citar cuando contiene espacios en blanco.
Comprenderemos el uso de la propiedad font-family al implementarla.
Ejemplo: Este ejemplo ilustra el uso de la propiedad font-family.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS | font-family Property </title>
<style>
.para1 {
font-family: "Impact", Times, serif;
}
.para2 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Font-family Property</h1>
<p class="para1">GeeksforGeeks in Impact font</p>
<p class="para2">GeeksforGeeks in Arial font.</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores que admiten la propiedad de familia de fuentes se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por AshwinGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA