回到所有的课程
课程库

上传自定义字体

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

注意:我们正在向工作区过渡,并且正在更新我们的内容。访问Workspaces博客文章要阅读有关这些更新和更改的更多信息,或访问我们更新的课程上传自定义字体.你也可以学习如何检查您的帐户是否在工作区上
本视频采用了旧的用户界面。更新版本即将到来!

控件直接向项目添加更多字体字体下拉列表。选择添加字体,我们会带你去你的项目设置>字体设置.在那里,您可以上传并在您的任何项目中使用自己的自定义字体。

如果您想使用的字体可以通过Adobe字体(Typekit)谷歌字体,你可以通过积分将它们相加项目设置>字体

很高兴知道:您不需要付费计划上传自定义字体。
在这节课中:
  1. 上传自定义字体
  2. 选择正确的字体格式
  3. 编辑安装字体
  4. 定义后备字体

上传自定义字体

如果要在项目中使用自定义字体,请转到项目设置>字体>自定义字体然后上传你的字体文件。

在顶部的第一步,单击项目设置页面中的字体选项卡。在底部的第二步,点击高亮的蓝色上传按钮,选择你想要上传的自定义字体。
重要的是:请阅读您的字体许可协议,并确保在您上传之前您有许可在您的网站上使用该字体。读字体授权和使用介绍要学习更多的知识。

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

选择正确的字体格式

您可以将各种字体文件格式上传到Webflow项目中。

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

大多数浏览器都支持

少数浏览器支持

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

编辑安装字体

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

最佳实践:你可以上传一个字体的多个实例并选择一个不同的字体粗细而且风格为每一个实例。只要确保使用相同的字体对于相同字体的所有实例。这将确保字体系列在设计器中被正确地组合在一起。

一旦字体族名称正确并匹配,您就可以上传每个字体文件到您的项目。重新打开设计器后,您将能够在设计器中看到上传的字体。

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

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

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

定义后备字体

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

已安装字体的回退部分包括回退到无衬线字体的字体族名称、编辑按钮和回退字体的用途说明。

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

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

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

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

在设计器中测试字体

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

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

了解更多
尝试Webflow——它是免费的
Baidu
map