举例说明跟字体相关的属性有哪些？

前端开发中，与字体相关的属性有很多，以下是一些常用的例子，并根据类别进行分组：

1. 字体家族 (font-family): 指定元素的字体。可以指定多个字体，浏览器会按顺序尝试使用，直到找到可用的字体。

• 例子：font-family: Arial, Helvetica, sans-serif; (首先尝试 Arial，如果不可用则尝试 Helvetica，最后尝试 sans-serif 通用字体)
• font-family: "Times New Roman", Times, serif; (指定 Times New Roman 字体)
• font-family: monospace; (使用等宽字体)

2. 字体大小 (font-size): 指定字体的大小。

• 例子：font-size: 16px; (使用像素单位)
• font-size: 1em; (使用 em 单位，相对于父元素的字体大小)
• font-size: 100%; (使用百分比，相对于父元素的字体大小)
• font-size: large; (使用预定义的关键字，例如 small, medium, large, x-large 等)

3. 字体粗细 (font-weight): 指定字体的粗细。

• 例子：font-weight: bold; (加粗)
• font-weight: normal; (正常)
• font-weight: lighter; (更细)
• font-weight: 400; (正常, 与 normal 相同)
• font-weight: 700; (加粗, 与 bold 相同)
• font-weight: 100; - 900; (以 100 为增量，数值越大字体越粗)

4. 字体样式 (font-style): 指定字体的样式。

• 例子：font-style: italic; (斜体)
• font-style: normal; (正常)
• font-style: oblique; (倾斜，与 italic 类似，但效果可能因浏览器而异)

5. 行高 (line-height): 指定文本行的高度。

• 例子：line-height: 1.5; (行高为字体大小的 1.5 倍)
• line-height: 20px; (使用像素单位)
• line-height: 150%; (使用百分比，相对于字体大小)

6. 字体变体 (font-variant): 控制小型大写字母的使用。

• 例子：font-variant: small-caps; (小型大写字母)
• font-variant: normal; (正常)

7. 字体拉伸 (font-stretch): 控制字体的拉伸或压缩。

• 例子：font-stretch: condensed; (压缩)
• font-stretch: expanded; (拉伸)
• font-stretch: ultra-condensed; (极度压缩)
• font-stretch: ultra-expanded; (极度拉伸)
• font-stretch: normal; (正常) (支持程度有限)

8. font 简写属性: 可以同时设置多个字体属性。

• 例子: font: italic bold 16px/1.5 Arial, sans-serif; (设置样式、粗细、大小、行高和字体系列)

一些其他的字体相关属性：

• text-align: 文本对齐方式 (left, right, center, justify)
• text-decoration: 文本装饰 (underline, overline, line-through, none)
• text-transform: 文本转换 (uppercase, lowercase, capitalize)
• text-shadow: 文本阴影
• color: 文本颜色

这些只是一些常用的字体相关属性，还有其他一些更高级的属性可以用于更精细的控制，例如 @font-face 用于加载自定义字体。 选择合适的属性可以让你更好地控制文本的样式和外观，提升用户体验。