本站-预览

本文主要用作样式预览，比如查看自定义的字体和图标效果、页面的局部布局调整、个别 HMTL 元素的样式改变，一般都是通过引入或改写 CSS 规则来进行的样式优化工作。本文也包含了一些常见的标点符号。

一、Markdown 样式预览

标题

这篇文章本身已经包含了 H1-H4 四级标题，故此不再重复提供示例。

段落

这里是自然段落的样式：

Soundfreaq is a brand dedicated to delivering high-quality audio experiences through its range of award-winning speakers and sound systems. Designed by music lovers for music lovers, Soundfreaq offers products that balance clarity, bass impact, and portability.

Their lineup includes Bluetooth speakers, alarm clocks, and hotel-friendly audio solutions, such as the Sound Rise II and Sound Spot II, which provide immersive sound in compact designs. Whether for home, travel, or professional use, Soundfreaq ensures that music is always accessible and enjoyable.

强调

这里是一段包含强调的文字：

Soundfreaq is a brand dedicated to delivering high-quality audio experiences through its range of award-winning speakers and sound systems. Designed by music lovers for music lovers, Soundfreaq offers products that balance clarity, bass impact, and portability.

这里是一段包含加粗的文字：

Their lineup includes Bluetooth speakers, alarm clocks, and hotel-friendly audio solutions, such as the Sound Rise II and Sound Spot II, which provide immersive sound in compact designs. Whether for home, travel, or professional use, Soundfreaq ensures that music is always accessible and enjoyable.

这里是一段包含加粗和 强调加粗 的文字：

Soundfreaq offers stylish and compact Bluetooth speakers with a focus on clear sound and balanced bass. Compared to other brands, here are some key differences:

Sound Quality: Soundfreaq speakers generally provide true stereo separation, which is rare in budget-friendly portable speakers. However, they may not deliver the deep bass that brands like JBL or Bose are known for.
Features: Some Soundfreaq models include AUX inputs, remote controls, and Wi-Fi support, which can be useful for different listening setups. However, they may lack waterproofing and advanced connectivity options found in brands like Anker or Ultimate Ears.

以下内容用于对所选字体在各种样式下的表现进行预览：

- regular
- _italic_
- **bold**
- **_bold italic_**
- 正常中文
- _斜体中文_
- **粗体中文**
- **_粗斜体_**

引用

引用区块内部的段落没有外边距，所以自己添加了一个 CSS 样式，给第 2 个往后的段落添加了顶部外边距。调整以后的样式：

Soundfreaq is a brand dedicated to delivering high-quality audio experiences through its range of award-winning speakers and sound systems. Designed by music lovers for music lovers, Soundfreaq offers products that balance clarity, bass impact, and portability.
Their lineup includes Bluetooth speakers, alarm clocks, and hotel-friendly audio solutions, such as the Sound Rise II and Sound Spot II, which provide immersive sound in compact designs. Whether for home, travel, or professional use, Soundfreaq ensures that music is always accessible and enjoyable.

代码

这里通过 VitePress 提供的 Markdown 语法，直接在 Markdown 文档内单独起一行，通过使用下面语法：

<<< @/.vitepress/theme/index.ts

可以将同一项目中的代码文件，引入到文档。更详细的使用方法，请参考 VitePress 导入代码片段的官方文档。下面代码主要展示代码块的样式：

// .vitepress/theme/index.ts
// 1.组件导入
import Teek from "vitepress-theme-teek";

// 2.样式导入
import "vitepress-theme-teek/index.css";

// 3.引入 VitePress 样式增强 和 Teek 样式增强
import "vitepress-theme-teek/theme-chalk/tk-sidebar.css"; // 侧边栏字体样式
import "vitepress-theme-teek/theme-chalk/tk-nav.css"; // 导航栏样式
import "vitepress-theme-teek/theme-chalk/tk-nav-blur.css"; // 导航栏毛玻璃样式
import "vitepress-theme-teek/theme-chalk/tk-aside.css"; // 文章目录样式
import "vitepress-theme-teek/theme-chalk/tk-doc-h1-gradient.css"; // 文档以及标题样式
import "vitepress-theme-teek/theme-chalk/tk-mark.css"; // 文章 mark 标签样式
// import "vitepress-theme-teek/theme-chalk/tk-index-rainbow.css";
// import "vitepress-theme-teek/theme-chalk/tk-doc-fade-in.css";
import "vitepress-theme-teek/theme-chalk/tk-banner-desc-gradient.css";

// 4.Import your own custom css files
import "./style/index.css";

export default {
  extends: Teek,
};

链接

这里添加了一个页内锚点，跳转至标题部分。

列表

无序列表

SFQ-01 Sound Platform
SFQ-02 Sound Step
SFQ-03 Sound Stack
SFQ-04 Sound Kick
SFQ-16 Sound Rise II
- Black
- Wood Taupe

有序列表

SFQ-01 Sound Platform
SFQ-02 Sound Step
SFQ-03 Sound Stack
SFQ-04 Sound Kick
SFQ-16 Sound Rise II
- Retail Edition
- Hotel Edition

任务列表

任务列表的支持和渲染由 Teek 提供，列表项前面的小方框由一个 <input> 元素生成，样式由 .todo .todo-checkbox 提供。任务列表的默认样式，跟上面的无序列表和有序列表会有明显的向右偏移，需要自行调整位置。待解决。

SFQ-01 Sound Platform
SFQ-02 Sound Step
SFQ-03 Sound Stack
SFQ-04 Sound Kick

表格

