CSS文本与字体

字体属性

CSS提供了多种属性来控制文本的字体样式。良好的字体设计对用户体验和可读性至关重要。

1. font-family

定义文本的字体系列：

                        CSS
                    
                        p {
    font-family: "微软雅黑", Arial, sans-serif;
}

字体栈最佳实践：

始终提供备用字体
将通用字体系列放在最后
使用引号包含包含空格的字体名称
考虑系统字体以提高性能

2. font-size

定义文本的字体大小：

                        CSS
                    

                        p {
    font-size: 16px;
    /* 其他单位：em, rem, %, vw, vh, vmin, vmax */
}
                    

单位	描述	示例
px	像素	16px
em	相对于父元素的字体大小	1.5em
rem	相对于根元素的字体大小	1.2rem
%	相对于父元素的百分比	150%
vw	视口宽度的百分比	5vw

3. font-weight

定义字体的粗细：

                        CSS
                    

                        p {
    font-weight: bold;
    /* 或使用数字：100-900 */
}
                    

4. font-style

定义字体的样式：

                        CSS
                    

                        p {
    font-style: italic;
    /* 其他值：normal, oblique */
}
                    

5. font-variant

定义字体变体：

                        CSS
                    

                        p {
    font-variant: small-caps;
    /* 其他值：normal, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps */
}
                    

6. font-stretch

定义字体的宽度：

                        CSS
                    

                        p {
    font-stretch: condensed;
    /* 其他值：normal, ultra-condensed, extra-condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded */
}
                    

文本属性

1. color

定义文本的颜色：

                        CSS
                    

                        p {
    color: #333;
    /* 或使用颜色名称、rgb、rgba、hsl、hsla等 */
}
                    

2. text-align

定义文本的水平对齐方式：

                        CSS
                    

                        p {
    text-align: center;
    /* 其他值：left, right, justify, start, end, match-parent */
}
                    

3. line-height

定义行高：

                        CSS
                    

                        p {
    line-height: 1.6;
    /* 无单位数字表示字体大小的倍数 */
}
                    

4. text-decoration

定义文本的装饰：

                        CSS
                    

                        a {
    text-decoration: none;
    /* 其他值：underline, overline, line-through */
}

.fancy {
    text-decoration: underline wavy red;
}
                    

5. text-transform

定义文本的大小写：

                        CSS
                    

                        p {
    text-transform: uppercase;
    /* 其他值：lowercase, capitalize, full-width, full-size-kana */
}
                    

6. text-indent

定义文本首行缩进：

                        CSS
                    
                        p {
    text-indent: 2em;
}

7. letter-spacing

定义字符间距：

                        CSS
                    
                        p {
    letter-spacing: 0.1em;
}

8. word-spacing

定义单词间距：

                        CSS
                    
                        p {
    word-spacing: 0.2em;
}

9. white-space

定义空白处理方式：

                        CSS
                    

                        p {
    white-space: nowrap;
    /* 其他值：normal, pre, pre-wrap, pre-line, break-spaces */
}
                    

10. text-overflow

定义文本溢出时的处理方式：

                        CSS
                    

                        p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
                    

11. text-shadow

定义文本阴影：

                        CSS
                    
                        p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

12. direction

定义文本方向：

                        CSS
                    
                        .rtl {
    direction: rtl;
}

13. writing-mode

定义文本排列方向：

                        CSS
                    
                        .vertical {
    writing-mode: vertical-rl;
}

字体简写属性

使用font简写属性可以同时设置多个字体属性：

                        CSS
                    
                        p {
    font: italic bold 16px/1.5 "微软雅黑", sans-serif;
}

顺序为：font-style font-weight font-size/line-height font-family

Web字体

使用@font-face规则可以引入自定义字体：

                        CSS
                    

                        @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

p {
    font-family: 'MyFont', sans-serif;
}
                    

字体格式

格式	描述	文件扩展名
WOFF2	压缩率最高的现代格式	.woff2
WOFF	广泛支持的压缩格式	.woff
TTF/OTF	TrueType/OpenType字体	.ttf, .otf
EOT	Internet Explorer专用格式	.eot

字体显示策略

                        CSS
                    

                        @font-face {
    font-display: swap;
    /* 其他值：auto, block, swap, fallback, optional */
}
                    

可变字体

可变字体允许在一个文件中包含字体的多种变体：

                        CSS
                    
                        p {
    font-variation-settings: 'wght' 400, 'wdth' 100;
}

文本样式交互演示

当前字体: Arial

字体大小: 16px

字符数: 85

字体设置

字体家族: 字体大小: 16px 字体粗细:

文本布局

文本对齐: 行高: 1.6 字间距: 0px

文本效果

文本装饰: 文本转换: 字体样式:

排版的艺术

这是一段示例文本，用于演示CSS文本样式效果。良好的排版设计可以显著提升用户体验和内容可读性。通过调整上方的控件，您可以实时看到不同字体属性对文本外观的影响。

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

"好的排版是隐形的，但糟糕的排版却显而易见。"

生成的CSS代码

                            CSS
                        

                            .text-element {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    line-height: 1.6;
    letter-spacing: 0px;
    text-decoration: none;
    text-transform: none;
    font-style: normal;
}
                        

排版最佳实践

可读性指南

正文行高建议在1.4-1.6之间
标题行高可以略小，建议在1.1-1.3之间
每行字符数建议在45-75个之间
使用足够的对比度确保可读性
避免使用全大写文本作为正文

响应式排版

                        CSS
                    

                        html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 20px;
    }
}
                    

系统字体栈

                        CSS
                    
                        body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

上一课：Grid布局下一课：颜色与背景