• web前端-html-css-字体(字体的样式，字体的分类，字体其他样式，字体简写样式，文本样式)

    文章目录

    字体的样式

    DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    <style type="text/css">
      .p1 {
        font-size: 30px;
        font-family: "curlz mt";
      }
    style>
  head>
  <body>
    <p class="p1">我是一个p标签，ABCDEFGabcdefgp>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    请添加图片描述

    1. 字体颜色

    • 设置字体颜色,使用 color 来设置文字的颜色
    .p1 {
  color: red;
}

    • 1
    • 2
    • 3

    2. 文字大小

    1. 设置文字的大小,浏览器中一般默认的文字代销都是 16px
      • font-size 设置的并不是文字本身的大小，
    2. 在页面中，每个文字都是处在一个看不见的框中的
      • 我们设置的 font-size 实际上是设计的格的高度，并不是字体的大小
    3. 一般情况下文字都要比格要小一些，也有时会比格大
      • 根据字体不同，显示效果也不同
    .p1 {
  font-size: 30px;
}

    • 1
    • 2
    • 3

    3. 字体

    1. 通过 font-family 可以指定文字的字体
    2. 当采用某种字体时，如果浏览器支持使用该字体，
      • 如果字体不支持，则使用默认字体
    3. 该样式可以同时指定多个字体，多个字体之间使用,分开
      • 当采用多个字体时，浏览器会优先使用前边的字体，
      • 如果前边没有再尝试下一个
    .p1 {
  font-family: arial, 微软雅黑;
}

    • 1
    • 2
    • 3
    1. 浏览器使用的字体默认就是计算机中的字体，
      • 如果计算机中有，则使用，如果没有就不用
    2. 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，
      • 有可能用户的电脑里没有，就不能达到想要的效果，
    .p1 {
  /*font-family: 华文彩云 , arial , 微软雅黑;*/
  font-family: "curlz mt";
}

    • 1
    • 2
    • 3
    • 4

    字体的其他样式

    DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    <style type="text/css">
      .p1 {
        color: red;
        font-size: 30px;
        font-family: "微软雅黑";
        font-style: oblique;

        font-weight: bold;
        font-variant: small-caps;
      }

      .p2 {
        /*设置一个文字大小*/
        font-size: 50px;
        /*设置一个字体*/
        font-family: 华文彩云;
        /*设置文字的斜体*/
        font-style: italic;
        /*设置文字的加粗*/
        font-weight: bold;
        /*设置一个小型大写字母*/
        font-variant: small-caps;
      }

      .p3 {
        font: small-caps bold italic 60px "微软雅黑";
      }
    style>
  head>
  <body>
    <p class="p3">我是一段文字，ABCDEFGabcdefgp>

    <p class="p1">我是一段文字，ABCDEFGabcdefgp>

    <p class="p2">我是一段文字，ABCDEFGabcdefgp>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    请添加图片描述

    1. font-style

    1. font-style 可以用来设置字体的斜体
    2. 可选值：
      • normal 默认值，文字正常显示
      • italic 文字会以斜体显示
      • oblique 文字会以倾斜的效果显示
    3. 大部分浏览器都不会对倾斜和斜体做区分，
      • 也就是说我们设置 italic 和 oblique 他们的效果往往是一样的
    4. 一般我们只会使用 italic
    .p1 {
  font-style: oblique;
}

    • 1
    • 2
    • 3

    2. font-weight

    1. font-weight 可以用来设置文本的加粗效果
    2. 可选值：
      • normal 默认值，文字正常显示
      • bold 文字加粗显示
    3. 该样式也可以指定 100-900 之间的 9 个值
      • 但是由于用户的计算机中往往没有这么多级别的字体，所以达不到我们想要的效果
      • 也就是 200 有可能比 100 粗，300 有可能比 200 粗，但是也可能是一样的
    .p1 {
  font-weight: bold;
}

    • 1
    • 2
    • 3

    3. font-variant

    1. font-variant 可以用来设置小型大写字母
    2. 可选值：
      • normal 默认值，文字正常显示，
      • small-caps 文字以小型大写字母显示
    3. 小型大写字母：
      • 将所有的字母都以大写形式显示，但是小写字母的大写
      • 要比大写字母的大小要小一些。
    .p1 {
  font-variant: small-caps;
}

    • 1
    • 2
    • 3

    4. font

    1. 在 CSS 中还为我们提供了一个样式叫 font，
      • 使用该样式可以同时设置字体相关的所有样式，
      • 可以将字体的样式的值，统一写在 font 样式中，不同的值之间使用空格隔开
    2. 使用 font 设置字体样式时，斜体 加粗 小大字母 没有顺序要求，甚至可写可不写
      • 如果不写则使用默认值,但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
      • 大小必须是倒数第二个样式
      • 实际上使用简写属性也会有一个比较好的性能
    3. 对比
    • 分开设置
    .p2 {
  /*设置一个文字大小*/
  font-size: 50px;
  /*设置一个字体*/
  font-family: 华文彩云;
  /*设置文字的斜体*/
  font-style: italic;
  /*设置文字的加粗*/
  font-weight: bold;
  /*设置一个小型大写字母*/
  font-variant: small-caps;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • font 设置
    .p3 {
  font: small-caps bold italic 60px "微软雅黑";
}

    • 1
    • 2
    • 3

    字体的分类

    DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    <style type="text/css">
      p {
        font-family: arial, 微软雅黑, 华文彩云, serif;
      }
    style>
  head>
  <body>
    <p style="font-size: 50px; font-family: serif;">
      衬线字体：我是一段文字， ABCDEFGabcdefg
    p>
    <p style="font-size: 50px; font-family: san-serif;">
      非衬线字体：我是一段文字，ABCDEFGabcdefg
    p>
    <p style="font-size: 50px; font-family: monospace;">
      等宽字体：我是一段文字，IHABCDEFGabcdefg
    p>
    <p style="font-size: 50px; font-family: cursive;">
      草书字体：我是一段文字，ABCDEFGabcdefg
    p>
    <p style="font-size: 50px; font-family: fantasy;">
      虚幻字体：我是一段文字，ABCDEFGabcdefg
    p>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    请添加图片描述

    1. 说明

    1. 在网页中将字体分成了 5 大类：
      • serif (衬线字体)
      • sans-serif (非衬线字体)
      • monospace (等宽字体)
      • cursive (草书字体)
      • fantasy (虚幻字体)
    2. 可以将字体设置为这些大的分类,当设置为大的分类以后，
      • 浏览器会自动选择指定的字体并应用样式
    3. 一般会将字体的大分类，指定为 font-family 中的最后一个字体
    <p style="font-size: 50px; font-family: serif;">
  衬线字体：我是一段文字，ABCDEFGabcdefg
p>
<p style="font-size: 50px; font-family: san-serif;">
  非衬线字体：我是一段文字，ABCDEFGabcdefg
p>
<p style="font-size: 50px; font-family: monospace;">
  等宽字体：我是一段文字，IHABCDEFGabcdefg
p>
<p style="font-size: 50px; font-family: cursive;">
  草书字体：我是一段文字，ABCDEFGabcdefg
p>
<p style="font-size: 50px; font-family: fantasy;">
  虚幻字体：我是一段文字，ABCDEFGabcdefg
p>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    字体的其他样式

    DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    <style type="text/css">
      .p1 {
        color: red;
        font-size: 30px;
        font-family: "微软雅黑";
        font-style: oblique;

        font-weight: bold;
        font-variant: small-caps;
      }

      .p2 {
        /*设置一个文字大小*/
        font-size: 50px;
        /*设置一个字体*/
        font-family: 华文彩云;
        /*设置文字的斜体*/
        font-style: italic;
        /*设置文字的加粗*/
        font-weight: bold;
        /*设置一个小型大写字母*/
        font-variant: small-caps;
      }

      .p3 {
        font: small-caps bold italic 60px "微软雅黑";
      }
    style>
  head>
  <body>
    <p class="p3">我是一段文字，ABCDEFGabcdefgp>

    <p class="p1">我是一段文字，ABCDEFGabcdefgp>

    <p class="p2">我是一段文字，ABCDEFGabcdefgp>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    请添加图片描述

    1. font-style

    1. font-style 可以用来设置字体的斜体
    2. 可选值：
      • normal 默认值，文字正常显示
      • italic 文字会以斜体显示
      • oblique 文字会以倾斜的效果显示
    3. 大部分浏览器都不会对倾斜和斜体做区分，
      • 也就是说我们设置 italic 和 oblique 他们的效果往往是一样的
    4. 一般我们只会使用 italic
    .p1 {
  font-style: oblique;
}

    • 1
    • 2
    • 3

    2. font-weight

    1. font-weight 可以用来设置文本的加粗效果
    2. 可选值：
      • normal 默认值，文字正常显示
      • bold 文字加粗显示
    3. 该样式也可以指定 100-900 之间的 9 个值
      • 但是由于用户的计算机中往往没有这么多级别的字体，所以达不到我们想要的效果
      • 也就是 200 有可能比 100 粗，300 有可能比 200 粗，但是也可能是一样的
    .p1 {
  font-weight: bold;
}

    • 1
    • 2
    • 3

    3. font-variant

    1. font-variant 可以用来设置小型大写字母
    2. 可选值：
      • normal 默认值，文字正常显示，
      • small-caps 文字以小型大写字母显示
    3. 小型大写字母：
      • 将所有的字母都以大写形式显示，但是小写字母的大写
      • 要比大写字母的大小要小一些。
    .p1 {
  font-variant: small-caps;
}

    • 1
    • 2
    • 3

    4. font

    1. 在 CSS 中还为我们提供了一个样式叫 font，
      • 使用该样式可以同时设置字体相关的所有样式，
      • 可以将字体的样式的值，统一写在 font 样式中，不同的值之间使用空格隔开
    2. 使用 font 设置字体样式时，斜体 加粗 小大字母 没有顺序要求，甚至可写可不写
      • 如果不写则使用默认值,但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
      • 大小必须是倒数第二个样式
      • 实际上使用简写属性也会有一个比较好的性能
    3. 对比
    • 分开设置
    .p2 {
  /*设置一个文字大小*/
  font-size: 50px;
  /*设置一个字体*/
  font-family: 华文彩云;
  /*设置文字的斜体*/
  font-style: italic;
  /*设置文字的加粗*/
  font-weight: bold;
  /*设置一个小型大写字母*/
  font-variant: small-caps;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • font 设置
    .p3 {
  font: small-caps bold italic 60px "微软雅黑";
}

    • 1
    • 2
    • 3

    文本样式

    DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    <style type="text/css">
      .p1 {
        text-transform: lowercase;
      }
      .p2 {
        text-decoration: line-through;
      }
      a {
        text-decoration: none;
      }
      .p3 {
        word-spacing: 120px;
      }
      .p4 {
        text-align: justify;
      }
      .p5 {
        font-size: 20px;
        text-indent: -99999px;
      }
    style>
  head>
  <body>
    <p class="p5">
      在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
      这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地〖目夹〗着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花上。
      我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
      枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼〖目夹〗眼；直刺着天空中圆满的月亮，使月亮窘得发白。
      鬼〖目夹〗眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地〖目夹〗着许多蛊惑的眼睛。
      哇的一声，夜游的恶鸟飞过了。
    p>
    <h1 class="p4">我是一个h1h1>
    <p class="p4">
      在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
      这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地〖目夹〗着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花上。
      我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
      枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼〖目夹〗眼；直刺着天空中圆满的月亮，使月亮窘得发白。
      鬼〖目夹〗眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地〖目夹〗着许多蛊惑的眼睛。
      哇的一声，夜游的恶鸟飞过了。
    p>
    <p class="p4">
      We should start back, Gared urged as the woods began to grow dark around
      them. The wildlings are dead.
    p>
    <p class="p3">
      在 我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
      这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地〖目夹〗着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花上。
      我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
      枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼〖目夹〗眼；直刺着天空中圆满的月亮，使月亮窘得发白。
      鬼〖目夹〗眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地〖目夹〗着许多蛊惑的眼睛。
      哇的一声，夜游的恶鸟飞过了。
    p>
    <p class="p3">
      We should start back, Gared urged as the woods began to grow dark around
      them. The wildlings are dead.
    p>
    <a href="#">我是超链接a>
    <p class="p2">
      We should start back, Gared urged as the woods began to grow dark around
      them. The wildlings are dead.
    p>
    <p class="p1">
      We should start back, Gared urged as the woods began to grow dark around
      them. The wildlings are dead.
    p>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    请添加图片描述

    1. text-transform

    1. text-transform 可以用来设置文本的大小写
    2. 可选值：
      • none 默认值，该怎么显示就怎么显示，不做任何处理
      • capitalize 单词的首字母大写，通过空格来识别单词
      • uppercase 所有的字母都大写
      • lowercase 所有的字母都小写
    .p1 {
  text-transform: lowercase;
}

    • 1
    • 2
    • 3

    2. text-decoration

    1. text-decoration 可以用来设置文本的修饰
    2. 可选值；
      • none：不添加任何修饰，正常显示
      • underline 为文本添加下划线
      • overline 为文本添加上划线
      • line-through 为文本添加删除线
    .p2 {
  text-decoration: line-through;
}

    • 1
    • 2
    • 3
    1. 去除超链接的下划线
      • 超链接会默认添加下划线，也就是超链接的 text-decoration 的默认值是 underline
      • 如果需要去除超链接的下划线，则需要将该样式设置为 none
    a {
  text-decoration: none;
}

    • 1
    • 2
    • 3

    3. letter-spacing 和 word-spacing

    1. letter-spacing 可以指定字符间距
    .p3 {
  letter-spacing: 10px;
}

    • 1
    • 2
    • 3
    1. word-spacing 可以设置单词的之间的距离
      • 实际上就是设置词与词之间空格的大小
    .p3 {
  word-spacing: 120px;
}

    • 1
    • 2
    • 3

    4. text-align

    1. text-align 用于文本的对齐方式
    2. 可选值：
      • left 默认值，文本靠左对齐
      • right , 文本靠右对齐
      • center , 文本居中对齐
      • justify , 两端对齐

      通过调整文本之间的空格的大小，来达到一个两端对齐的目的

    .p4 {
  text-align: justify;
}

    • 1
    • 2
    • 3

    5. text-indent

    1. text-indent 用来设置首行缩进
      • 当给它指定一个正值时，会自动向右侧缩进指定的像素
    2. 如果为它指定一个负值，则会向左移动指定的像素,
      • 通过这种方式可以将一些不想显示的文字隐藏起来
      • 这个值一般都会使用 em 作为单位
    .p5 {
  font-size: 20px;
  text-indent: -99999px;
}

    • 1
    • 2
    • 3
    • 4
  • 相关阅读:
    借助第三方工具网站完成消息自动推送
    详解 ElasticSearch 基础教程
    vue-devtools安装后显示vue.js not detected
    Hive面试题系列第一题-连续登录问题
    通过S2B2C供应链电商平台网站解决方案，实现大宗商品万亿产业数字化转型
    《虹口区促进元宇宙产业发展的试行办法》的通知
    LitePal操作数据库
    二叉树的基础讲解
    C++学习——构造函数、析构函数
    ES6之数组解构
  • 原文地址：https://blog.csdn.net/weixin_64933233/article/details/127971611