Squarespace 7.1 怎么改字体(站点样式 + CSS)

在 Squarespace 7.1 的站点样式中更换字体,上传自己的字体文件,或用自定义 CSS 修改单个元素。含操作步骤、方法选择表和常见问题解决。

常见问题

如何更改整个 Squarespace 网站的字体?

在 7.1 版本的网站上,打开“站点样式”(Site Styles),点击“字体”(Fonts),然后选择推荐的字体组合,或打开“所有字体组合”(All Font Packs),按无衬线、衬线或混合类型筛选。一个字体组合可以一次性设定标题、段落、按钮和其他杂项文字的字体。

Squarespace 可以使用任何 Google 字体吗?

你可以在字体下拉菜单中按名称搜索 Google 字体,但 Squarespace 官方帮助中心说明,并非所有 Google 字体都收录在其字体库中。如果你想要的字体找不到,只要授权许可允许,就可以自行上传字体文件。

Squarespace 支持上传哪些字体文件格式?

站点样式中的字体上传功能支持 OTF、TTF、WOFF 和 WOFF2 文件。与 CSS 编辑器搭配使用的“自定义文件”(Custom Files)区域只列出 TTF、OTF 和 WOFF,因此 WOFF2 文件请使用站点样式的上传功能,不要用 CSS 文件区域。

上传自定义字体需要获得许可吗?

需要。Squarespace 帮助中心说明,在网站上使用某款字体,必须取得字体所有者或授权方的许可。上传之前,请先确认该字体的授权协议允许网页使用。

为什么我的网站上字体设置步骤不一样?

7.0 版本和 7.1 版本的网站,字体设置并不相同。本指南的步骤适用于 7.1。在 7.0 上,字体修改需通过“设计”(Design)面板中的站点样式进行。Squarespace 还指出,在 7.0 上设置的自定义 Adobe 字体在 7.1 上不受支持,因此你需要改选 7.1 内置的字体。

切换模板后,自定义 CSS 还会保留吗?

在 7.0 版本的网站上,Squarespace 说明切换模板时自定义 CSS 不会转移。请保留一份你添加的 CSS 备份,以便需要时重新粘贴。

简短回答: 在 Squarespace 7.1 网站上,打开站点样式(Site Styles),点击字体(Fonts),然后选择一个字体组合,或者分别设置标题(Headings)、段落(Paragraphs)、按钮(Buttons)和其他(Miscellaneous)的字体。如果想用字体库里没有的字体,可以在同一面板中上传自己的字体文件。只有需要修改某一个特定元素时,才使用自定义 CSS。

本指南介绍的是 7.1 版本的操作步骤,依据 Squarespace 官方帮助中心的说明(2026 年 11 月核对)。如果你的网站是 7.0 版本,面板名称会有所不同,请参阅文末的版本说明。

该选哪种方法?

选择最省事、又能达到效果的方式。表格越往下,需要的设置越多。

你想要的效果	最佳方法	难度
一键换成全新风格	站点样式中的字体组合	低
标题和正文使用不同字体	站点样式中按类别设置字体	低
使用某款特定的 Google 字体	字体下拉菜单搜索	低
使用你已获得授权的品牌字体	上传字体文件	中
只修改某个标题、某个按钮或某个区块	自定义 CSS	中到高

方法一:用字体组合更换字体

字体组合会一次性为所有文字类别设定搭配好的字体,是给网站换风格最快的方式。

打开编辑器,点击站点样式(画笔图标)。
点击字体(Fonts)。
选择其中一个推荐的字体组合,或点击所有字体组合(All Font Packs),按无衬线、衬线或混合类型筛选。
关闭面板之前,先滚动浏览各个页面,检查标题、正文和按钮的显示效果。

字体组合是不错的起点,但有时你会喜欢它的标题字体,却不喜欢正文字体。下一种方法就能解决这个问题。

方法二:单独更改某一类文字的字体

在字体下,Squarespace 把文字分成四组,你可以分别设置:

标题(Headings):页面标题,以及文本区块中的各级标题样式。
段落(Paragraphs):正文文字。
按钮(Buttons):按钮上的文字。
其他(Miscellaneous):较小的文字,例如图片说明和表单标签(该组的具体范围因模板而异,修改后请多检查几个页面)。

更改其中一组的步骤:

在站点样式 > 字体中,点击你要修改的类别,例如标题。
打开字体下拉菜单,按名称搜索。
选择字体,然后根据需要调整样式、字重和字号设置。
如需使用 Adobe 字体,请点击列表底部的更多字体(Additional Fonts)链接。

Squarespace 还允许你设置一个基础字号,其他文字会按它等比缩放。所以如果换字体后整体看起来太大或太小,请先调整基础字号,再去逐个调整区块大小。

