Detailed Explanation of Font and Typography Properties in CSS

I. Basic Concepts of Fonts and Typography
Fonts and typography are core elements of web design, directly affecting readability and visual experience. CSS provides a series of properties to control font selection, size, weight, line height, and other characteristics.

II. Detailed Explanation of Font-Related Properties

1. font-family Font Family Setting

   • Purpose: Defines the font for an element's text.
   • Syntax: font-family: [font name], [fallback font], [generic font family];
   • Example:

     .text {
       font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
     }
     

   • Note: Font names containing spaces need quotation marks; it's recommended to provide fallback fonts and a generic font family.

2. font-size Font Size

   • Common units: px (fixed value), em (relative to parent element), rem (relative to root element), % (percentage)
   • Example:

     .text {
       font-size: 16px;        /* Fixed size */
       font-size: 1rem;        /* Relative to root element */
       font-size: 1.2em;       /* Relative to parent element */
     }
     

3. font-weight Font Weight

   • Values: normal (400), bold (700), 100-900
   • Example:

     .text {
       font-weight: bold;      /* Bold */
       font-weight: 600;       /* Defined by number */
     }
     

4. font-style Font Style

   • Values: normal (regular), italic (italic), oblique (oblique)
   • Difference: italic uses the font's italic version, while oblique is a slanted transformation of the regular font.

III. Detailed Explanation of Typography-Related Properties

1. line-height Line Height

   • Purpose: Controls the spacing between lines of text.
   • Values: number (recommended), length value, percentage
   • Example:

     .text {
       line-height: 1.5;       /* 1.5 times the font size */
       line-height: 24px;      /* Fixed value */
     }
     

2. text-align Text Alignment

   • Values: left, right, center, justify (justified)
   • Note: justify may cause uneven word spacing.

3. letter-spacing Character Spacing

   • Purpose: Controls the distance between characters.
   • Example:

     .text {
       letter-spacing: 1px;    /* Increase spacing by 1 pixel */
       letter-spacing: -0.5px; /* Decrease spacing */
     }
     

4. text-indent First Line Indent

   • Purpose: Controls the indentation of the first line of a paragraph.
   • Example:

     p {
       text-indent: 2em;       /* Indent first line by 2 characters */
     }
     

IV. Advanced Font Features

1. @font-face Custom Font

   • Purpose: Loads server-side font files.
   • Example:

     @font-face {
       font-family: 'MyFont';
       src: url('myfont.woff2') format('woff2'),
            url('myfont.woff') format('woff');
       font-weight: normal;
       font-style: normal;
     }
     

2. font-display Font Display Strategy

   • Controls the loading behavior of custom fonts.
   • Values: auto, block, swap, fallback, optional
   • Example:

     @font-face {
       font-family: 'MyFont';
       src: url('myfont.woff2') format('woff2');
       font-display: swap;     /* Text displays with fallback font first, then swaps to custom font after it loads */
     }
     

V. Practical Application Techniques

1. Font Fallback Strategy

   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
                  "PingFang SC", "Microsoft YaHei", sans-serif;
   }
   

2. Responsive Typography

   html {
     font-size: 16px;          /* Base size */
   }
   
   @media (min-width: 768px) {
     html {
       font-size: 18px;        /* Increase base font size on larger screens */
     }
   }
   

3. Vertically Centering Single-Line Text

   .button {
     height: 40px;
     line-height: 40px;        /* Line height equals container height */
     text-align: center;
   }
   

VI. Performance Optimization Considerations

• Prioritize system fonts to reduce HTTP requests.
• Use modern font formats (WOFF2 > WOFF > TTF).
• Reasonably set font-display to avoid layout shifts.
• Use tools like font-spider for font subsetting.

By systematically mastering these font and typography properties, you can create aesthetically pleasing and readable web text effects while balancing performance and user experience.