前端开发中,与字体相关的属性有很多,以下是一些常用的例子,并根据类别进行分组:
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
用于加载自定义字体。 选择合适的属性可以让你更好地控制文本的样式和外观,提升用户体验。