Font | Last Stand

什么是 font 属性？在CSS中， font 属性是一个简写属性，用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。 font 属性的语法 font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family]; 各个属性的详细说明 font-style：设置字体的样式。取值： normal：正常字体（默认值）。 italic：斜体字。 oblique：倾斜字体。 font-variant：设置字体的变体。取值： normal：正常（默认值）。 small-caps：小型大写字母。 font-weight：设置字体的粗细。取值： normal：正常粗细（默认值）。 bold：加粗。 bolder：比父元素更粗。 lighter：比父元素更细。数值：可以使用 100 到 900 的数值，100 为最细，900 为最粗。 font-size：设置字体的大小。取值：可以使用绝对单位（如 px、 pt）或相对单位（如 em、 rem、 %）。 line-height：设置行高。取值：可以使用数值、单位（如 px、 em）或百分比。 font-family：设置字体系列。取值：可以指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。例如： "Arial", "Helvetica", sans-serif。使用 font 属性的注意事项 font 属性必须按照特定的顺序书写，尤其是 font-size 和 font-family，它们是必需的。如果使用 font 属性，其他相关的字体属性（如 font-size 和 font-family）不能单独设置。实例：使用 font 属性设置文本样式 HTML 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Font 属性示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="title">欢迎来到我的网站</h1> <p class="description">这是一个关于CSS字体属性的示例，展示如何使用font属性设置文本样式。</p> </body> </html> CSS 代码（styles.css） body { font-family: Arial, sans-serif; /* 设置全局字体 */ } .title { font: bold 24px/1.5 "Helvetica Neue", Arial, sans-serif; /* 设置标题字体样式 */ color: #333; /* 字体颜色 */ } .description { font: italic normal 16px/1.8 "Georgia", serif; /* 设置描述文本字体样式 */ color: #666; /* 字体颜色 */ } 解释 HTML结构：我们创建了一个包含标题和描述的简单网页。 CSS样式：在 .title 类中，使用 font 属性设置了字体为加粗、24px大、行高为1.5、字体系列为 "Helvetica Neue"，后备字体为 Arial 和无衬线字体。在 .description 类中，使用 font 属性设置了字体为斜体、正常粗细、16px大、行高为1.8、字体系列为 "Georgia"，后备字体为衬线字体。结果通过以上代码，浏览器将展示一个标题和描述文本，标题为加粗大字体，描述为斜体较小字体。这样可以清晰地展示不同文本的样式和视觉层次感。 ...