为何添加font-family多选项后，浏览器未优先加载Quicksand字体？

嘿，我来帮你搞定这个字体加载的问题！你遇到的情况大概率是**@font-face的定义有疏漏**，或者字体加载失败导致浏览器直接 fallback 到了sans-serif。咱们一步步排查：

1. 先确认@font-face的写法是否完全正确 #

这是本地字体加载的核心，只要这里出问题，后面font-family怎么写都白搭。给你一个标准的Quicksand字体引入模板，你可以对照自己的代码：

@font-face {
  /* 这里的名称要和后面font-family里的完全一致，大小写敏感！ */
  font-family: 'Quicksand';
  /* 路径要和你的字体文件位置对应，比如字体在同文件夹就直接写文件名 */
  src: url('Quicksand-Regular.woff2') format('woff2'),
       url('Quicksand-Regular.woff') format('woff'),
       url('Quicksand-Regular.ttf') format('truetype');
  /* 要匹配你引入的字体字重和样式，比如你用的是Regular就写normal */
  font-weight: normal;
  font-style: normal;
}

要注意：

• 字体文件名和路径必须完全匹配（比如你文件名是Quicksand-Regular.ttf就不能写成quicksand.ttf）
• 如果字体在子文件夹，路径要改成./fonts/Quicksand-Regular.woff2这种形式
• 尽量提供多种字体格式（woff2优先，woff次之，ttf兜底），兼容不同浏览器

2. 检查font-family的声明顺序 #

你要的效果是Quicksand优先，sans-serif备选，所以写法必须是：

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

这里一定要把'Quicksand'放在最前面，浏览器会按顺序尝试加载字体，只有当Quicksand加载失败时才会用sans-serif。

3. 排查字体是否真的加载成功 #

如果上面两步都没问题，那可能是字体文件没加载到。打开浏览器开发者工具（按F12），切换到Network标签，刷新页面，搜索你的字体文件名：

• 如果看到状态码是404：说明路径写错了，调整@font-face里的src路径
• 如果状态码是200但字体还是不显示：可能是字体文件损坏，试试重新下载Quicksand字体文件

完整的正确示例 #

把这些整合起来，完整的代码大概是这样：

/* 先引入字体 */
@font-face {
  font-family: 'Quicksand';
  src: url('Quicksand-Regular.woff2') format('woff2'),
       url('Quicksand-Regular.woff') format('woff'),
       url('Quicksand-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 全局设置字体 */
* {
  margin: 0;
  padding: 0;
  font-family: 'Quicksand', sans-serif;
}

按照这个步骤排查，应该就能解决你的问题啦！

内容的提问来源于stack exchange，提问作者Alex