css常用font字体属性是什么

CSS常用Font字体属性是什么

在网页设计中，字体（Font）的选择和样式设置是至关重要的。CSS（层叠样式表）提供了丰富的字体属性，允许开发者精确控制文本的外观。本文将详细介绍CSS中常用的字体属性，包括字体族、字体大小、字体粗细、字体样式、字体变体、字体颜色、行高、字间距、字母间距、文本装饰、文本对齐、文本缩进、文本转换、文本阴影等。通过深入理解这些属性，您将能够创建出更具吸引力和可读性的网页。

1. 字体族（Font Family）

字体族属性用于指定文本的字体。CSS允许您指定一个或多个字体族名称，浏览器会按照顺序尝试加载这些字体。如果第一个字体不可用，浏览器会尝试加载第二个字体，依此类推。

1.1 基本语法

font-family: "字体名称", "备用字体", "通用字体族";

1.2 示例

body {
    font-family: "Arial", "Helvetica", sans-serif;
}

在这个例子中，浏览器会首先尝试加载Arial字体。如果Arial不可用，它会尝试加载Helvetica。如果Helvetica也不可用，浏览器会使用默认的无衬线字体（sans-serif）。

1.3 通用字体族

CSS定义了五种通用字体族，用于在特定字体不可用时提供备用选项：

1. serif：衬线字体，如Times New Roman。
2. sans-serif：无衬线字体，如Arial。
3. monospace：等宽字体，如Courier New。
4. cursive：手写体，如Comic Sans MS。
5. fantasy：装饰性字体，如Impact。

1.4 注意事项

• 字体名称如果包含空格或特殊字符，需要用引号括起来。
• 建议在字体族列表的最后指定一个通用字体族，以确保在所有情况下都有可用的字体。

2. 字体大小（Font Size）

字体大小属性用于设置文本的大小。CSS提供了多种单位来定义字体大小，包括像素（px）、百分比（%）、em、rem、点（pt）等。

2.1 基本语法

font-size: 大小值;

2.2 示例

h1 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

2.3 常用单位

• px：像素，绝对单位，1px等于屏幕上的一个像素点。
• em：相对单位，基于当前元素的字体大小。1em等于当前元素的字体大小。
• rem：相对单位，基于根元素（html）的字体大小。1rem等于根元素的字体大小。
• %：百分比，相对于父元素的字体大小。
• pt：点，常用于打印样式，1pt等于1/72英寸。

2.4 注意事项

• 使用相对单位（如em、rem）可以使字体大小更具响应性，适应不同设备和屏幕尺寸。
• 避免使用过小的字体大小，以确保文本的可读性。

3. 字体粗细（Font Weight）

字体粗细属性用于设置文本的粗细程度。CSS提供了多种值来定义字体粗细，包括数字值和关键字。

3.1 基本语法

font-weight: 粗细值;

3.2 示例

h1 {
    font-weight: bold;
}

p {
    font-weight: 400;
}

3.3 常用值

• normal：正常粗细，相当于400。
• bold：加粗，相当于700。
• bolder：比父元素更粗。
• lighter：比父元素更细。
• 100-900：数字值，100最细，900最粗。

3.4 注意事项

• 并非所有字体都支持所有粗细值。如果指定的粗细值不可用，浏览器会选择一个最接近的值。
• 使用数字值可以更精确地控制字体粗细。

4. 字体样式（Font Style）

字体样式属性用于设置文本的样式，如斜体或正常。

4.1 基本语法

font-style: 样式值;

4.2 示例

em {
    font-style: italic;
}

strong {
    font-style: normal;
}

4.3 常用值

• normal：正常样式。
• italic：斜体样式。
• oblique：倾斜样式（类似于斜体，但通常用于没有斜体版本的字体）。

4.4 注意事项

• 并非所有字体都支持斜体样式。如果指定的样式不可用，浏览器会使用正常样式。

5. 字体变体（Font Variant）

字体变体属性用于设置文本的小型大写字母（small-caps）样式。

5.1 基本语法

font-variant: 变体值;

5.2 示例

h1 {
    font-variant: small-caps;
}

5.3 常用值

• normal：正常样式。
• small-caps：小型大写字母样式。

5.4 注意事项

• 小型大写字母样式会将所有字母转换为大写，但小写字母会显示为较小的大写字母。
• 并非所有字体都支持小型大写字母样式。

6. 字体颜色（Color）

字体颜色属性用于设置文本的颜色。CSS提供了多种方式来定义颜色，包括颜色名称、十六进制值、RGB值、RGBA值、HSL值、HSLA值等。

6.1 基本语法

color: 颜色值;

6.2 示例

h1 {
    color: #ff0000;
}

