本地部署Google Fonts遇问题：字体不渲染/尺寸不符求助

问题总结 #

原本使用Google Fonts在线加载字体，切换为离线@font-face配置后，仅Permanent Marker字体可渲染但尺寸不符合设置，其余字体均无法加载，显示系统默认字体。

核心问题与修复步骤 #

1. 修复字体文件路径错误

Rock Salt的@font-face配置中，第一个src路径缺少fonts/前缀，导致浏览器无法定位字体文件：
错误代码：

@font-face {
    font-family: 'Rock Salt';
    src: 'rock_salt/RockSalt-Regular.woff2' format('woff2'), /* 路径缺失fonts/前缀 */
        'fonts/rock_salt/RockSalt-Regular.woff' format('woff');
    /* ... */
}

修正后：

@font-face {
    font-family: 'Rock Salt';
    src: 'fonts/rock_salt/RockSalt-Regular.woff2' format('woff2'),
        'fonts/rock_salt/RockSalt-Regular.woff' format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

2. 统一字体名称大小写匹配

CSS的font-family在类Unix环境（如Mac）下区分大小写，使用时的名称必须与@font-face定义的完全一致：
错误示例（正文样式）：

p {
  font-family: 'waiting for the sunrise', 'sue ellen francisco', 'poor story'; 
  /* ... */
}

修正后：

p {
  font-family: 'Waiting for the Sunrise', 'Sue Ellen Francisco', 'Poor Story'; 
  /* ... */
}

同理，.pagination和span的font-family需同步修正为与@font-face一致的大小写格式。

3. 修复font简写属性的无效写法

font是复合属性，必须包含至少font-size和font-family；仅设置字号时应单独使用font-size，行高用line-height属性：
错误示例（标题样式）：

h1 {
  font: 5em; /* 无效简写，缺少必要属性 */
  margin-left: 0.3em;
}

h2 {
  font: 2em/2.5; /* 无效简写，缺少font-family */
}

修正后：

h1 {
  font-size: 5em;
  margin-left: 0.3em;
}

h2 {
  font-size: 2em;
  line-height: 2.5;
}

h3 {
  font-size: 1.6em;
  line-height: 2.9;
}

正文样式中的无效写法同步修正：

p {
  /* 替换 font: 1.5em; */
  font-size: 1.5em;
  /* ... */
}

span {
  /* 替换 font: 1.2em/1.5; */
  font-size: 1.2em;
  line-height: 1.5;
  /* ... */
}

4. 验证字体文件存在性

确认所有字体文件都存放在配置的路径下，文件名（包括大小写）与@font-face中的引用完全一致，避免因文件缺失或名称不匹配导致加载失败。

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