Safari中OpenType小型大写字母CSS属性失效问题求助

针对你遇到的Safari 18.0.1里无法启用内置OpenType小型大写字母的问题，可以从以下几个方向排查解决：

• 确认字体是否真的内置smcp特性
  有些字体声称支持小型大写，但实际仅在特定字重（比如常规400）或样式中包含smcp/c2sc（大写转小型大写）特性。可以用Font Forge这类工具打开字体文件，检查OpenType特性列表里是否存在这两个标签。如果字体本身没有内置特性，Safari自然会 fallback 到伪小型大写。

• 调整CSS属性写法

  • 使用font-feature-settings时，建议同时添加"c2sc"特性，确保大写字母也能转成内置的小型大写：

    font-feature-settings: "smcp", "c2sc";
    

  • 对于font-variant-caps: small-caps，明确指定字体的字重为字体支持小型大写的版本，比如：

    .small-caps {
      font-family: "Your Target Font", sans-serif;
      font-weight: 400; /* 确保是字体内置smcp的字重 */
      font-variant-caps: small-caps;
    }
    

• 清空Safari渲染缓存
  Safari有时会缓存字体渲染结果，导致新的CSS规则不生效。可以打开Safari开发者工具（Cmd+Opt+I），勾选"Disable Caches"选项后刷新页面；或者直接重启Safari再测试。

• 排查CSS优先级冲突
  检查是否有其他更具体的CSS选择器（比如嵌套更深的选择器、带ID的选择器）覆盖了你的小型大写规则，或者是否存在!important标记的属性干扰。可以用开发者工具的元素面板查看应用的样式，确认目标属性是否被正确应用。

• 测试最小化案例
  创建一个不含其他干扰代码的极简HTML文件，只保留目标字体和小型大写CSS规则，验证是否能正常生效。比如：

  <!DOCTYPE html>
  <html>
  <head>
  <style>
    @font-face {
      font-family: "Your Font";
      src: url("path-to-your-font.woff2") format("woff2");
    }
    .test {
      font-family: "Your Font", sans-serif;
      font-feature-settings: "smcp", "c2sc";
    }
  </style>
  </head>
  <body>
    <p class="test">Hello World HELLO WORLD</p>
  </body>
  </html>
  

  如果这个最小案例能生效，说明问题出在你原有代码的其他部分。

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