p {
    color: rgba(0, 0, 255, 0.5);
}

6.3 常用颜色表示方法

• 颜色名称：如red、blue、green等。
• 十六进制值：如#ff0000（红色）、#00ff00（绿色）、#0000ff（蓝色）。
• RGB值：如rgb(255, 0, 0)（红色）、rgb(0, 255, 0)（绿色）、rgb(0, 0, 255)（蓝色）。
• RGBA值：如rgba(255, 0, 0, 0.5)（半透明红色）。
• HSL值：如hsl(0, 100%, 50%)（红色）。
• HSLA值：如hsla(0, 100%, 50%, 0.5)（半透明红色）。

6.4 注意事项

• 使用RGBA或HSLA值可以设置文本的透明度。
• 确保文本颜色与背景颜色有足够的对比度，以提高可读性。

7. 行高（Line Height）

行高属性用于设置文本行与行之间的垂直间距。行高可以影响文本的可读性和整体布局。

7.1 基本语法

line-height: 行高值;

7.2 示例

p {
    line-height: 1.5;
}

h1 {
    line-height: 2;
}

7.3 常用值

• normal：默认行高，通常为1.2。
• 数字值：如1.5、2等，表示行高为字体大小的倍数。
• 长度值：如20px、1.5em等，表示具体的行高值。
• 百分比：如150%，表示行高为字体大小的百分比。

7.4 注意事项

• 使用数字值可以使行高更具响应性，适应不同字体大小。
• 适当的行高可以提高文本的可读性和美观性。

8. 字间距（Letter Spacing）

字间距属性用于设置文本中字符之间的间距。字间距可以影响文本的紧凑程度和可读性。

8.1 基本语法

letter-spacing: 间距值;

8.2 示例

h1 {
    letter-spacing: 2px;
}

p {
    letter-spacing: -1px;
}

8.3 常用值

• normal：默认字间距。
• 长度值：如2px、-1px等，表示具体的字间距值。

8.4 注意事项

• 正值的字间距会增加字符之间的间距，负值的字间距会减少字符之间的间距。
• 适当的字间距可以提高文本的可读性和美观性。

9. 字母间距（Word Spacing）

字母间距属性用于设置文本中单词之间的间距。字母间距可以影响文本的紧凑程度和可读性。

9.1 基本语法

word-spacing: 间距值;

9.2 示例

h1 {
    word-spacing: 5px;
}

p {
    word-spacing: -2px;
}

9.3 常用值

• normal：默认字母间距。
• 长度值：如5px、-2px等，表示具体的字母间距值。

9.4 注意事项

• 正值的字母间距会增加单词之间的间距，负值的字母间距会减少单词之间的间距。
• 适当的字母间距可以提高文本的可读性和美观性。

10. 文本装饰（Text Decoration）

文本装饰属性用于设置文本的装饰效果，如下划线、删除线、上划线等。

10.1 基本语法

text-decoration: 装饰值;

10.2 示例

a {
    text-decoration: underline;
}

del {
    text-decoration: line-through;
}

10.3 常用值

• none：无装饰效果。
• underline：下划线。
• overline：上划线。
• line-through：删除线。
• blink：闪烁效果（不推荐使用）。

10.4 注意事项

• 文本装饰效果可以组合使用，如text-decoration: underline overline;。
• 闪烁效果（blink）在现代浏览器中通常不被支持，且不推荐使用。

11. 文本对齐（Text Align）

文本对齐属性用于设置文本的水平对齐方式。文本对齐可以影响文本的布局和可读性。

11.1 基本语法

text-align: 对齐方式;

11.2 示例

h1 {
    text-align: center;
}

p {
    text-align: justify;
}

11.3 常用值

• left：左对齐。
• right：右对齐。
• center：居中对齐。
• justify：两端对齐。

11.4 注意事项

• 两端对齐（justify）会使文本在左右两端对齐，但可能会导致单词间距不均匀。
• 居中对齐（center）通常用于标题或短文本。

12. 文本缩进（Text Indent）

文本缩进属性用于设置文本块中第一行的缩进量。文本缩进可以影响文本的布局和可读性。

12.1 基本语法

text-indent: 缩进值;

12.2 示例

p {
    text-indent: 2em;
}

12.3 常用值

• 长度值：如2em、20px等，表示具体的缩进值。
• 百分比：如10%，表示缩进值为父元素宽度的百分比。

12.4 注意事项

• 文本缩进通常用于段落的第一行，以创建视觉上的层次感。
• 负值的缩进可以使文本向左缩进，但可能会影响可读性。

13. 文本转换（Text Transform）

文本转换属性用于设置文本的大小写转换效果。文本转换可以影响文本的外观和可读性。

13.1 基本语法

text-transform: 转换方式;

