字型設定

/*基本字型設定*/
body {
  font-family: 
    -apple-system,/* 蘋果系統字體 (San Francisco)，macOS / iOS 專用 */
    BlinkMacSystemFont,   /* Chrome 專門的蘋果系統字體別名 */
    'Segoe UI',           /* Windows 系統的主要 UI 字體 */
    'Roboto',             /* Android 和 Google 的預設字體 */
    'Helvetica Neue',     /* macOS 舊版常用字體 */
    Arial,                /* 幾乎所有系統都有的無襯線字體 */
    sans-serif;           /* 如果以上都沒有，就用系統預設的無襯線字體 */
    font-size: 16px;
    line-height: 1.6;     /*行高，也就是文字上下行之間的距離*/
    color: #333;
  }

/* 標題字型 */
h1, h2, h3, h4, h5, h6 {
  font-family: 
    'Georgia',
    'Times New Roman', serif;
  /*指定標題字體，優先用 Georgia，沒有的話就用 Times New Roman，最後退回系統內建的 serif（襯線字體）。*/
    font-weight: 700/*字體加粗（700 = bold 粗體）*/
    line-height: 1.3;
    margin-bottom: 0.5em;
}

h1 {
  font-size: 2.5em; /* 40px */
  color: #2c3e50;
}

h2 {
  font-size: 2em; /* 32px */
  color: #34495e;
}

h3 {
  font-size: 1.5em; /* 24px */
  color: #4a5568;
}

/* 特殊字型用途 */
.code-text {
  font-family: 'Courier New','Monaco', monospace;
  /*
  'Courier New' → Windows 系統常見的等寬字體。
  'Monaco' → macOS 系統常見的等寬字體。
  monospace → 瀏覽器最後的保險字體，代表「任何系統預設的等寬字體」。
  */
  font-size: 14px;
  background-color: #f8f8f8;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e1e1e1;
}

.elegant-text {
  font-family: 'Playfair Display', 'Georgia', serif;
  /*
  'Playfair Display' → 一款優雅的襯線字體（常用在標題、設計感文字），如果使用者有   安裝或有載入 Google Fonts，就會用它。
  'Georgia' → 如果沒有 Playfair Display，就退回用 Georgia（Windows / Mac     都常見的襯線字體）。
  serif → 最後保險，代表系統預設的「襯線字體」，例如 Windows 可能是 Times New     Roman、macOS 可能是 Times。
  */
  font-size: 1.8em;
  font-weight: 400;
  font-style: italic;
  color: #2c3e50;
  text-align: center;
}
/* 字型大小系統 */
.text-xs { font-size: 0.75em; }    /* 12px */
.text-sm { font-size: 0.875em; }   /* 14px */
.text-base { font-size: 1em; }     /* 16px */
.text-lg { font-size: 1.125em; }   /* 18px */
.text-xl { font-size: 1.25em; }    /* 20px */
.text-2xl { font-size: 1.5em; }    /* 24px */
.text-3xl { font-size: 2em; }      /* 32px */