CSS（三）：Font（字体）属性

CSS Font（字体）属性用于定义字体系列、大小、粗细、和文字样式等。

font-family（字体系列）

CSS使用font-family属性定义文本的字体系列。

基本语法

p {
    font-family: '微软雅黑';
}
div {
    /* 如果写了多个字体会按照从左到右的顺序在浏览器中查找字体，如果没有第一种字体，会按照第二种字体显示，以此类推，如果都没有，会显示系统默认的字体 */
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}
  • 各个字体之间必须使用英文逗号隔开
  • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正常显示
  • 最常见的几个字体：body{font-family: 'Microsoft YaHei', tahoma, Arial, 'Hiragino Sans GB'}
  • 一般情况下，指定body标签的字体，因为页面内容一般在body标签内

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS字体属性之字体系列</title>
        <style>
         h2 {
             font-family: '微软雅黑';
         }
         p {
            /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
            font-family: 'Times New Roman', Times, serif;
         }
        </style>
    </head>
    <body>
        <h2>pure3417的秘密</h2>
        <p>那一抹众人中最漂亮的颜色,</p>
        <p>优雅,淡然,又那么心中清澈.</p>
        <p>前端总是伴随着困难和犯错,</p>
        <p>静心,坦然,攻克一个又一个.</p>
        <p>拼死也要克服它,</p>
    </body>
</html>

font-size（字体大小）

CSS使用font-size属性定义字体大小

基本语法

p {
    font-size: 20px;
}
  • px（像素）大小是我们网页中最常使用的单位
  • 谷歌浏览器默认文字大小为16px
  • 不同的浏览器可能默认显示的字体大小不一致，我们尽量给一个明确的大小，不要默认大小
  • 可以给body指定整个页面文字的大小

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS字体属性之字体大小</title>
    <style>
        body {
            font-size: 16px;
        }
        /* 标题标签比较特殊,需要单独指定文字大小 */
        h2 {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>pure3417的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p>拼死也要克服它,</p>
</body>
</html>

font-weight（字体粗细）

CSS使用font-weight属性设置文本字体的粗细。

基本语法

p {
    font-weight: 属性值;
}
常用属性值 描述
normal 默认值（不加粗的）
bodl 定义粗体（加粗的）
number(100~900) 400相当于normal，700相当于bold。注意这个数字后面不跟单位
  • 实际开发中，我们更喜欢用数字表示粗细

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS字体属性之字体大小</title>
        <style>
           .bold {
               /* font-weight: bold; */
               /* 这个700 的后面不要跟单位  等价于 bold 都是加粗的效果 */
               /* 实际开发中,我们更提倡使用数字 表示加粗或者变细 */
               font-weight: 700;    
           }
           h2 {
               font-weight: 400;   
               /* font-weight: normal;    */
           }
        </style>
    </head>
    <body>
        <h2>pure3417的秘密</h2>
        <p>那一抹众人中最漂亮的颜色,</p>
        <p>优雅,淡然,又那么心中清澈.</p>
        <p>前端总是伴随着困难和犯错,</p>
        <p>静心,坦然,攻克一个又一个.</p>
        <p>拼死也要克服它,</p>
    </body>
</html>

font-style（字体风格）

CSS使用font-style属性设置文本的风格。

基本语法

p {
    font-style: 属性值;
}
常用属性值 作用
normal 默认值
italic 斜体

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS字体属性之文字样式(风格)</title>
        <style>
          p {
              font-style: italic;
          }
          em {
              /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
              font-style: normal;
          }
        </style>
    </head>
    <body>
        <p>同学,上课时候的你</p>
        <!-- em 斜体标签 -- >
        <em>下课时候的你</em>
    </body>
</html>

复合样式

字体属性可以把以上文字样式综合来写，这样可以更节约代码。

基本语法

body {
    font: font-style  font-weight  font-size/line-height  font-family;
}
  • 使用font属性时，必须按照上面语法格式总的顺序书写，不能更换顺序，并且各个属性之间以空格隔开。
  • 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family，否则font属性将不起作用。

示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS字体属性之复合属性</title>
        <style>
           /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
           div {
               /* font-style: italic;
               font-weight: 700;
               font-size: 16px;
               font-family: 'Microsoft yahei'; */
               /* 复合属性: 简写的方式  节约代码 */
               /* font: font-style  font-weight  font-size/line-height  font-family; */
               /* font: italic 700 16px 'Microsoft yahei'; */
               font: 20px '黑体';
           }
        </style>
    </head>
    <body>
       <div>三生三世十里桃花,一心一意百行代码</div>
    </body>
</html>

总结

属性 表示 注意点
font-size 字号 常用的单位是px（像素），单位一定要跟上
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 加粗是700或者bold
不加粗是normal或者400
数字不要跟单位
font-style 字体样式 倾斜是italic
不倾斜是normal
工作中常用normal
font 复合样式（字体连写） 字体连写有顺序，不能随意换位置
其中字体，字号必须有
posted @   pure3417  阅读(607)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？
点击右上角即可分享
微信分享提示