Las familias de fuentes en Tachyons son la propiedad de familia de fuentes que 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.
Clases usadas:
- sans-serif: esta clase se utiliza para proporcionar un estilo sans-serif a la fuente.
- serif: esta clase se utiliza para proporcionar estilo serif a la fuente.
- system-sans-serif: esta clase se utiliza para proporcionar un estilo system-sans-serif a la fuente.
- system-serif: esta clase se utiliza para proporcionar un estilo system-serif a la fuente.
Tipos de letra monoespaciados que se toman de http://cssfontstack.com:
- código: esta clase se utiliza para proporcionar estilo de código a la fuente.
- courier: esta clase se utiliza para proporcionar un estilo courier a la fuente.
Tipos de letra Sans-Serif:
- Helvetica: esta clase se usa para proporcionar estilo helvetica a la fuente.
- Avenir: esta clase se utiliza para proporcionar un estilo avenir a la fuente.
- Tipos de letra serif: esta clase se utiliza para proporcionar un estilo de tipo de letra serif a la fuente.
- Athelas: esta clase se utiliza para proporcionar estilo athelas a la fuente.
- Georgia: esta clase se utiliza para proporcionar estilo Georgia a la fuente.
- Times: esta clase se utiliza para proporcionar estilo de tiempo a la fuente.
- Bodoni: esta clase se utiliza para proporcionar estilo bodoni a la fuente.
- Calisto: esta clase se utiliza para proporcionar estilo catisto a la fuente.
- Garamond: esta clase se utiliza para proporcionar estilo garamond a la fuente.
- Baskerville: esta clase se utiliza para proporcionar estilo baskerville a la fuente.
Sintaxis:
<element-name class="class-name">
...
</element-name>
Ejemplo 1: En este código, haremos uso de las clases anteriores para demostrar la familia de fuentes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body {
text-align:center;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h1 class="serif">GeeksforGeeks</h1>
<h1 class="system-sans-serif">GeeskforGeeks</h1>
<h1 class="system-serif">GeeksforGeeks</h1>
<h1>GeeskforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: En este código, haremos uso de las clases anteriores para demostrar la familia de fuentes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
body{
text-align:center;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<h1 class="helvetica">GeeksforGeeks</h1>
<h1 class="avenir ">GeeskforGeeks</h1>
<h1 class="athelas">GeeksforGeeks</h1>
<h1 class="georgia">GeeskforGeeks</h1>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/typography/font-family/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA