仅修改CSS时，能否借助HTML中<link>的谷歌字体配置使用@font-face？

云上老周

2026-8-15

问题

大学作业要求不得修改任何HTML代码，仅能编辑CSS代码。我发现老师用<link>元素引入了字体相关资源，但没提供.OTF字体文件，想确认能不能借助这些<link>里的内容，通过@font-face为网页应用字体。相关HTML代码如下：

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>  
<link
    href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300&family=Barlow+Semi+Condensed:wght@300;700&display=swap"
    rel="stylesheet">  
<link href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Bungee+Shade&display=swap"
    rel="stylesheet">

回答

其实完全不用自己写@font-face，这些<link>已经帮你把字体加载的活儿干完了。Google Fonts的这种stylesheet链接，本质就是返回包含@font-face规则的CSS代码，相当于已经替你定义好了字体族。

你直接在自己的CSS里用这些字体的名称就行，举个例子：

body {
  font-family: 'Barlow Condensed', sans-serif;
}
.heavy-text {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 700;
}
.cool-title {
  font-family: 'Bungee Shade', cursive;
}

要是你非得手动写@font-face也不是不行：把<link>里的href链接在浏览器打开，就能看到Google自动生成的@font-face代码，里面有字体文件的实际地址（大多是.woff2格式），把这些代码复制到你的CSS里就能用，但真的没必要——原<link>已经加载了这些规则，重复写纯属多此一举。