פרק 5: טיפוגרפיה

בפרק זה נלמד על:

• הגדרת גופנים
• שימוש בגופנים מותאמים אישית
• תכונות טיפוגרפיה נוספות

הגדרת גופנים

ניתן להגדיר גופנים עם המאפיינים font-family, font-size, font-weight ועוד. דוגמה להגדרת גופנים:

          
            body {
              font-family: 'Arial', sans-serif;
              font-size: 16px;
              font-weight: normal;
            }
            
            h1 {
              font-family: 'Verdana', sans-serif;
              font-size: 24px;
              font-weight: bold;
            }
          
        

שימוש בגופנים מותאמים אישית

גופנים מותאמים אישית ניתן לטעון באמצעות @font-face או שירותים כמו Google Fonts. דוגמה לשימוש בגופן מותאם אישית:

          
            @font-face {
              font-family: 'MyCustomFont';
              src: url('path/to/font.woff2') format('woff2');
            }
            
            .custom-font {
              font-family: 'MyCustomFont', sans-serif;
            }
          
        

תכונות טיפוגרפיה נוספות

תכונות נוספות כוללות line-height, text-align, text-transform ועוד. דוגמה להגדרת תכונות טיפוגרפיה נוספות:

          
            p {
              line-height: 1.6;
              text-align: justify;
              text-transform: uppercase;
            }
            
            .centered-text {
              text-align: center;
            }