文本与字体

字数: 0 字 时长: 0 分钟

简介

CSS3 在文本与字体方面的设置提供了丰富的功能，允许开发者灵活地改变文本的样式、大小、颜色等属性。本文主要介绍了 CSS3 在文本与字体方面的属性.

字体属性

font-family

用于定义文本的字体系列。 可以指定一个或多个字体名称，多个字体之间用逗号隔开，浏览器会按照指定的顺序依次查找。 如果字体名称包含空格，应使用引号括起。
示例：font-family: "SimSun", "Microsoft YaHei", "SimHei", "KaiTi"

SimSun(宋体)

Microsoft YaHei(微软雅黑)

SimHei(黑体)

KaiTi(楷体)

font-size

用于设置文本的字体大小。 可以使用绝对单位（如 px、pt、em 等）或相对单位（如%、vw 等）。 也可以使用预定义的关键字（如 xx-small、x-small、small、medium、large、x-large、xx-large）来设置字体大小。
示例：font-size: 16px; 或 font-size: 1.5em;

我有28px这么大

我有14px这么大

我有屏幕的百分之一这么大

我根据根节点来变化大小

font-weight

用于设置文本的字体粗细。 可以使用关键字（如 normal、bold、bolder、lighter）或数字（100~900）来设置。 400 等同于 normal，700 等同于 bold。
示例：font-weight: bold; 或 font-weight: 700;

我有normal这么粗

我有bold这么粗

我有700这么粗

我只有100这么细

font-style

用于设置文本的字体风格。 可以使用关键字（如 normal、italic、oblique）来设置。 italic 表示斜体，通常用于英文等西方文字。
示例：font-style: italic;

normal

italic

oblique

font-variant

用于设置字体的变体，如小型大写字母（small-caps）。
示例：font-variant: small-caps;

font-stretch

用于调整字体的宽度。 可以使用关键字（如 normal、condensed、expanded）来设置。
示例：font-stretch: expanded;

@font-face

允许在 Web 页面中引用自定义字体。 需要指定字体文件的地址和字体的名称。

@font-face {
  font-family: "MyCustomFont";
  src: url("/45803.woff2") format("woff2"), url("/45803.woff") format("woff");
}

需要指定字体文件的地址和字体的名称。

文本属性

color

用于设置文本的颜色。 可以使用颜色名称、十六进制值、RGB（A）函数等方式来表示颜色。
示例：color: #333; 或 color: rgb(51, 51, 51);

这是黑色

这是红色

这是黄色

text-decoration

用于设置文本的修饰线，如下划线、删除线、上划线等。 可以使用关键字（如 none、underline、overline、line-through、blink）来设置。
示例：text-decoration: underline;

这是下划线

这是上划线

这是删除线

text-align

用于设置文本的水平对齐方式。 可以使用关键字（如 left、right、center、justify）来设置。
示例：text-align: center;

左边

中间

右边

text-indent

用于设置首行文本的缩进量。 可以使用长度单位（如 em、px）或百分比来设置。
示例：text-indent: 2em;

这是首行缩进

line-height

用于设置行高，即一行文本的高度。 可以使用长度单位（如 em、px）、百分比或数字来设置。
示例：line-height: 1.5;（表示行高是字体大小的 1.5 倍）

这是3倍行高

这是正常行高

text-transform

用于设置文本的转换方式，如大写、小写、首字母大写等。 可以使用关键字（如 none、uppercase、lowercase、capitalize）来设置。
示例：text-transform: uppercase;

acbdefg 这是大写

ACBDEFG 这是小写

abcdefg 这是首字母大写

letter-spacing

用于设置字母之间的间距。 可以使用长度单位（如 em、px）来设置。
示例：letter-spacing: 2px;

这是2px间距

text-shadow

为文本添加阴影效果。 需要指定阴影的水平偏移量、垂直偏移量、模糊半径和颜色。
示例：text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

这是阴影

text-stroke

为文本添加描边效果。 需要指定描边的宽度和颜色
示例：text-stroke: 1px black;（注意：text-stroke 并非所有浏览器都支持）
比如 Safari 和 Chrome 需要加前缀 -webkit-

这是描边

最后更新于: 2024/11/8 9:10:20