Tachyons Typography Font Families
Font families in Tachyons are the font-family property that specifies an element’s font. It can have multiple fonts as a backup system i.e. if the browser does not support one font then the other can be used.
Used Classes:
- sans-serif: This class is used to provide sans-serif style to the font.
- serif: This class is used to provide serif style to the font.
- system-sans-serif: This class is used to provide a system-sans-serif style to the font.
- system-serif: This class is used to provide system-serif style to the font.
Monospaced Typefaces that are taken from http://cssfontstack.com:
- code: This class is used to provide code style to the font.
- courier: This class is used to provide courier style to the font.
Sans-Serif Typefaces:
- Helvetica: This class is used to provide helvetica style to the font.
- Avenir: This class is used to provide avenir style to the font.
- Serif Typefaces: This class is used to provide serif typefaces style to the font.
- Athelas: This class is used to provide athelas style to the font.
- Georgia: This class is used to provide Georgia style to the font.
- Times: This class is used to provide times style to the font.
- Bodoni: This class is used to provide bodoni style to the font.
- Calisto: This class is used to provide catisto style to the font.
- Garamond: This class is used to provide garamond style to the font.
- Baskerville: This class is used to provide baskerville style to the font.
Syntax:
<element-name class="class-name">
...
</element-name>
Example 1: In this code, we will make use of the above classes to demonstrate the font family.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= <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> |
Output:
Example 2: In this code, we will make use of the above classes to demonstrate the font family.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= <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> |
Output:
Reference: https://tachyons.io/docs/typography/font-family/
Please Login to comment...