Web字体与图标：让页面更有风格

通过引入 Google Fonts：

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">


再在 CSS 中指定：

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


整个页面的文字风格就焕然一新。此外，图标也可以用字体方式加载，例如 Font Awesome：

<i class="fa fa-heart"></i>


这些图标是矢量的，不会失真，还能像文字一样缩放、变色，非常适合响应式设计。

更高级的方案是使用 SVG sprite 图标库或自定义 icon font，不仅美观，性能也更优。字体与图标，虽然微小，却是网页个性化与专业感的关键一笔。