CSS 属性

目录

• 文本相关属性
  • 字体属性（Font）
  • 文本属性（Text）
  • 文本溢出处理
• 几点建议

---

文本相关属性

字体属性（Font）

1. font-family（字体系列）

p {
    /* 按优先级排序，如果第一个字体不可用，则使用第二个，以此类推 */
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

2. font-size（字体大小）

/* 常用的字体大小设置方式 */
.text {
    font-size: 16px;          /* 像素 */
    font-size: 1.2em;         /* 相对于父元素的倍数 */
    font-size: 1.2rem;        /* 相对于根元素的倍数 */
    font-size: 120%;          /* 百分比 */
}

3. font-weight（字体粗细）

.text {
    font-weight: normal;      /* 正常粗细 */
    font-weight: bold;        /* 粗体 */
    font-weight: 400;         /* 正常 */
    font-weight: 700;         /* 加粗 */
}

4. font-style（字体样式）

.text {
    font-style: normal;       /* 正常 */
    font-style: italic;       /* 斜体 */
    font-style: oblique;      /* 倾斜体 */
}

5. font 复合写法

/* 顺序：font-style font-weight font-size/line-height font-family */
.text {
    font: italic bold 16px/1.5 "Microsoft YaHei", Arial;
}

文本属性（Text）

1. color（文本颜色）

.text {
    color: red;                /* 颜色关键字 */
    color: #ff0000;           /* 十六进制 */
    color: rgb(255,0,0);      /* RGB */
    color: rgba(255,0,0,0.5); /* RGBA带透明度 */
}

2. text-align（文本对齐）

.text {
    text-align: left;         /* 左对齐 */
    text-align: center;       /* 居中对齐 */
    text-align: right;        /* 右对齐 */
    text-align: justify;      /* 两端对齐 */
}

3. text-decoration（文本装饰）

.text {
    text-decoration: none;           /* 无装饰 */
    text-decoration: underline;      /* 下划线 */
    text-decoration: line-through;   /* 删除线 */
    text-decoration: overline;       /* 上划线 */
}

4. text-indent（首行缩进）

.text {
    text-indent: 2em;         /* 缩进2个文字大小 */
    text-indent: 20px;        /* 缩进20像素 */
}

5. line-height（行高）

.text {
    line-height: 1.5;         /* 1.5倍行高 */
    line-height: 20px;        /* 固定行高 */
    line-height: 150%;        /* 相对于字体大小的百分比 */
}

文本溢出处理

1. 单行文本溢出显示省略号

.single-line {
    white-space: nowrap;      /* 不换行 */
    overflow: hidden;         /* 溢出隐藏 */
    text-overflow: ellipsis;  /* 显示省略号 */
}

2. 多行文本溢出显示省略号

.multi-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;    /* 显示行数 */
    overflow: hidden;
}

几点建议

• font-family 记得带后备字体，中文字体写在英文字体前面
• 正文行高 1.5 到 1.8 比较舒服，标题可以紧一点，1.3 左右
• 中文正文一般 12-14px，标题 16-24px
• 响应式场景下优先用 rem、em 这类相对单位，少用 px