实用建议:标题和段落分两次修改。如果两者同时更改后效果不对,你就分不清是哪一个造成的。想了解如何搭配字体,请参阅我们的如何选择网站字体指南。

方法三:上传自己的字体

如果你的品牌使用的字体不在字体库中,可以自行上传。Squarespace 说明,这样使用字体需要获得字体所有者或授权方的许可。

准备 OTF、TTF、WOFF 或 WOFF2 格式的字体文件。站点样式的上传功能支持这四种格式。
打开站点样式 > 字体,选择一个类别(或字体下拉菜单),找到上传选项。
把字体文件拖入已上传字体面板,或点击加号图标,从电脑中选择文件。
为你想设置的类别选择刚上传的字体。
发布网站,然后在电脑和手机上查看线上网站,确认字体正常加载。

界面文字不时会有变动,如果按钮的名称不一样,请在字体下拉菜单中找上传图标或加号图标。

常见上传问题

字体出现在列表中,但显示效果不对。文件可能缺少某个字重或样式(粗体、斜体)。请把你计划使用的每个字重分别作为单独的文件上传。
字体在编辑器中正常,访客却看不到。请强制刷新已发布的页面,并检查字体文件的网页使用授权。
你上传了 WOFF2 文件,却想在 CSS 文件区域中引用它。CSS 编辑器的“自定义文件”区域支持的字体类型是 TTF、OTF 和 WOFF,不包括 WOFF2。WOFF2 请使用站点样式的上传功能。

方法四:用自定义 CSS 修改单个元素

站点样式是按类别在全站范围内更改字体。当你需要例外处理时,比如让某一个标题使用不同的字体,就可以用自定义 CSS。Squarespace 官方的 CSS 指引建议,CSS 只用于修改字体、颜色和背景,因为其他改动可能会破坏页面布局。

先用方法三上传字体,或选一款字体库中的字体,确保该字体已经可以在你的网站上使用。
打开网站 > 页面 > 自定义 CSS(Website > Pages > Custom CSS,具体路径可能因网站而略有不同)。
粘贴类似下面的规则,然后保存。

```css /* Example: make every H2 use a font that is already on your site */ h2 { font-family: "Your Font Name", serif; letter-spacing: 0.02em; }

/* Example: change button text only */ .sqs-button-element--primary { font-family: "Your Font Name", sans-serif; } ```

请把 "Your Font Name" 替换为站点样式中显示的准确字体名称。通用备用字体(serif 或 sans-serif)可以在字体加载失败时保证文字仍然清晰可读。类名可能因模板和 Squarespace 的更新而变化,所以请用浏览器的检查工具确认你要修改的元素对应的选择器。

如果你只想把 CSS 应用到某一个页面,Squarespace 帮助中心介绍了页面级的设置方式;使用前请先在那里确认最新的步骤。

发布前的字体快速检查清单

复制这份清单,发布前逐项过一遍。

[ ] 标题和正文使用的字体家族不超过两种。
[ ] 正文在手机上和在电脑上一样易读。
[ ] 你使用的每个字重(常规、粗体、斜体)在该字体中都有提供。
[ ] 你拥有所上传字体的网页使用授权。
[ ] 按钮和表单标签使用的字体与页面其他部分协调一致。
[ ] 你已保存所添加自定义 CSS 的备份。
[ ] 你检查的是线上网站,而不只是编辑器预览。

7.0 与 7.1 版本的区别

Squarespace 帮助中心说明,7.1 的字体选项适用于 7.1 网站,而 7.0 网站有自己的字体设置。在 7.0 上,字体修改通过“设计”面板中的站点样式进行。如果你正在考虑升级,Squarespace 提供了更新工具,我们的 Squarespace 评测介绍了当前编辑器的对比情况。如果字体只是让你烦心的众多问题之一,Squarespace 替代方案页面列出了其他建站工具,我们的费用详解则展示了一个 Squarespace 网站的总体花费。

如果你要新建网站

在挑选模板或从零开始建站时,先确定好字体风格,比事后再修改要容易得多。We.Inc 的免费方案允许你使用现成模板发布最多三个网站;可根据提示词生成网站初稿的 AI 建站工具,则从 Starter 方案开始,每月 $20。你可以在这里注册。

免费开始 · 无需信用卡

Umair Ali Sadaqat

We.Inc 创始人

Umair 是 We.Inc 的创始人。他撰写有关 AI 建站、代理机构以及经营网站工作室的文章。

准备好打造出色的作品了吗？

加入 15,000+ 家使用 We.Inc 在一个平台上完成上线、增长和自动化的企业。