字体排版
电子邮件基础中的字体排版旨在通过为所有最基本的字体排版元素提供简洁、美观、简单的默认样式来使您的生活更轻松。
段落
这是一个段落。段落预设了字体大小、行高和间距，以匹配整体的垂直节奏。为了说明段落的外观，这需要更多内容 - 例如，您是否知道雌性巨型鱿鱼的平均体型大约是其潜在配偶的两倍（并且大约长 10 英尺）？相当酷。使用 <strong> 和 <em> 标签来表示应该以强调方式显示或阅读的文本。浏览器将**加粗**和*斜体*显示它们，而屏幕阅读器将以*强调*方式阅读这些词。
<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content—so, did you know that female Giant Squids on average are around twice the size of (and around 10 feet longer than) their potential mates? Pretty cool. Use the `<strong>` and `<em>` tags to denote text that should be displayed or read with emphasis. Browsers will <strong>bold</strong> and <em>italicize</em> them, while screen readers will read the words with <em>emphasis</em>.</p>标题
基础包括所有标题的样式。
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6><html>
<head></head>
<body>
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>
</body>
</html>演示
标题大小
该框架包括两个字体排版比例 - 一个比例对中小尺寸屏幕使用较窄的尺寸范围，另一个比例对大尺寸屏幕使用较宽的尺寸范围。您可以通过编辑项目的 设置文件 中的 $hx-font-size 变量来更改这些比例，或为其他断点添加新比例。
| 标题 | 默认 |
|---|---|
<h1> |
34px |
<h2> |
30px |
<h3> |
28px |
<h4> |
24px |
<h5> |
20px |
<h6> |
18px |
小标题段落
通过在标题中插入 <small> 元素，Foundation 将缩小标题字体大小以用于内联元素，从而允许您将其用于字幕或其他二级标题文本。
<h3>Foundation for Emails <small>Version 2</small></h3><html>
<head></head>
<body>
<h3>Foundation for Emails <small>Version 2</small></h3>
</body>
</html>演示
链接
链接非常标准，颜色预设为 Foundation 主颜色。详细了解 Foundation 的全局颜色。
<p>Links are very standard, and the color is preset to the Foundation primary color. <a href="global.html">Learn more about Foundation's global colors.</a></p>分隔线
使用分隔线定义电子邮件中段落或部分之间的主题分隔。
<h-line></h-line>Sass 参考
变量
可以使用项目 设置文件 中的以下 Sass 变量来自定义此组件的默认样式。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$global-font-color |
颜色 | $black |
全局字体颜色。 |
$body-font-family |
字体 | Helvetica, Arial, sans-serif |
全局字体系列。 |
$global-font-weight |
关键字 | normal |
全局字体粗细。 |
$header-color |
颜色 | inherit |
标题颜色 |
$global-line-height |
数字 | 130% |
全局行高。 |
$global-font-size |
数字 | 16px |
正文文本的字体大小。 |
$body-line-height |
数字 | $global-line-height |
正文文本的行高。 |
$header-font-family |
列表 | $body-font-family |
标题的字体系列。 |
$header-font-weight |
列表 | $global-font-weight |
标题的字体系列。 |
$h1-font-size |
数字 | floor($global-font-size * 2.125) |
|
$h2-font-size |
数字 | floor($global-font-size * 1.875) |
|
$h3-font-size |
数字 | floor($global-font-size * 1.75) |
|
$h4-font-size |
数字 | floor($global-font-size * 1.5) |
|
$h5-font-size |
数字 | floor($global-font-size * 1.2) |
|
$h6-font-size |
数字 | floor($global-font-size * 1.125) |
|
$header-margin-bottom |
数字 | 10px |
|
$paragraph-margin-bottom |
数字 | 10px |
段落的下边距。 |
$small-font-size |
数字 | 80% |
|
$small-font-color |
颜色 | $medium-gray |
放置在标题内时 |
$lead-font-size |
数字 | $global-font-size * 1.25 |
引导段落的字体大小。 |
$lead-line-height |
数字 | 160% |
引导段落的行高。 |
$text-padding |
数字 | 10px |
段落内的填充。 |
$subheader-lineheight |
数字 | 1.4 |
子标题的默认行高。 |
$subheader-color |
颜色 | $dark-gray |
子标题的默认字体颜色。 |
$subheader-font-weight |
字符串 | $global-font-weight |
子标题的默认字体粗细。 |
$subheader-margin-top |
数字 | 4px |
子标题的默认上边距。 |
$subheader-margin-bottom |
数字 | 8px |
子标题的默认下边距。 |
$hr-width |
数字 | $global-width |
分隔线的最大宽度。 |
$hr-border |
列表 | 1px solid $black |
分隔线的默认边框。 |
$hr-margin |
数字或列表 | 20px |
分隔线的默认边距。 |
$hr-align |
字符串 | center |
分隔线的默认对齐方式。 |
$anchor-text-decoration |
关键字 | none |
锚点的文本装饰。 |
$anchor-color |
颜色 | $primary-color |
锚点的文本颜色。 |
$anchor-color-visited |
颜色 | $anchor-color |
已访问链接的锚点文本颜色。 |
$anchor-color-hover |
颜色 | darken($primary-color, 10%) |
悬停时锚点的文本颜色。 |
$anchor-color-active |
颜色 | $anchor-color-hover |
活动锚点的文本颜色。 |
$stat-font-size |
数字 | 40px |
统计数字的默认字体大小。 |
$remove-ios-blue |
布尔值 | true |
删除 iOS 电话和地址样式 |
混合宏
我们使用这些混合宏来构建此组件的最终 CSS 输出。您可以自己使用混合宏从我们的组件中构建自己的类结构。
h-line
@include h-line($align, $width, $border, $margin);创建分隔线/水平线。
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$align |
字符串 | 无 |
左、中或右 |
$width |
字符串 | 无 |
分隔线的宽度 |
$border |
字符串 | 无 |
分隔线的简写边框样式 |
$margin |
字符串 | 无 |
分隔线上方和下方的边距 |
