文本轮廓

为您网站上的元素添加文本描边。

通过使用文本轮廓,您可以将轮廓应用于网站上的文本。您还可以调整文本轮廓的颜色和粗细。

下面,您将找到:

  1. 关于如何添加文本大纲的说明
  2. 关于创建文本轮廓颜色过渡的指导
重要的: 如果您之前使用自定义代码集成了文本大纲,建议在通过样式面板添加文本大纲之前删除该代码。
设计器中的站点已将文本轮廓应用于英雄标题。
英雄标题中的透明文字“Ready Set Spring”应用了黄色轮廓,厚度为 2 像素。

如何加入文本大纲

您可以将文本轮廓引入文本组件(例如文本框、段落或标题),也可以引入包含一个或多个文本元素的包含元素(例如包含两个文本块的部分)。当您将文本轮廓添加到父元素时,所有子文本元素都将采用文本轮廓样式。

要将文本轮廓包含到元素中:

  1. 在画布上选择一个文本元素或包含一个或多个文本元素的父元素
  2. 导航 样式面板 > 排版 > 更多类型选项
  3. 调整轮廓 厚度 颜色 在下面 大纲

文本轮廓将显示在所选元素的文本上。

在样式面板的排版部分中添加了黄色、2 像素宽度的文本轮廓。
重要的: 如果未在较高断点处设置,轮廓颜色将默认为字体颜色。如果文本轮廓没有立即可见,可能是由于轮廓颜色与字体颜色匹配,或者轮廓厚度非常细。

如果需要,您可以修改不同断点处的文本轮廓样式,以根据特定的屏幕尺寸呈现不同的外观。

如何为文本轮廓添加颜色过渡

您可以为文本轮廓启用颜色过渡。只需在画布上选择文本元素或父元素,从状态下拉菜单中选择一个状态(如悬停),然后调整所选状态的文本轮廓样式。

重要的: 目前不支持文本轮廓粗细转换。
麦宜云
Ewan Mak 的最新帖子 (查看全部)