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