WEB 标准	作用
结构	用于对网页元素进行整理和分类，主要包括 XML 和 XHTML 两个部分
表现	用于设置网页元素的版式、颜色、大小等外观样式，主要指的是 CSS
行为	用于对网页模型的定义及交互的编写，主要包括 DOM 和 ECMAScript 两个部分

分隔线

自定义容器

输入：

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

输出：

INFO

This is an info box.

TIP

This is a tip.

WARNING

This is a warning.

DANGER

This is a dangerous warning.

Details

This is a details block.

VitePress 默认的折叠框样式比较原始，还好可以通过自定义样式实现美化。下面给出了两种折叠框的使用实例，注意对比一下二者的样式差异。

1、HTML 原生的 <details> 折叠框

输入：

<details>
  <summary>Details</summary>
  <p>Something small enough to escape casual notice.</p>
</details>

输出：

Details

Something small enough to escape casual notice.

2、VitePress 提供的 details 折叠框

输入：

::: details How to turn off the Alarm on Sound Rise SFQ-08?

When Alarm 1 is set (with the Alarm 1 icon displayed), short pressing the Alarm 1 button will display the alarm setting for approximately 6 seconds and then return to the current time.

To cancel Alarm 1, press the Alarm 1 button once to display the alarm setting and press the Alarm 1 button again within the 6 seconds before the current time is displayed. `OFF` will be displayed briefly, then the current time will return. The Alarm 1 icon will now disappear.

:::

输出：

How to turn off the Alarm on Sound Rise SFQ-08?

When Alarm 1 is set (with the Alarm 1 icon displayed), short pressing the Alarm 1 button will display the alarm setting for approximately 6 seconds and then return to the current time.

To cancel Alarm 1, press the Alarm 1 button once to display the alarm setting and press the Alarm 1 button again within the 6 seconds before the current time is displayed. OFF will be displayed briefly, then the current time will return. The Alarm 1 icon will now disappear.

高亮

输入：

使用 Markdown 语法生成的 ==高亮文字==

使用 `<mark>` 标签生成的 <mark>高亮文字</mark>

输出：

使用 Markdown 语法生成的 ==高亮文字==

使用 <mark> 标签生成的高亮文字

二、英文样式预览

引号

Em Dash

三、中文样式预览

方引号

破折号

四、中英混排预览

五、图标预览

通过在 .vitepress/theme/style/font.css 内引入 iconfont 资源，使用图标。

css

/* import fonts from online resources, normally Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");

/* import fonts from your website, typically in the public folder */
@font-face {
  font-family: "TsukuARdGothic Std";
  src: url("/fonts/筑紫A丸/TsukuARdGothic Std Regular.ttf") format("truetype");
  /* font-weight: 400; */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TsukuARdGothic Std";
  src: url("/fonts/筑紫A丸/TsukuARdGothic Std Bold.ttf") format("truetype");
  /* font-weight: 700; */
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --vp-font-family-base:
    -apple-system, BlinkMacSystemFont, "Source Sans 3", "PingFang SC", "TsukuARdGothic Std", "Inter", ui-sans-serif, system-ui,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

:root {
  --vp-font-family-mono:
    "JetBrainsMonoNL Nerd Font", "JetBrains Mono", "Consolas", ui-monospace, "Menlo", "Monaco", "Liberation Mono", "Courier New",
    "YouYuan", monospace;
}

:root {
  --vp-code-font-size: 0.8rem;
}

/* import iconfont for color icons */
@font-face {
  font-family: "iconfont"; /* Project id 4324356 */
  src:
    url("//at.alicdn.com/t/c/font_4324356_g4ss22n1n8i.woff2?t=1748576187919") format("woff2"),
    url("//at.alicdn.com/t/c/font_4324356_g4ss22n1n8i.woff?t=1748576187919") format("woff"),
    url("//at.alicdn.com/t/c/font_4324356_g4ss22n1n8i.ttf?t=1748576187919") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-cengji:before {
  content: "\e67f";
}
.icon-conmulu:before {
  content: "\e6c5";
}
.icon-mulu:before {
  content: "\e60a";
}
.icon-icon_Contents:before {
  content: "\e652";
}
.icon-dianzan:before {
  content: "\e63f";
}
.icon-aixin:before {
  content: "\e640";
}

方法一：引用类名使用图标，适合在 CSS 文件内使用

输入：

<i class="iconfont icon-cengji"></i>
<i class="iconfont icon-conmulu"></i>
<i class="iconfont icon-mulu"></i>
<i class="iconfont icon-icon_Contents"></i>
<i class="iconfont icon-dianzan"></i>
<i class="iconfont icon-aixin"></i>

输出：

方法二：引用 Unicode 编号 使用图标，适合在 Markdown 文档内使用

输入：

<i class="iconfont">&#xe67f;</i>
<i class="iconfont">&#xe6c5;</i>
<i class="iconfont">&#xe60a;</i>
<i class="iconfont">&#xe652;</i>
<i class="iconfont">&#xe63f;</i>
<i class="iconfont">&#xe640;</i>

输出：



本站-预览 ​

一、Markdown 样式预览 ​

标题 ​

段落 ​

强调 ​

引用 ​

代码 ​

链接 ​

列表 ​

无序列表 ​

有序列表 ​

任务列表 ​

表格 ​

分隔线 ​

自定义容器 ​

高亮 ​

二、英文样式预览 ​

引号 ​

Em Dash ​

三、中文样式预览 ​

方引号 ​

破折号 ​

四、中英混排预览 ​

五、图标预览 ​