如何在网页中正确应用SF Pro字体的Expanded样式？

你的核心问题是引用的字体文件不对，且@font-face规则缺少关键属性。SF Pro的Expanded属于宽度变体，需要对应独立的字体文件，或者通过可变字体来控制，以下是具体解决步骤：

1. 确认并准备正确的字体文件 #

SF Pro的普通字重和Expanded宽度变体是分离的文件，你需要确保手里有对应Light字重的Expanded版本字体（比如文件名类似SF-Pro-Expanded-Light.ttf），而不是用普通的SF-Pro.ttf。

2. 修正@font-face规则 #

明确指定font-stretch属性为expanded，同时匹配正确的字体文件：

@font-face {
  font-family: "SF Pro";
  src: url("font/SF-Pro-Expanded-Light.ttf") format("truetype");
  font-weight: 300; /* Light字重对应的标准数值 */
  font-stretch: expanded; /* 声明这是Expanded宽度变体 */
  font-style: normal;
}

3. 在元素中调用样式 #

统一使用SF Pro作为字体族名，通过font-weight和font-stretch指定目标变体：

body {
  background-image: url("websitebg.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: "SF Pro", sans-serif;
  font-weight: 300;
  font-stretch: expanded;
}

可选：使用SF Pro可变字体（更灵活） #

如果你有SF Pro的可变字体版本（文件名类似SF-Pro-Variable.ttf），可以直接通过属性控制宽度，不需要单独的Expanded文件：

@font-face {
  font-family: "SF Pro Variable";
  src: url("font/SF-Pro-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; /* 覆盖所有字重范围 */
  font-stretch: 75% 125%; /* 覆盖压缩到扩展的宽度范围 */
  font-style: normal;
}

body {
  /* 其他样式保持不变 */
  font-family: "SF Pro Variable", sans-serif;
  font-weight: 300;
  font-stretch: 125%; /* 等同于expanded，也可以直接写expanded */
}

注意事项 #

• 检查字体文件路径是否正确，确保font/目录存在，文件名拼写无错误；
• 不同平台的SF Pro字体文件名可能有差异，以你实际拿到的文件为准；
• 如果是在苹果生态外使用SF Pro，需要确保你有合法的字体使用权限。

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