团队的信任
考虑到搜索引擎和可访问性，格式化你的文本。
排版在网站上有很多目的——使内容清晰易读，创建一个清晰的信息层次结构，并建立一个品牌标识。
本节课，你将学习:
把标题看作是内容指南——任何人只要看一下标题就能理解你组织内容的方式，所以你要确保你的标题是清晰的、描述性的，并用于传达内容的层次结构。了解更多关于如何书写清晰、描述性的标题．
想象一下报纸的头版。在这种情况下，H1是页面上的大声明(目的)。H2s是更小的标题，适合大的陈述，而h3则更详细。
添加标题:
您可以使用CSS创建类，而不是为每个单独的标题配置排版属性。类允许您为一个标题创建样式，并将该样式应用于整个网站的其他标题。
创建一个类:
这个类将记住您所做的所有样式更改。如果更改字体或权重，类(大标题)将记住这些更改。如果要删除更改，可以重置该属性。
重用一个类:
现在当你改变一个标题时——因为你实际上是在样式化这个类——所有具有相同类的标题也会改变。
标签允许您更改文本元素的默认样式，如标题、段落和链接。应用于标记或类的任何样式更改都将影响所有相关元素，而无需单独更新它们。了解更多关于HTML标签的知识．
为标签设置样式:
您在这里所做的任何样式更改都将应用于带有该标记的每个元素(例如，所有H1标题)。
要了解更多关于如何选择排版选项的信息，查看Webflow博客上的Web排版101．
文本填充使用剪切将颜色应用到文本内部。文本填充默认使用字体颜色。
添加自定义文本填充:
当你对渐变进行更改时，它会在文本中实时更新。您可以使用此方法放置任何背景(或堆叠多个背景)。当背景被剪切为文本时，它将忽略字体颜色，并使用背景部分中的颜色。
父元素可以将文本样式信息传递给它们的子元素。您可以在父元素上设置文本样式以应用于它们的子元素，并在子元素设置中覆盖这些样式。
通常使用这种技术在body标签上设置全局字体样式，在部分内对齐文本和其他元素，并覆盖默认的链接块样式。
使用文本继承:
Body (All Pages)标记是顶级标记。对该标记的更改(如字体)将传递到您的所有文本。这是设置网站默认值的好方法。
也许您希望段落字体与默认字体不同。当您单击进入字体时，您可以看到它从Body(所有页面)标签获得提示。当您更改此字体设置时，它将应用一个新类。
当你创建一个特定的属性时，类就会自动创建——这是覆盖默认继承样式的关键。样式属性图标上的橙色指示器表示该属性有一个继承值。您可以单击橙色文本以查看从哪里继承该值。了解更多关于继承指示器的信息．
重写默认的继承样式:
现在您可以单击查看整个继承层次结构。
span是一个格式化选项，用于设置文本元素的特定部分，如单个字符或单词。
使用span:
清除span格式。
在网络上使用的许多排版单位都是以像素为单位设置的，但还有许多其他选项:
em最初是基于字体大写M. em的宽度，它们的父元素将其字体大小按比例缩放。
如果字体是16像素:
你也可以在段落的父元素上设置字体大小，比如Div块:
当父元素是20像素时:
rem是相对于HTML字体大小的。
rem是通过将rem值乘以HTML字体大小来计算的(除非您在代码中手动更改它，否则它将尊重浏览器的字体大小)。
这样做的好处是尊重浏览器的偏好(如果在浏览器上设置了自定义文本大小)，并允许网站访问者将网站放大到更舒适的观看大小，并且是可访问性的首选。了解有关使用rem进行响应式文本大小调整的更多信息．
像ems一样，percentage指的是父元素的字体大小。
VW是浏览器视口宽度的测量值，它根据视口宽度按比例缩放。
CH非常适合用于调整段落或标题之类的内容，以限制人们每行必须阅读的字符数。
例如，如果一个段落的最大宽度为60ch，它接受所选的字体(段落的字体)，并将段落的边界(它的方框)设置为等于60个零的宽度。
CH让你设置宽度当您试图限制字符数(同样，基于字体的零字符宽度)时，在文本元素上。
在网页设计时，可访问性和包容性设计是重要的考虑因素。让我们看看一些简单的地方开始使网络更容易访问和包容，当谈到排版。
单薄字体非常难以阅读——不仅在标题中，在段落中更是如此。
这也是字体中重量分布不均匀的情况-一些字符不是很容易辨认。
确保正文字体不小于16像素。
在文本块上不均匀的垂直对齐(例如，当文本居中时)会产生困难的阅读体验。锯齿状的对齐方式会让读者很难从一行到另一行。
即使你的字体很容易辨认，锯齿状的文本对齐方式也会让读者很难从一行读到下一行。
区分大写字母和小写字母的语言通常在以句子形式(例如“句子形式”)或标题形式(例如“标题形式”)书写时更容易读懂。从本质上讲，您只在需要或期望的地方使用大写来编写文本。
所有大写字母会给读者带来更沉重的认知负担，尤其是在较长的段落中。屏幕阅读器将所有的大写字母都表示为单独的字母，打断了阅读流程，让人难以理解。考虑限制在较长的文本字符串上使用所有大写字母。
全大写会给你的读者带来更重的认知负荷——考虑在较长的文本字符串上限制全大写的使用。
网络上有一种期望，带下划线的文本表示超链接。如果你想要强调，可以考虑使用斜体字或粗体字(或者用跨度来改变样式)。
使用斜体字(左)或粗体字(右)，而不是用下划线来强调(这可能会与超链接混淆)。
对比度是衡量背景和前景之间的差异。低对比度是浅灰色和深灰色之间的对比。或者栗色加红色。或者紫色加粉色。
高对比度并不意味着我们要停止考虑其他因素，比如字体粗细(一个超薄的字体，恰好与背景有高对比度，仍然非常难以辨认)。但更高的对比度通常会增加可读性，这在网络上是一件很棒的事情。
你可以使用Webflow的内置功能颜色对比度检查器评估文本与背景的对比度。你也可以检查你的设计的颜色对比，并学习更多关于这些优秀的颜色对比工具的最佳实践:
长行文字让读者感到困惑和疲劳——他们的眼睛必须从左到右移动很远。使用容器来限制文本在页面上水平跨越的距离。建议每行60到80个字符。
Stripe使用容器来限制他们的内容在页面上的跨度，这使得阅读体验更容易。
如果Stripe选择不使用容器限制其文本的跨度，那么它很快就会变得难以阅读。
我们之前讲过一种方法是将文本元素的最大宽度设置为您希望在一行中有多少个字符。记住:60ch等于60个0，无论你选择哪种字体。
有足够行高的文本会让你更容易在整页上下浏览。
你的行高应该至少是段落和文本块字体大小的1.5倍。
理想的行高应该至少是段落和文本块字体大小的1.5倍。
你的链接应该是有意义的和可操作的。屏幕阅读器可以让访问者对页面上的链接进行概述。当链接文本断章取义时，它应该告诉读者:
别:
做的事:
举个屏幕阅读器在页面上宣布无用链接的例子，请查看我们“高级网页排版”视频课程的链接部分．有关描述性链接的更多信息，访问WebAIM关于超文本链接的文章．
所有的导航都应该经过测试，不仅要测试它的外观，还要测试你如何使用屏幕阅读器与它交互。这是了解人们如何浏览你的内容的好方法。
我们在Webflow大学增加了越来越多关于可访问性和包容性设计主题的教学，所以请继续查看!
与此同时，看看我们关于如何让你的网站更容易访问的课程参加我们的可访问性课程．
