现代网页排版有什么要求_调查：现代网站的更好排版

数字文本可以采用多种样式进行格式化。 随着网络字体和浏览器脚本的进一步发展，我们已经看到了供开发人员使用的新项目代码。 Web设计师也正在寻找最佳的策略来编码其网站并在其所有页面之间建立统一的印刷风格。

大量的专业Web设计师就该主题进行了撰写，包括更新的功能和服务。 您必须将每个网页视为一个单独的文档，以打破您的根目录布局设计。 在这种视图下，很容易看到排版如何在页面之间流动，并为创意提供了独特的出路。 这对于为段落和标题建立独特的类尤其明显。

下面，我将为有志于为网络建设的有抱负的排版设计师提供一些很棒的想法。 博客，社交网络和企业始终希望更新其当前网站。 Web排版CSS样式提供了一个很好的资源来开始刷新页面。

当今互联网的差异

自2000年初以来，现代Web有了突飞猛进的发展。为Web设计人员提供了大量新功能，可以创建出色的图形设计作品，徽标，横幅以及几乎所有其他内容。 HTML5和CSS3规范的发布也对建立Web字体的旧方法造成了巨大影响。

现在完全可以在CSS @font-face属性中包含您自己的字体。 您可以使用任何TrueType （.ttf）或OpenType （.otf）文件，并将副本本地存储在服务器上。 然后用一些CSS3魔术在您的网页上的任何地方包括这个家庭！

仅凭这种技术，就有可能看到现代互联网的发展情况。

随着jQuery每天的流行，我们可以构建令人惊叹的动画效果以及自定义字体也就不足为奇了。 作为上述方法的替代方法，jQuery的TTFGen插件使您可以在网页上包含任何TrueType字体。

由于您不需要支持CSS3标准的现代浏览器就可以使用此方法，因此它更加可靠。 但是，当然，旧版浏览器（例如Internet Explorer 6）将难以正确渲染。

但是，谢天谢地，大多数用户已切换到支持这些标准的较新的浏览软件！ 当您为网络开发时，应准确考虑您的市场针对谁。 您无法一直取悦所有人，但您可以确保与他人保持足够的距离。

数字印刷术的目的

要考虑的想法有点奇怪，但是数字文本的真正目的是什么？ 传达信息，共享资源并向Internet用户世界提供您的意见。 文本是共享思想和观念的最简单的媒体形式 。 但这也非常复杂，并且包含照片/视频无法使用的主要细节。

您的访问者很可能会根据您的文字或标题中的关键字找到您的网站-这是仔细关注您的网络副本的另一个原因。 并且，一旦您对您的网站有了一定的关注，就需要保持对它们的专注。 使用粗体标题和等距页面文字最容易做到这一点。

如果您要撰写文章或教程，则需要使用清晰的语言。 同样重要的是页面文字的外观和内容的质量。 文字越大，越容易阅读和扫描关键字。 而且由于段落将包含您的大部分内容，因此您应该花大量时间进行原型设计以找到合适的样式。 段落用于将您的消息按位大小的块细分为句子。 了解如何编写和预先计划以获得合适的页面布局。

此外，页面文字还包含媒体和辅助内容。 如果您的段落包含主要信息，则可能有图形或图像可以为页面增添色彩。 这些重点是使用户在您的网站中移动的正确选择。

视频和图像能够分解您的内容，使读者似乎可以更快地浏览您的文章。 但是请谨慎使用这些物品，不要让任何东西淹没您的核心信息。 用户（主要是）来您的网站获取信息，并且不希望过多的干扰。

所有其他格式设置选项均用于指定功能或用途。 例如，超链接文本通常与其他颜色不同，以“可单击”突出。 您可以使用粗体或斜体词来增加句子的重点。 使用块引号或预格式化的文本可以分别帮助描述基本语句或Web代码。

网页标题

网页排版中最重要的资产之一就是标题标签。 如果您不熟悉HTML，则标题的范围从

到

，前者的重要性最高，而后者的重要性最低。 该标记非常有用，因为Google还会根据内容结构对您的域和网页进行排名。 因此，您最终可以控制要使用的关键字以及所需的标题层。

即使标准HTML5规范包含多达6种不同的标题样式，我还是建议使用3-4种。 不必将它们全部包含在页面中。 而且，您不太可能会用到6个不同的标题。 刚坐下来构建样式时，请尝试为标题起草一些示例，以查看喜欢的样式。

