如何在HTML/CSS文件中修改下载的在线作品集项目的字体族设置

• 首先进入项目根目录下的css文件夹，打开核心样式文件style.css
• 全局搜索font-family字段，该项目的全局字体规则默认定义在body选择器下，你会看到类似以下的代码：

body {
  margin: 0;
  font-family: 'OddFontName', cursive, sans-serif;
  line-height: 1.5;
  /* 其余原有样式代码 */
}

• 直接修改font-family后的字体列表即可，推荐两种修改方案：
  • 用系统安全无衬线字体，不需要额外引入字体文件，兼容性最好：
    替换为font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  • 用自定义第三方字体：先把字体文件放到项目assets/fonts目录，在CSS文件开头添加@font-face声明字体，再把font-family替换为你声明的字体名称即可，注意保留末尾的sans-serif兜底字体，避免自定义字体加载失败时显示异常。
• 如果全局修改后仍有局部模块字体显示怪异，可在浏览器中右键点击对应异常区域，选择「检查」查看生效的CSS规则，定位到对应文件的font-family定义位置修改即可，常见的单独定义字体的区域包括标题、导航栏、项目卡片、页脚。
• 修改完成后保存CSS文件，按Ctrl+Shift+R强制刷新浏览器页面即可看到修改效果。

内容的提问来源于stack exchange，提问作者Félix Billières