13.2 示例

h1 {
    text-transform: uppercase;
}

p {
    text-transform: capitalize;
}

13.3 常用值

• none：无转换效果。
• uppercase：将所有字母转换为大写。
• lowercase：将所有字母转换为小写。
• capitalize：将每个单词的首字母转换为大写。

13.4 注意事项

• 文本转换效果不会改变文本的实际内容，只会影响其显示方式。
• 适当使用文本转换可以提高文本的可读性和美观性。

14. 文本阴影（Text Shadow）

文本阴影属性用于设置文本的阴影效果。文本阴影可以增强文本的视觉效果和层次感。

14.1 基本语法

text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

14.2 示例

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

14.3 常用值

• 水平偏移：阴影的水平偏移量，正值向右，负值向左。
• 垂直偏移：阴影的垂直偏移量，正值向下，负值向上。
• 模糊半径：阴影的模糊程度，值越大，阴影越模糊。
• 颜色：阴影的颜色，可以使用任何有效的颜色值。

14.4 注意事项

• 文本阴影可以组合使用，如text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);。
• 适当的文本阴影可以增强文本的视觉效果，但过度使用可能会影响可读性。

15. 字体拉伸（Font Stretch）

字体拉伸属性用于设置字体的宽度。字体拉伸可以影响文本的外观和可读性。

15.1 基本语法

font-stretch: 拉伸值;

15.2 示例

h1 {
    font-stretch: condensed;
}

p {
    font-stretch: expanded;
}

15.3 常用值

• normal：正常宽度。
• ultra-condensed：极度紧缩。
• extra-condensed：非常紧缩。
• condensed：紧缩。
• semi-condensed：半紧缩。
• semi-expanded：半扩展。
• expanded：扩展。
• extra-expanded：非常扩展。
• ultra-expanded：极度扩展。

15.4 注意事项

• 并非所有字体都支持所有拉伸值。如果指定的拉伸值不可用，浏览器会选择一个最接近的值。
• 字体拉伸通常用于特殊设计需求，如标题或标志。

16. 字体合成（Font Synthesis）

字体合成属性用于控制浏览器是否合成粗体或斜体字体。字体合成可以影响文本的外观和可读性。

16.1 基本语法

font-synthesis: 合成值;

16.2 示例

h1 {
    font-synthesis: none;
}

p {
    font-synthesis: weight style;
}

16.3 常用值

• none：禁止合成粗体或斜体字体。
• weight：允许合成粗体字体。
• style：允许合成斜体字体。
• weight style：允许合成粗体和斜体字体。

16.4 注意事项

• 字体合成通常用于控制浏览器在缺少粗体或斜体字体时的行为。
• 禁止字体合成可以确保文本的外观与设计一致，但可能会影响可读性。

17. 字体特征设置（Font Feature Settings）

字体特征设置属性用于控制OpenType字体的高级特性。字体特征设置可以影响文本的外观和可读性。

17.1 基本语法

font-feature-settings: 特征值;

17.2 示例

h1 {
    font-feature-settings: "liga" 1, "dlig" 1;
}

17.3 常用值

• liga：启用标准连字。
• dlig：启用离散连字。
• smcp：启用小型大写字母。
• c2sc：启用大写字母到小型大写字母的转换。
• tnum：启用表格数字。
• onum：启用旧式数字。

17.4 注意事项

• 字体特征设置通常用于控制OpenType字体的高级特性，如连字、小型大写字母等。
• 适当的字体特征设置可以提高文本的美观性和可读性。

18. 字体变体数字（Font Variant Numeric）

字体变体数字属性用于控制数字的显示方式。字体变体数字可以影响文本的外观和可读性。

18.1 基本语法

font-variant-numeric: 变体值;

18.2 示例

p {
    font-variant-numeric: oldstyle-nums;
}

18.3 常用值

• normal：正常数字显示。
• lining-nums：使用衬线数字。
• oldstyle-nums：使用旧式数字。
• proportional-nums：使用比例数字。
• tabular-nums：使用表格数字。
• diagonal-fractions：使用斜线分数。
• stacked-fractions：使用堆叠分数。
• ordinal：使用序数标记。
• slashed-zero：使用斜线零。

18.4 注意事项

• 字体变体数字通常用于控制数字的显示方式，如旧式数字、比例数字等。
• 适当的字体变体数字可以提高文本的美观性和可读性。

19. 字体变体位置（Font Variant Position）

字体变体位置属性用于控制上下标字符的位置。字体变体位置可以影响文本的外观和可读性。

19.1 基本语法

font-variant-position: 变体值;

19.2 示例

sup {
    font-variant-position: super;
}

sub {
    font-variant-position: sub;
}

19.3 常用值