CSS: CSS 文本与字体

<style>
p {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
</style>
<p>这是一个段落示例。</p>
<p style="font-family: Arial, sans-serif;">Arial 字体演示</p>

<style>
h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}
.small {
  font-size: 0.875em; /* 相对于父元素字体的0.875倍 */
}
</style>
<h1>一级标题</h1>
<p>这是一个段落示例。</p>
<div class="small">小号字体文本</div>

<style>
.bold {
  font-weight: bold;     /* 粗体，等同于700 */
}
.normal {
  font-weight: normal;   /* 正常，等同于400 */
}
.light {
  font-weight: 300;      /* 细体 */
}
.heavy {
  font-weight: 900;      /* 更粗 */
}
</style>
<div class="bold">加粗字体文本</div>
<div class="normal">正常字重文本</div>
<div class="light">细体字重文本</div>
<div class="heavy">特粗字重文本</div>

<style>
.italic {
  font-style: italic;    /* 斜体 */
}
.normal {
  font-style: normal;    /* 正常 */
}
</style>
<div class="italic">斜体文字样式</div>
<div class="normal">正常字重文本</div>

<style>
p {
  line-height: 1.8;      /* 数字，相对于字体大小 */
}
.article {
  line-height: 1.6;      /* 正文推荐行高 */
}
.tight {
  line-height: 1.2;      /* 紧凑 */
}
</style>
<p>这是一个段落示例。</p>
<div class="article">这是一段文章内容，展示了文本排列效果</div>
<div class="tight">字间距紧凑的文本</div>

<style>
p {
  font: italic bold 16px/1.8 "Microsoft YaHei", sans-serif;
}
</style>
<p>这是一个段落示例。</p>
<span class="demo-italic">斜体文字</span>
<span class="demo-bold">粗体文字</span>

<style>
@font-face {
  font-family: "myfont";
  src: url("/assets/fonts/myfont.woff2") format("woff2"),
       url("/assets/fonts/myfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: "myfont", sans-serif;
}
</style>
<p>@font-face 用于加载自定义字体，需要配合实际字体文件才能看到效果。</p>

<style>
p {
  color: #333;       /* 深灰色，正文常用 */
}
h1 {
  color: #e74c3c;   /* 红色标题 */
}
</style>
<p>这是一个段落示例。</p>
<h1>一级标题</h1>

<style>
.left {
  text-align: left;      /* 左对齐（默认） */
}
.center {
  text-align: center;    /* 居中对齐 */
}
.right {
  text-align: right;     /* 右对齐 */
}
.justify {
  text-align: justify;   /* 两端对齐 */
}
</style>
<div class="left">左对齐文本内容</div>
<div class="center">水平居中的内容</div>
<div class="right">右对齐文本内容</div>
<div class="justify">两端对齐文本内容，自动调整词间距</div>

<style>
.underline {
  text-decoration: underline;        /* 下划线 */
}
.overline {
  text-decoration: overline;         /* 上划线 */
}
.line-through {
  text-decoration: line-through;     /* 删除线 */
}
.none {
  text-decoration: none;             /* 无装饰，常用于去掉链接下划线 */
}

/* 也可以组合更多样式 */
.fancy {
  text-decoration: underline wavy red 2px;  /* 红色波浪下划线 */
}
</style>
<div class="underline">带有下划线的文字</div>
<div class="overline">带有上划线的文字</div>
<div class="line-through">带有删除线的文字</div>
<div class="none">无</div>
<div class="fancy">艺术装饰文字</div>
<span class="demo-underline">下划线文字</span>
<span class="demo-wavy">波浪线装饰</span>
<span class="demo-red">红色文本</span>

<style>
p {
  text-indent: 2em;  /* 首行缩进2个字符 */
}
</style>
<p>这是一个段落示例。</p>

<style>
.spread {
  letter-spacing: 2px;    /* 加大间距 */
}
.tight {
  letter-spacing: -1px;   /* 缩小间距 */
}
</style>
<div class="spread">字间距较大的文本</div>
<div class="tight">字间距紧凑的文本</div>

<style>
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* 文字阴影 */
  /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

/* 多层阴影 */
h1 {
  text-shadow: 1px 1px 2px red, 0 0 5px blue;
}
</style>
<h1>一级标题</h1>
<span class="demo-red">红色文本</span>

<style>
.nowrap {
  white-space: nowrap;      /* 不换行 */
}
.pre {
  white-space: pre;         /* 保留空白和换行（类似<pre>标签） */
}
</style>
<div class="nowrap">不换行的长文本内容</div>
<div class="pre">保留格式
  的文本</div>

<style>
.ellipsis {
  white-space: nowrap;       /* 不换行 */
  overflow: hidden;          /* 超出隐藏 */
  text-overflow: ellipsis;   /* 用省略号表示被截断的文本 */
}
</style>
<div class="ellipsis">这是一段超长文本，超出部分将被省略号截断</div>

<style>
.article-card {
  font-family: "宋体", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  text-indent: 2em;
}

.article-card h2 {
  font: bold 24px/1.4 "Microsoft YaHei", sans-serif;
  color: #2c3e50;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.article-card .read-more {
  color: #3498db;
  text-decoration: none;
}

.article-card .read-more:hover {
  text-decoration: underline;
}
</style>
<div class="article-card">Article card</div>
<span class="demo-New">字体名称</span>
<div class="article-card">Article card</div>
<h2>二级标题</h2>
<span class="demo-bold">粗体文字</span>
<div class="article-card">Article card</div>
<div class="read-more">点击此处展开阅读完整内容</div>
<div class="article-card">Article card</div>
<div class="read-more">点击此处展开阅读完整内容</div>