课堂笔记：CSS 文本样式、自定义字体

课堂笔记：CSS 文本样式、自定义字体与溢出处理综合示例

一、全局布局与容器样式（div）

css

div {
  font-size: 16px;          /* 默认字号16像素 */
  font-family: "微软雅黑";   /* 默认字体：微软雅黑 */
  text-indent: 2em;         /* 首行缩进2个汉字（相对字号） */
  font-weight: 900;         /* 字体粗细：900 */
  white-space: nowrap;      /* 强制不换行 */
  overflow: hidden;         /* 超出内容隐藏 */
  text-overflow: ellipsis;  /* 超出部分显示省略号 */
}

---

二、行内元素样式（span）

css

span {
  font-style: italic;
}

• font-style: italic：将文字设置为斜体。
• 在本例中，<span>根本性问题</span> 中的文字会显示为斜体。

---

三、自定义字体（@font-face）

1. 注册字体“汉呈王天喜江南手书”

css

@font-face {
  font-family: "汉呈王天喜江南手书";
  src: url(css/汉呈王天喜江南手书.TTF);
}

2. 应用该字体的选择器

css

#font {
  font-family: "汉呈王天喜江南手书";
}

知识点总结

• @font-face 规则：允许网页使用服务器上的自定义字体文件（.TTF、.woff 等）。
  • font-family：给字体起一个名字（后续通过该名字引用）。
  • src: url(路径)：指定字体文件的存放位置。
• 应用方式：通过选择器（如 #font、#f）设置 font-family 为自定义字体名称，即可让对应元素使用该字体。
• 优先级：内联样式 > ID 选择器 > 类/标签选择器。本例中 div 的默认字体是“微软雅黑”，但带有 id="font" 或 id="f" 的 div 会覆盖为自定义字体。