CSS的单位与字体属性详解

最新推荐文章于 2024-10-02 15:35:50 发布

梦葉樱

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量927

点赞数 19

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44826237/article/details/142576050

版权

CSS的单位与字体属性详解

CSS单位概述

在HTML中，单位通常是以像素（px）为主，可以省略单位；而在CSS中，单位必须明确指定，因为没有默认单位。理解CSS中的各种单位有助于更精确地控制布局和设计。

绝对单位

绝对单位是与实际物理尺寸相关的单位，主要包括以下几种：

in: 英寸 (Inches)，1英寸 = 2.54厘米
cm: 厘米 (Centimeters)
mm: 毫米 (Millimeters)
pt: 点 (Points)，1点 = 1/72英寸
pc: 皮卡 (Picas)，1皮卡 = 12点

相对单位

相对单位则是根据某个参考点进行相应计算的单位，常见的包括：

px: 像素（Pixels）
rem: 根元素（通常是 <html>）的字体大小的比例
em: 继承自父元素的字体大小，通常与12个点相等
%: 百分比，常用于相对于父元素或周围文本的大小

例如，像素（px）被称为相对单位是因为它在不同分辨率下的实际长度可能不同。即使屏幕的物理尺寸不变，不同的显示设置会使得单个像素的显示大小有所不同。

字体属性

CSS中有许多非布局样式，尤其是与字体相关的属性，包括字体、行高、颜色等。理解这些属性能够帮助我们更好地控制文本的外观。

字体属性详解

以下是常用的字体属性及其作用：

属性	描述
`font`	在一行中定义多个字体属性
`font-family`	定义元素的字体列表
`font-size`	设置文本的字体大小
`font-size-adjust`	在字体回退时保持文本可读性
`font-stretch`	选择普通、压缩或扩展的字体
`font-style`	定义文本的字体样式
`font-variant`	指定字体变体
`font-weight`	设置文本的字体粗细

示例代码

p {
    font-size: 50px;          /* 字体大小 */
    line-height: 30px;        /* 行高 */
    font-family: 幼圆, 黑体;     /* 字体类型：若没有幼圆则使用黑体 */
    font-style: italic;       /* 斜体 */
    font-weight: bold;        /* 粗体 */
    font-variant: small-caps; /* 小写变大写 */
}

行高

在CSS中，行高是影响文本垂直布局的重要属性。每个文本行都有其行高，这不仅影响文本的间距，也影响整体布局。需要注意的是，行高并不是直接作用于文本，而是作用于行盒子。

行高的计算

假设行高设定为30px，若有5行文本，整体高度为：

30px * 5 = 150px

在这种情况下，若没有显式设置p标签的高度，内容的行高会将其撑高。

垂直居中

要使单行文本垂直居中，可以将行高设置为与容器高度相等。对于多行文本，垂直居中的方法则需要计算padding。

`vertical-align` 属性

vertical-align用于指定行内元素（如图片和文本）或表格单元格的垂直对齐方式。该属性的常用值包括：

top：顶部对齐
middle：中间对齐
bottom：底部对齐

示例代码

.element {
    vertical-align: middle; /* 行内元素的垂直对齐 */
}

字号、行高、字体属性的结合使用

通常，字号、行高和字体可以结合在一起定义。格式为：

font: 加粗 字号/行高 字体

示例

font: 400 14px/24px "宋体";

在这个示例中，400表示normal（正常），700表示bold（粗体）。需要注意的是，font属性的定义至少要包括字号和字体，否则该行代码不会生效。

备选字体的使用

在定义字体时，确保提供备选字体是至关重要的。这可以避免用户没有安装特定字体时导致的样式问题。

示例代码

font-family: "微软雅黑", "宋体"; /* 备选字体 */

在上面的例子中，如果用户的计算机上没有“微软雅黑”，则会使用“宋体”。确保在字体列表中将英文字体放在前面，避免中文字体覆盖英文字体。

字体加粗属性

字体的粗细可以通过font-weight属性来设置，该属性值可以为normal、bold或特定的数字（100至900）。数字越大，字体越粗。

示例代码

.div {
    font-weight: normal; /* 常规 */
    font-weight: bold;   /* 加粗 */
    font-weight: 100;    /* 极细 */
    font-weight: 900;    /* 极粗 */
}

常见文本属性

CSS中的文本属性可以帮助我们细致控制文本的样式，常见的文本属性包括：

属性	描述
`letter-spacing`	字母间距
`word-spacing`	单词间距
`text-decoration`	文本修饰（如下划线）
`color`	字体颜色
`text-align`	文本在容器中的对齐方式（left、right、center、justify）
`text-transform`	文本大小写转换（uppercase、lowercase、capitalize）