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;