Google 字体与图标

Google Fonts 提供 1000+ 免费字体，Font Awesome 提供海量矢量图标。

学完本章你将： 掌握 Google Fonts 引入、@font-face、图标字体。

Google Fonts

html

<!-- 1. 在 head 中引入 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">

css

/* 2. 在 CSS 中使用 */
body {
  font-family: 'Noto Sans SC', sans-serif;
}

@font-face 自定义字体

css

@font-face {
  font-family: 'MyFont';
  src: url('fonts/MyFont.woff2') format('woff2'),
       url('fonts/MyFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;  /* 先用系统字体，加载完再切换 */
}

body { font-family: 'MyFont', sans-serif; }

字体图标（Font Awesome）

html

<!-- CDN 引入 -->
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

html

<!-- 使用图标 -->
<i class="fas fa-home"></i> 首页
<i class="fas fa-search"></i> 搜索
<i class="fas fa-user"></i> 用户
<i class="fas fa-heart"></i> 收藏
<i class="fab fa-github"></i> GitHub

css

/* 调整图标样式 */
i {
  font-size: 24px;
  color: #4CAF50;
  margin-right: 8px;
}

Google 字体与图标

Google 字体与图标

Google Fonts

@font-face 自定义字体

字体图标（Font Awesome）

🛠️ 学完试试这些工具