What's new in Web Inspector
Media & Web 进阶 20m

Web Inspector 新特性：字体检查、变量字体与用户偏好模拟

What's new in Web Inspector

2023年6月5日

在 Apple 官方观看视频

一句话判断

如果你做 Web 排版相关工作，Web Inspector 新增的字体检查面板和变量字体交互控件是直接可用的工具——可以看到实际使用的字体、检测合成粗体/斜体、实时拖拽调整变量字体的参数轴。

这场 Session 讲了什么

Session 介绍了 Safari Web Inspector 的多项新功能，集中在字体检查、用户偏好模拟和调试体验改进三个方向。

字体检查工具。Elements 标签的 Font 面板现在展示了选中元素的完整字体信息：主字体名称（用于验证是否加载了预期字体）、基本字体属性（大小、样式、粗细、拉伸）、支持的字体特性属性及其使用值（连字、小型大写字母、数字样式等）。

合成样式警告：当 WebKit 无法找到合适的粗体或斜体字体文件时，会通过算法模拟生成——粗体通过加粗笔画，斜体通过倾斜字形。这种”合成”效果远不如设计师专门绘制的版本。Web Inspector 现在会在 Font 面板中标注合成粗体或斜体，提示你可能缺少对应的字体文件。

变量字体的交互控件：变量字体（Variable Fonts）在单个文件中包含多种风格变化。Web Inspector 为每个可用的变化轴（Weight、Width、Grade 等）提供了交互式滑块，拖拽即可实时预览效果。调整后的 CSS 值会自动写入 Styles 面板，方便你直接复制到项目中。

用户偏好模拟：新增的模拟功能让你测试网站在不同用户偏好下的表现，包括暗色模式、减少动画、强制色彩等系统级无障碍设置。

事件监听器和滚动容器徽章：Elements 面板中，绑定了事件监听器的元素会显示特殊徽章，滚动容器也有对应标识，帮助快速定位交互元素。

值得深挖的点

变量字体的实战价值：传统字体文件只提供几个离散的粗细值（100、200…900），变量字体则提供连续的范围。更强大的是自定义轴（如 Grade），可以在不改变字形宽度的前提下改变粗细，这在响应式布局中非常有用。Web Inspector 的交互控件让设计师可以直接”感觉”到这些变化。

合成样式的识别：合成粗体和斜体在视觉上有明显差异——尤其是斜体，合成版本只是简单倾斜，而真正的斜体往往是重新设计的曲线。Font 面板的警告帮你确认是否需要引入额外的字体文件。

交互区域调试：配合 visionOS 的 Safari，Web Inspector 中的交互区域调试变得更重要。检查元素的高亮区域是否正确覆盖了整个可点击区域。

代码片段

使用 Web Inspector 调试变量字体：

/* 在 CSS 中设置变量字体的变化轴 */
.title {
    font-family: "Roboto Flex";
    /* 标准属性映射到变化轴 */
    font-weight: 450;          /* Weight 轴：100-900 范围 */
    font-stretch: 85%;         /* Width 轴：75%-125% 范围 */
    /* 自定义轴通过 font-variation-settings 设置 */
    font-variation-settings: "GRAD" 150;  /* Grade 轴：改变粗细不影响宽度 */
}

/* 在 Web Inspector 的 Font 面板中：
   - 拖拽 Weight 滑块实时预览
   - 拖拽 Width 滑块查看紧凑/宽松效果
   - 拖拽 Grade 滑块调整视觉重量
   - 调整后的值自动更新到 Styles 面板
   - 可以直接从 Styles 或 Changes 面板复制最终值 */

最佳实践

  • 检查网站是否使用了合成粗体或斜体，如果是，引入对应的专用字体文件
  • 使用 Web Inspector 的变量字体控件探索最适合你内容的排版参数
  • 模拟不同的用户偏好设置（暗色模式、减少动画）验证网站的适应性
  • 关注 Elements 面板中的事件监听器徽章，确认交互绑定是否正确
  • 用滚动容器徽章快速定位和调试滚动相关的问题

还有什么值得关注

  • 变量字体在性能上的优势（一个文件替代多个字重文件）
  • 自定义变化轴（如 Grade、Optical Size）在不同场景下的应用
  • 用户偏好模拟在无障碍测试中的完整能力
  • Web Inspector 断点功能的改进细节
WWDC 2023