Foundation 文本

Foundation 使用浏览器默认字体大小 (<code>font-size:100%</code>)。对于大多数桌面浏览器来说，字体默认为 16px。对于大多数移动端浏览器来说，字体默认为 12px。默认的字体为 <code>"Helvetica Neue"</code>， line-height 默认为 <code>1.5</code>。

以上默认的设置均是针对 <code>&lt;body&gt;</code> 元素。

本章节我们将讨论 Foundation 的文字排列设计。

以下实例的真实样式请通过点击"尝试一下"按钮查看。

Foundation 渲染的 HTML 标题 (<code>&lt;h1&gt;</code> 到

<code>&lt;h6&gt;</code>) 如下所示:

&lt;h1&gt;h1 标题&lt;/h1&gt;

&lt;h2&gt;h2 标题&lt;/h2&gt;

&lt;h3&gt;h3 标题&lt;/h3&gt;

&lt;h4&gt;h4 标题&lt;/h4&gt;

&lt;h5&gt;h5 标题&lt;/h5&gt;

&lt;h6&gt;h6 标题&lt;/h6&gt;

提示： 如果需要创建一个浅色的标题，可以在元素上添加 <code>.subheader</code> 类:

&lt;h1 class="subheader"&gt;h1.subheader&lt;/h1&gt;

&lt;h2 class="subheader"&gt;h2.subheader&lt;/h2&gt;

&lt;h3 class="subheader"&gt;h3.subheader&lt;/h3&gt;

&lt;h4 class="subheader"&gt;h4.subheader&lt;/h4&gt;

&lt;h5 class="subheader"&gt;h5.subheader&lt;/h5&gt;

&lt;h6 class="subheader"&gt;h6.subheader&lt;/h6&gt;

在 Foundation 中， HTML <code>&lt;small&gt;</code> 元素用于创建一个浅色的副标题：

&lt;h1&gt;h1 heading &lt;small&gt;secondary text&lt;/small&gt;&lt;/h1&gt;

&lt;h2&gt;h2 heading &lt;small&gt;secondary text&lt;/small&gt;&lt;/h2&gt;

&lt;h3&gt;h3 heading &lt;small&gt;secondary text&lt;/small&gt;&lt;/h3&gt;

&lt;h4&gt;h4 heading &lt;small&gt;secondary text&lt;/small&gt;&lt;/h4&gt;

&lt;h5&gt;h5 heading &lt;small&gt;secondary text&lt;/small&gt;&lt;/h5&gt;

&lt;h6&gt;h6 heading &lt;small&gt;secondary text&lt;/small&gt;&lt;/h6&gt;

Foundation <code>&lt;a&gt;</code> 元素的样式如下所示：

&lt;p&gt;这是一个 &lt;a class="a" href="#"&gt;链接&lt;/a&gt;。&lt;/p&gt;

Foundation <code>&lt;abbr&gt;</code> 元素的样式如下所示：

&lt;p&gt;The &lt;abbr title="World Health Organization"&gt;WHO&lt;/abbr&gt; was founded in 1948.&lt;/p&gt;

Foundation <code>&lt;blockquote&gt;</code> 元素的样式如下所示：

&lt;blockquote&gt;

&lt;p&gt;学的不仅是技术，更是梦想！&lt;/p&gt;

&lt;cite&gt;菜鸟教程&lt;/cite&gt;

&lt;/blockquote&gt;

Foundation <code>&lt;dl&gt;</code> 元素的样式如下所示：

&lt;dl&gt;

&lt;dt&gt;Coffee&lt;/dt&gt;

&lt;dd&gt;- black hot drink&lt;/dd&gt;

&lt;dt&gt;Milk&lt;/dt&gt;

&lt;dd&gt;- white cold drink&lt;/dd&gt;

&lt;/dl&gt;

Foundation <code>&lt;code&gt;</code> 元素的样式如下所示：

&lt;p&gt;以下 HTML 元素: &lt;code&gt;span&lt;/code&gt;, &lt;code&gt;section&lt;/code&gt;, 和 &lt;code&gt;div&lt;/code&gt; 是文档的一部分。&lt;/p&gt;

Foundation <code>&lt;kbd&gt;</code> 元素的样式如下所示：

&lt;p&gt;按下 &lt;kbd&gt;ctrl + p&lt;/kbd&gt; 键打开打印窗口。&lt;/p&gt;

Foundation <code>&lt;hr&gt;</code> 元素的样式如下所示：

&lt;hr&gt;