网站设计

Website development

字体设计的分层处理

发布时间：2016-12-15 10:16:46

TAGS：网站设计

加快你的网页排版游戏本教程使用分层的字体在WebFlow CMS标题。

分层的字体（又名三维字体，彩色字体，和色字体）字体，有几个变种看起来可以层创建各种有趣和美丽的排版效果。

巴尔博亚加，话语中，Sutro Shaded是非常受欢迎的例子，分层的字体，但有你在那里做的3D选项

我们将使用这个教程卡尔的阴影。图片来源：英文字体识别

结合WebFlow的CMS，分层的字体是非常容易使用，可以让你的标题和其他文本元素的一个独特的，有特色的看。

这些字体设计者提供一个令人兴奋的设计方案：在一个文本显示多种颜色和材质的能力。不幸的是，分层的字体没有被广泛使用的网络上，因为先进的设计技术要求，以及文件的重量可以添加到网站。

使用分层字体的标题，例如，您需要创建每一层要使用的字体的一个标题元素，然后用CSS层精确定位属性。

我们将使用这个设计的灵感：

一个分层的字体可以使用在Webflow

我们将使用苏特罗的阴影，如Typekit它是可用的，它包含在Adobe CC。但你可以使用任何适合你的幻想-分层字体只知道我们将要使用的各种名称卡尔阴影类名称在教程，所以如果你使用不同的字体，你会用不同的名字，有可能的。

知识，许多Web字体可以减缓你的网站

为了建立这个例子中，我都是装的变化，海水的阴影，爆炸我的试剂盒的重量708k！对生产现场的不可接受的，所以一定要限制数量的层可以使用。

一个动态的收集

你可以使用这个技术，你的站点上的任何文字，但真正开始了自己当使用动态内容。

现在，在与节目！

步骤1：添加你的第一个字体层

首先，我们需要创建一个元素包含我们的标题。所以我们会把一个div画布上，称之为“分层标题容器。”然后我们就把这个div的相对位置。

因为我们正在建立一个动态的文章标题，我们会把标题元素div，设置它为H2，并命名为“分层卡尔的称号。”

注：一般来说，你不会想在一个类名使用特定的字体的名称，你可能会决定切换到一个不同的分层字体在未来。

步骤2：设计你的标题层

接下来我们将风格我们的H2，选择享受原字体阴影，给它一个很厚实的45px大小。由于字体是充满了细节，我们需要它来渲染好大。

现在让我们创建一个组合类称为“阴影小学”并把它的位置：绝对的，与顶部和左侧设置为0。

步骤3：再添加一个文本层

因为我们不想多H2S与我们页面上的文字一样，我们会在页面中添加一个文本元素并给它的阶级分层Sutro标题“所以它会看作为第一个标题层相同。

因为它是绝对定位，应该会出现新的层在第一层的上面。如果你不能看到它不要恐慌：它的存在。

现在，取代“阴影原“组合类在这个新的文字层，一个新的组合类称为“阴影填补。”

然后选择享受的字体“填充”的变体，并给它一个不同的颜色，这样我们就可以在我们看到它。

步骤4：为你的字体需要重复

现在，让我们重复操作2次“你好”和“梯度”层，选择字体相应的变为每一个新的文本层和组合类。只是一定要给每一层不同的颜色来简化设计过程。

步骤5：为了让你的层

一旦你得到了所有你需要的图层，你要确保他们为。

要做到这一点，使用导航面板上选择第一层，给它一个Z指数1。然后重复如下：

填充层：Z指数2

高亮度：2层的Z

梯度层：Z -指数：3

调整每个颜色，你应该看看这个：

步骤6：钩到了CMS

在这一点上，你可能已经意识到，这个标题是非常密集的工作。每次你想改变它，你就很难达到选择元素要做4次。

这是什么使CMS伟大的方式来使用这些分层字体-因为它会处理所有的辛勤工作的编辑为你。

链接你的新奇的去收集，选择标题div容器放在一个动态列表或集合模板页面。

然后，一个接一个，选择每层，告诉它“文本”的称号（可能是你的名字你的CMS采集现场）。第一层后，它会看起来像这样：

一旦你所有的层都连接到适当的领域，你可能需要调整行高（否则，较低的线将重叠以上）。只是一定要调整的行的高度roottitle元素的类（如果你使用我们的样本类的名字，那就是“分层Sutro标题”否则，只是每个组合类的第一个元素），那么它会影响所有的层，让你的标题。

和你做！现在，每一个动态的帖子标题将显示在你的漂亮的字体风格分层，无需你做所有的工作。好的，对吗？

你喜欢的字体的蓬勃发展是什么？

分层的字体可以是一个强大的文体工具，特别是如果你正在建设一个复古风格的CMS驱动的网站。但也有其他伟大的印刷方法很多。让我们知道你喜欢的是，我们会看到它创建一个适合的分层的字体。

原创不易，未经授权，严禁转载

原文地址：https://www.yzlink.cn/i,72,6990,0.html

上一篇：软件开发结构用户测试和功能应用测速

下一篇：好的网页设计99%是排版

您还有可能感兴趣的内容

建站流程

Website development

网站需
求分析
网站策
划方案
页面风
格设计
程序设
计研发
资料录
入优化
确认交
付使用
后续跟
踪服务
+86 10 64758810
18510861135

热门标签

Website development

客户评价

更多+

感谢云智互联，系统提前完成，在整个项目周期内，云智互联对待我们并不像是对待客户，更像是朋友一样，每一次，都能以专业的角度向我们提出更合理、更有效的解决方案，并快速、细致地完成我们的每一个需求，再次感谢以至诚之心做事的云智互联团队。

潘涛
我是东方龙马集团，在云智家做了2个企业官网，服务态度超级好。如果想做网站，选择他家一定不后悔。性价比高，服务态度好。值得你的信赖！

谭娇
技术好，设计精良，操作便利，很专业！配套的服务和后续的服务都很好,网站封面堪称精品，运行方便，后台操作的简单。技术还会耐心教我,很好的云智互联（北京）科技有限公司，建站很不错的。

陈曦
不错，价格比较合适，重点是响应速度蛮快，有什么问题都会马上给你解决，公司很满意，因为他们都是针对每个项目建了相应的讨论组，有问题可以再里面提出，人员分工到位，解决问题很及时。

张经理