En este artículo, veremos cómo implementar la propiedad CSS «-apple-system» mientras usamos múltiples valores para la familia de fuentes.
La familia de fuentes es una propiedad de CSS que especifica una lista de uno o más nombres de familia de fuentes para el elemento seleccionado. Como sistema de «alternativa», la propiedad font-family puede contener varios nombres de fuentes. Si en caso de que su navegador no admita la primera fuente, probará con las siguientes pasadas como valores.
Los nombres de familias de fuentes se pueden categorizar aún más.
- family-name: Es el nombre de la familia tipográfica. Ejemplo, cursiva, “Courier New”, etc.
- generic-family : es un nombre que se le da a las familias de fuentes que se escriben después del nombre de la familia para permitir que el navegador elija una fuente similar, en caso de que las fuentes especificadas no estén disponibles.
Sintaxis:
selector {
font-family: 'Courier New', Courier, monospace;
}
Enfoque: los nombres de fuentes que contengan espacios en blanco deben estar entre comillas. Los valores globales para la familia de fuentes son heredados , iniciales , revertidos y unset . Las fuentes de Apple generalmente no se pueden usar en ninguna página web y se proporcionan integradas en el producto de Apple. Podemos usar estas fuentes en nuestra página web a través de CSS. La comparación se muestra en el segundo ejemplo tomando dos encabezados con diferentes clases como “uno” o “dos”.
Ejemplo 1: El siguiente ejemplo muestra la » familia de fuentes: -sistema de manzana «
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
h2 {
height: 5rem;
width: 15rem;
background-color: green;
color: white;
margin: auto;
text-align: center;
margin-top: 2rem;
font-family: -apple-system, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
<br> -apple-system
</h2>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la comparación de «font-family: -apple-system».
HTML
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h3 {
height: 2rem;
background-color: green;
color: white;
padding-left: 1rem;
}
.one {
font-family: -apple-system, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
}
.two {
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h3 class=".one">
-apple-system
</h3>
<h3 class=".two">
Courier New
</h3>
</body>
</html>
Producción:
Nota: Internet Explorer y Firefox usan “ -apple-system; ” como familia de fuentes, mientras que Google Chrome usa “ BlinkMacSystemFont “
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA