谷歌字体提供的三个link标签有何区别？应复制哪一个到页面head？

各标签作用 #

• 第一个标签：<link rel="preconnect" href="https://fonts.googleapis.com">
  作用是提前与Google Fonts的CSS资源域名建立连接，提前完成DNS解析、TCP握手、TLS加密协商这些必要的网络连接步骤，等后续实际请求CSS资源时可以直接传输数据，减少等待时间，属于性能优化配置。
• 第二个标签：<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  同样是预连接优化，fonts.gstatic.com是Google Fonts实际存储字体文件的域名，由于字体文件属于跨域资源，所以需要加上crossorigin属性标记，提前建立符合跨域要求的连接，后续加载字体文件时速度更快。
• 第三个标签：<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@1&display=swap" rel="stylesheet">
  这是实现字体引入的核心标签，它会加载你选中的Merriweather字体对应的CSS样式表，样式表内包含了对应字体的@font-face规则，定义了字体族名称、字重、样式、字体文件地址等信息，只有加载了这个CSS，你在自己的页面样式中写font-family: Merriweather才会生效。其中display=swap参数的作用是字体未加载完成时先显示系统默认字体，避免页面文字长时间空白，优化用户体验。

引入建议 #

建议将3个标签全部复制粘贴到页面的head元素中。仅保留第三个标签也能实现字体引入效果，但缺少前两个预连接优化会拉长字体加载耗时，弱网环境下的用户体验会更差，官方给出的完整配置是性能最优的方案。

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