Photoshop非常适合这种情况。 您也可以尝试用HTML编码不同的标题，以查看它们在浏览器中的外观。 重要的是根据页面流和设计标题的等级对其进行处理。

例如，您的

标记应在所有页面标题中脱颖而出。

和

是最受欢迎的标签， 并由Google推荐用于抓取页面内容。 使用粗体，下划线，虚线边框或其他颜色之类的设计效果将帮助您的标题跳出页面。

当涉及标题或内容的任何部分时， 间距也很重要 。 确保在标题和主要内容区域之间添加额外的边距。 如果您将字体设置得足够大，则每个标题都应突出显示，因为它是自己的核心块。 如果您想用清晰的信息吸引读者的注意力，那么这种外观是理想的。

建立独特的超链接

关于页面链接的话题有很多话要说。 您必须以一种或另一种方式在代码中使用超链接。 作为站点上不同页面之间的主要导航界面，它们非常重要。 您也可以链接到其他博客，甚至链接到归档的博客文章，以供日后参考。

您应该非常仔细地选择链接的保留文本。 这是链接样式将强调的特定内容。 例如， “单击此处”非常流行，并且大多数时候都用于直接下载。 尝试避免这种系统的方法，而对您的超链接文本有所创新 。 如果访问者还可以识别上下文并弄清楚新页面将包含的内容，则他们更有可能单击链接。

在设置链接样式时，应考虑以下事项– 页面设置中的外观将如何变化 ， 您正在处理的背景颜色类型以及 用于对比的文本是什么颜色？

链接应作为可单击项显着地显示在页面外-毕竟，链接是它们的功能。 这就是带下划线文字效果的旧蓝色效果如此之好的原因。 但是，如果您发现其他颜色效果更好，则应尝试一下。 对于链接设计，没有一种万能的解决方案。 只需在网络上浏览一下，您肯定会放在一起。

兴趣点是您应该避免使用的一些功能。 诸如更改文本字体系列或字体大小之类的事情可能非常烦人。 这将导致文本变形和移动，这可能会将鼠标光标置于链接区域之外。 以类似的方式，您应该避免在链接或悬停效果上添加多余的边距/填充。 当您保持简单时，这些方法会更好地工作。 颜色更改或添加下划线会大大改善用户体验。

样式列表的构造

很有可能您还必须在某个时候使用列表。 HTML中包含有序列表和无序列表。 这些功能非常适合在很小的空间内在线提供少量想法，产品，人员或链接。 样式与段落或标题也没有什么不同。

您的访客应该立即了解他们正在查看项目列表。 将每个列表项分开放置，并放在页面的新行中。 如果可能，在它们之间添加一些额外的空间。 这将提供一些喘息的空间，并且可以很好地显示文章文字。 如果您愿意，甚至可以将字体或缩进列表加粗一点，以使其远离标准布局边距。

不需要添加其他功能来帮助您的列表脱颖而出。 但是，如果您喜欢块布局样式，则它实际上将重点放在列表上。 您可以尝试添加浅色背景或图标。 List Apart在驯服列表上有很棒的文章，我认为其中包括一些非常有用的知识。 但是，如果要使页面内容保持线性并且仅在需要时使用列表块，则不应遇到任何设计挫折。

如何创建页内报价

这些天引文和引文的出现非常有限。 在早期的网络中，您不会看到太多使用这些元素的信息。 也许在社论，论文或教育论文中。 但是HTML5当然已经更新了一些规则，这使得引用块引用变得更加容易。

HTML5 Doctor网站提供了一个有趣的资源来讨论这个确切的主题。 他们讨论了出现在文档结构内部的块引用中内容的使用。 因此，您也可以包括标题，段落，甚至列表和页脚。

标记的主要用途是隔离您的来源或引用。 新HTML5 blockquote元素包括一个属性cite 。 您可以在此值中添加网站地址，以引用在Web语义内有效的原始报价。

设计您的标准blockquote元素不需要太多的创造力。 Forum软件经常使用出色的报价系统来处理带有浮雕背景和缩进分隔的报价。 您还会经常看到引号用作浅色背景图像，以使块元素更加有趣。

引号经常在网页中使用，甚至可以从当前文章中提取内容，并使其在文本的其余部分中脱颖而出。 使用此效果可以重复重要信息，并将其深入到读者的潜意识中。

使用自定义Web字体

通过当今的技术，可以处理访客计算机上未安装的字体。 您可以包含几行脚本来更新您的网站，使其几乎可以使用任何所需的字体类型。 有一些在线服务可以帮助您做到这一点。 最受欢迎的是易于使用的Google Web字体 ，您可以通过免费的Google帐户访问这些字体 。

