是否需要同时使用rel="preload"与font-display="swap"？

首先得指出你给出的代码存在问题：<link rel="preload stylesheet" href="..." as="font"> 这种写法是错误的——rel 属性不能同时指定preload和stylesheet，而且你指向的是Google Fonts的CSS文件，as应该设为style而非font。

回到你的核心问题：即使使用rel="preload"预取字体相关资源，仍然有必要添加font-display="swap"，原因如下：

• preload的作用只是让浏览器提前发起资源请求，缩短资源加载时间，但它完全不控制字体加载延迟或失败时的页面渲染行为。font-display="swap"的核心价值是兜底：在自定义字体加载完成前，先显示系统 fallback 字体，避免页面出现文字空白（FOIT），直接提升首屏可读性和用户体验。
• 预加载并非100%可靠，比如网络波动、资源解析错误等情况都可能导致预加载失效，这时候swap就能保证用户至少能看到可读的文字，而不是一直等字体加载。

给你修正后的代码示例：

1. 预加载Google Fonts的CSS文件：

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Magra&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Magra&display=swap">

2. 如果要直接预加载字体文件（需要从Google Fonts生成的CSS中提取具体的字体URL）：

<link rel="preload" href="https://fonts.gstatic.com/s/magra/v17/...woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Magra&display=swap">

注意：直接预加载字体文件时必须加crossorigin属性，因为字体文件属于跨域资源，缺少这个属性会导致预加载的资源无法被样式表复用。

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