Foundation 文本

Foundation 默认设置

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

以上默认的设置均是针对元素。

---

Foundation 文字排列设计

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

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

---

-

Foundation 渲染的 HTML 标题 (

到

) 如下所示:

实例

          
  
 
标题
 
标题不同元素字体大小不一样。以下字体默认加粗，不同设备尺寸显示的字体也是不一样的，你可以通过重置浏览器窗口大小查看效果。
 
h1 标题 (2.125rem - 2.75rem)
 
h2 标题 (1.6875rem - 2.3125rem)
 
h3 标题 (1.375rem - 1.6875rem)
 
h4 标题 (1.125rem - 1.4375rem)
 
h5 标题 (1.125rem)
 
h6 标题 (1rem)
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

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

实例

          
  
 
副标题
 
 .subheader 类让标题的文本颜色变浅。
 
h1.subheader
 
h2.subheader
 
h3.subheader
 
h4.subheader
 
h5.subheader
 
h6.subheader
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

---

在 Foundation 中， HTML元素用于创建一个浅色的副标题：

实例

          
  
 
Small
 
small 元素用于创建一个浅色的副标题。
 
h1 heading secondary text
 
h2 heading secondary text
 
h3 heading secondary text
 
h4 heading secondary text
 
h5 heading secondary text
 
h6 heading secondary text
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

---

实例

          
  
 
链接
 
Foundation 的 链接样式。
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

---

Foundation元素的样式如下所示：

实例

          
  
 
Abbreviations
 
abbr 元素用于标签指示简称或缩写。
 
The WHO was founded in 1948.
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

---

Foundation

元素的样式如下所示：

实例

          
  
 
引用
 
blockquote 元素用于定义块引用。
 
 
 php中文网
 php中文网 
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

---

Foundation

元素的样式如下所示：

实例

          
  
 
描述列表
 
dl 元素用于定义一个描述性列表：
 
 
Coffee
 
- black hot drink
 
Milk
 
- white cold drink
 
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

---

Foundation元素的样式如下所示：

实例

          
  
 
Code 片段
 
代码片段展示可以使用 code 元素:
 
以下 HTML 元素: span, section, 和 div 是文档的一部分。
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

---

Foundation元素的样式如下所示：

实例

          
  
 
键盘输入
 
使用 kbd 元素来接收键盘的输入指令:
 
按下 ctrl + p 键打开打印窗口。
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例

---

---

Foundation

---

元素的样式如下所示：

实例

          
  
 
水平线
 
Foundation 中 hr 元素是灰色的。
 
 
  

运行实例 »

点击 "运行实例" 按钮查看在线实例