回到所有的课程
课程库

上传自定义字体

在Webflow项目中上传自定义字体。

注意:我们正在过渡到工作区,本文已经更新以反映该更改。访问的博客阅读有关这些更新和更改的更多信息。
如果您正在寻找涵盖特定账户行为的类似内容,请访问我们的原始教训上传自定义字体
本视频采用了旧的用户界面。更新版本即将到来!

您可以直接从。添加更多字体到您的网站字体下拉列表。选择添加字体你会被重定向到网站设置>字体选项卡。在那里,您可以上传并使用您自己的网站上的自定义字体。

如果要使用的字体可以通过Adobe字体(Typekit)或谷歌字体获得,则可以通过集成添加它们网站设置>字体选项卡。了解关于集成Adobe字体的更多信息

很高兴知道:您不需要付费网站或工作空间计划上传自定义字体。

在这节课中,你将学到:

  1. 如何上传自定义字体
  2. 如何选择合适的字体格式
  3. 如何编辑安装的字体
  4. 如何定义回退字体和显示设置
  5. 如何在设计器中测试字体

如何上传自定义字体

如果您想在站点上使用自定义字体,请打开网站设置>字体Tab键,向下滚动到自定义字体,然后上传你的字体文件。

网站设置的字体选项卡中的自定义字体部分允许您上传自定义字体到您的网站。
重要的是:请阅读您的字体许可协议,并确保在您上传之前您已经获得了在您的网站上使用该字体的许可。了解更多关于字体许可和使用的信息

寻找免费字体?查看:9个地方找到免费(几乎免费)字体

如何选择合适的字体格式

您可以上传各种字体文件格式到您的Webflow站点。

很高兴知道:您可以上传每个字体文件的最大文件大小为2MB。

大多数浏览器都支持

少数浏览器支持

很高兴知道:你不需要上传所有的文件格式。但是,您可以上传许多不同的格式,以最大限度地支持浏览器。WOFF是一种良好的格式,具有最大的浏览器兼容性和良好的文件大小。如果你没有WOFF或WOFF2版本的字体文件,你可以使用在线找到的字体转换器。

如何编辑安装的字体

上传字体文件后,可以编辑字体族名称、字体粗细和字体样式。

最佳实践:您可以上传一个字体的多个实例,并为每个实例选择不同的字体粗细和样式。确保对相同字体的所有实例使用相同的字体族。这将确保字体系列在设计器中被正确地组合在一起。

一旦字体族名称正确并匹配,您就可以上传每个字体文件到您的网站。在设计器中重新打开站点后,上传的文件将显示在设计器中。

第一步,从finder窗口中选择字体文件,然后点击蓝色的打开按钮。
第二步,点击自定义字体部分右侧的绿色上传字体文件按钮来确认上传。

你总是可以编辑您的自定义字体设置。你也可以删除上传的字体。

安装的字体部分包括上传的字体名称和名称下的字体描述。在名称的右侧,有一个编辑和删除按钮。这些按钮被高亮显示。

如何定义回退字体和显示设置

回退字体确保浏览器和操作系统之间的最大兼容性。如果站点访问者的浏览器无法加载您的自定义字体,它将切换到回退字体。备份字体会自动为您上传的每个字体家族创建。

“站点设置”的“字体”选项卡包含“已安装字体的回退”部分,您可以在此定义回退字体。

你可以编辑每个字体家族的回退字体,并从可用字体列表中选择它回退的字体。

在左边的第一步,选择下拉菜单来选择你想要使用的字体回退。在右边的第二步,Verdana被选为graphhik的后备字体。

你也可以编辑字体显示设置,它根据浏览器已经保存的内容来决定字体的加载方式。

在顶部的第一步,字体显示下拉菜单在安装字体部分高亮显示。第二步在底部,在选项自动、块、交换、回退和可选字体显示下拉菜单之间进行选择。
专家提示:设置字体显示设置可以防止切换无形文字闪现当页面使用系统字体加载时。

如何在设计器中测试字体

在设计器中,您可以完全访问自定义字体和字体权重。浏览你需要的字体样式面板(年代)>排版部分。字体列表按字母顺序排列。

您可以将自定义字体应用到任何文本元素,任何父元素,或任何HTML标记,以影响所有段落或所有H1s。

了解更多:网页排版入门

尝试Webflow——它是免费的
Baidu
map