作为替代的排版工具，它是一个出色的竞争对手，它提供免费计划。 您的网页每月应获得2万5千次的浏览量，并且只能访问其试用字体库 。 最高的会员访问权限是完整图书馆 ，在无限的网站上，每年需要花费49美元。

我将引导您快速完成这两种操作，首先从Typekit开始。

打字工具

首先，请注册您的免费帐户。 如果您确定要花钱，可以随时根据其他计划进行注册，但是，对于此演示，免费帐户就足够了。 几页后，您将被引导输入您的网站名称和URL。

如果您想使用脚本，请输入没有http://根域URL。 如果要在计算机上进行测试，还可以提供localhost。

完成所有设置后，您将被重定向到可以获取Web代码的页面。 页面标题仅需要两行JavaScript。 设置完毕后，点击其字体页面并开始选择您的库。 当您单击字体时，将出现一个新窗口。 从这里可以进行游戏，并为您的新字体系列添加其他选项。 这包括诸如粗体，倾斜，浅色和许多其他选项。

对于您CSS样式，Typekit将自动创建一个选择器。 默认情况下，这是一个类类型，其中包括以“ tk-”为前缀的字体名称。 因此，例如，使用Sovba，我将简单地将tk-sovba类包含在任何页面内容中。 您还可以添加特定于页面样式表的新选择器。

您现在所要做的就是在您的页面中的某处添加此类。 刷新并确保立即清除所有内容，然后清除缓存。 他们的服务器最多可能需要5-10分钟才能更新您的列表。 他们为所有WordPress用户提供了一个免费的typekit插件 ，使您的字体更加容易。

Google Web字体

网络字体是互联网搜索巨头Google提供的另一项出色服务。 他们提供了完全免费的在线大量字体。 但是请注意，它们的服务行为与TypeKit略有不同，并且实际上工作起来要容易一些。

最初，您会遇到一堵墙和许多不同的字体系列。 您应该首先选择要包含在网站中的字体，然后将它们添加到单个集合中。 保守选择，因为要占用Google服务器中的每个资源都需要大量带宽和加载时间。

尝试限制自己最多使用1-3种字体，最多使用5种字体。 选择字体后，Google会为您提供3种不同的嵌入样式：

• 经典CSS
• @import CSS，以及
• JavaScript包括

@import可以直接在您的主样式表中很好地工作。 这也将清除标题中的很多空间，最值得注意的是，因为Google的include语句将移至其他位置。 我不推荐JavaScript代码，因为它很长而且比任何一种CSS样式都要慢得多。 但是请注意，Google如何不为您创建默认选择器和类。

而是给您字体作为font-family属性的可能属性。 大多数时候，您可以按原样使用常规单引号将字体包括在内。

例如，包括字体家族Varela Round的示例如下： font-family: 'Valera Round', Helvetica, Arial, sans-serif;

这是我通过Typekit享受Google服务的一个特殊原因。 并不是说Typekit缺少选项或可用性策略。 但是Google可以提供更多类型的字体，并且您可以选择显示哪些类/ ID。 作为Web开发人员，您将获得更多的创造力和流畅的动作来构建自己认为合适的对象。

结论+资源

在我们这里讨论的许多主题中，我希望能激发您的兴趣。 网页排版是任何用户体验中极为重要的部分。 互联网是一个不断发展的平台，用于构建功能强大的Web应用程序并与世界各地的任何人进行通信。 这些资源不仅免费，而且到处都有技术专家提供广泛的支持小组。

如果您要寻找更深入的内容来介绍我，请在下面分享一些我喜欢的链接。 这些内容包括教程和一些精彩的文章，这些文章展示了与排版有关的界面设计。 网络设计创造了一种全新的氛围，以丰富而富有创意的布局吸引用户。

• WordPress排版插件可增强可读性
• 排版快速指南
• 40多种标题和标题免费字体
• CSS菜单列表设计
• 组成垂直节奏
• 32个惊人的布局和版式灵感示例
• 使用Google Fonts API轻松进行自定义Web排版
• CSS文本压印技术
• 网页排版的10条原则
• 网页设计基础：为什么排版很重要
• 网页设计中精美排版的展示
• Web字体：字体嵌入服务
• 改善网页排版的5种简单方法
• 动态文本/图像替换

翻译自: https://www.hongkiat.com/blog/typography-for-modern-websites/