css （2）文本与字体样式_<p>字体大小和字体样式默认是多少-优快云博客

本文链接：https://blog.youkuaiyun.com/zcy_inspire/article/details/106963407

字体颜色、类型与大小

字体颜色 color

通过 color 属性指定字体的颜色

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>字体颜色</title>
  <style type="text/css">
    p {font-size: 25px;}
    .main {color:lightslategray}
    .error {color: brown}
    .info {color:mediumseagreen}
  </style>
</head>
<body>
  <p class="main">这是一行段落。</p>
  <p class="error">这是一行段落。</p>
  <p class="info">这是一行段落。</p>
</body>
</html>

字体类型 font-family

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

字体系列

CSS中，有两种类型的字体系列：

通用字体系列 - 有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）；
特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”）。

使用CSS设置字体属性：

.times {
  font-family: "Times New Roman";
}
.georgia {
  font-family: "Georgia";
}
.arial {
  font-family: "Arial";
}
.courier {
  font-family: "Courier New";
}
.lucida {
  font-family: "Lucida Console";
}

字体栈

使用字体栈 (font stack)给浏览器提供多种选择。例如：

font-family: "Trebuchet MS", Verdana, sans-serif;

使用字体栈时，浏览器从列表的第一个开始检查，该字体在当前计算机浏览器中是否可用。如果可用，就应用该字体。如果不可用，它就移到列表中的下一个字体，然后再检查。指定的字体都不可用时，便会使用浏览器的默认字体。

字体大小 font-size

在CSS中，我们通过 font-size 属性设置文本的大小。通常文字的大小应该协调一致。

常用单位

设置字体大小时，会使用到不同的单位。下面，我们来了解几种设置字体的常用单位。

像素
像素即px ，将像素赋值给文本大小。它是一个绝对单位，所以在不同大小设备上，页面上的文本所计算出来的像素值都是一样的。

em
em的方式可以解决在部分Internet Explorer 中无法调整文本。
浏览器中默认的文字大小是16 px，1 em代表与当前字体大小相等。
em 单位与像素转换公式为：
16px=1em

百分比结合em
为body元素设置默认大小时，可以使用百分百，同样是相对于16px

字体粗细与风格

字体粗细 font-weight

font-weight设置的数值在100~900之间，分为9级加粗度。有些字体会内置加粗的级别。例如100 对应最细的字体，900 对应最粗的字体； 400对应normal·，而 700 则等价于 bold。
另外，设置值为lighter, bolder代表将当前元素的粗体设置为比其父元素粗体更细或更粗一步。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>字体粗细</title>
  <style type="text/css">
  #normal {
    font-weight: 400;
  }
  #light {
    font-weight: 100;
  }
  </style>
</head>
<body>
  <h1>Blod: 温馨提示 </h1>
  <p id="normal">Normal: 少一串脚印，多一份绿意。</p>
  <p id="light">Light: 保护环境，从我做起。light</p>
</body>
</html>

字体风格 font-style

我们在设置斜体文本时使用 font-style 属性。
它属性有三个值：

normal - 文本正常显示；

italic - 文本斜体显示；

oblique - 文本倾斜显示。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>字体风格</title>
  <style type="text/css">
    p {font-size: 25px;}
    .normal {font-style:normal}
    .italic {font-style:italic}
    .oblique {font-style:oblique}
  </style>
</head>
<body>
  <p class="normal">This is a normal paragraph.</p>
  <p class="italic">This is a italic paragraph.</p>
  <p class="oblique">This is a oblique paragraph.</p>
</body>
</html>

文本装饰与文本布局

文本装饰与文本布局

我们使用text-decoration设置字体上的文本装饰。
其可用值有：

none: 取消已经存在的任何文本装饰；

underline: 文本下划线；

overline: 文本上划线；

line-through: 贯穿文本的线；

blink：闪烁文本。

使用时，可以根据需求，同时添加多个装饰值。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>文本装饰</title>
  <style type="text/css">
    a {
      text-decoration: none;
    }
    p {
      text-decoration: line-through;
      color: gray;
    }
  </style>
</head>
<body>
  <p>你好，欢迎学习educoder平台的<a href="#">CSS实训课程</a>。</p>
</body>
</html>

文本对齐 text-align

left: 左对齐文本；

right: 右对齐文本；

center: 居中文字；

justify: 水平对齐，改变单词之间的差距，使所有文本行的宽度相同。

行高 line-height

我们使用line-height 属性来设置行高。
注意：行高属性值不能为负。
其可用值有：

normal：默认。设置合理的行间距；

number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距；

length：设置固定的行间距；

%：基于当前字体尺寸的百分比行间距；

inherit：从父元素继承 line-height 属性的值。

<html>
<head>
    <style type="text/css">
        p.small {
            line-height: 90%
        }
        p.big {
            line-height: 200%
        }
    </style>
</head>
<body>
    <p>
        标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 标准行高的段落。 标准行高的段落。 标准行高的段落。 标准行高的段落。 标准行高的段落。
    </p>
    <p class="small">
        本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。
    </p>
    <p class="big">
        本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。
    </p>
</body>
</html>

效果如下：
在这里插入图片描述
字符间距和字间距 letter-spacing word-spacing

letter-spacing 属性用于控制字符间的间隔多少；
其可用值有：

normal：默认值，字符间没有额外的间隔；

length：定义字符间的固定间隔（可以为负值）；

inherit：从父元素继承 letter-spacing 属性的值。

同样的，word-spacing 属性用于控制字与字的间隔多少。
其可用值有：

normal：默认；

length：定义字之间的固定间隔；

inherit：从父元素继承 word-spacing 属性的值。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>letter & word spacing</title>
    <style>
        h1 {
            letter-spacing: 2px;
        }
        h2 {
            letter-spacing: -3px;
        }
        p {
            word-spacing: 30px;
        }
    </style>
</head>
<body>
    <h1> 这是标题一 This is heading 1</h1>
    <h2> 这是标题二 This is heading 2</h2>
    <p>这是一些文本。This is some text.</p>
</body>
</html>