MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

CSS文本样式：color、font-size、font-family和text-align的配置

2024-12-122.2k 阅读

CSS 文本样式之 color

在前端开发中，color属性是用于设置文本颜色的关键样式。它不仅可以改变文字的视觉效果，还能在很大程度上影响整个页面的视觉风格和信息传达。

1. color 的取值方式

  • 关键字方式：CSS 预定义了一系列颜色关键字，例如red（红色）、blue（蓝色）、green（绿色）、black（黑色）、white（白色）等。这些关键字简单直观，便于开发者快速设置常见颜色。
p {
  color: red;
}

上述代码将<p>标签内的文本颜色设置为红色。

  • 十六进制表示法：这是一种以#开头，后跟 6 位十六进制数字的颜色表示方式。前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。例如，#FF0000表示红色，因为红色分量为最大值FF（十进制的 255），而绿色和蓝色分量为 0。
h1 {
  color: #00FF00;
}

此代码会把<h1>标签的文本设置为绿色。

  • RGB 函数表示法：rgb()函数接受三个参数，分别代表红色、绿色和蓝色的强度值，取值范围是 0 - 255 或 0% - 100%。例如，rgb(255, 0, 0)表示红色，rgb(0, 100%, 0)同样表示绿色。
span {
  color: rgb(0, 0, 255);
}

这样会让<span>标签内的文本呈现蓝色。

  • RGBA 函数表示法：rgba()函数是rgb()函数的扩展，增加了一个透明度参数a，取值范围是 0 - 1，0 表示完全透明，1 表示完全不透明。例如，rgba(255, 0, 0, 0.5)表示半透明的红色。
div {
  color: rgba(0, 255, 0, 0.3);
}

在这个例子中，<div>标签内的文本将是带有一定透明度的绿色，这种透明度设置在很多场景下，比如创建与背景有融合效果的文本时非常有用。

  • HSL 函数表示法：hsl()函数通过色相（Hue）、饱和度（Saturation）和亮度（Lightness）来定义颜色。色相取值范围是 0 - 360，表示颜色在色轮上的位置；饱和度和亮度取值范围是 0% - 100%。例如，hsl(0, 100%, 50%)表示红色，因为色相为 0 对应红色，饱和度为 100%表示颜色最鲜艳，亮度为 50%表示正常亮度。
li {
  color: hsl(120, 100%, 25%);
}

此代码会使<li>标签内的文本呈现出一种较深的绿色。

  • HSLA 函数表示法：类似于rgba()，hsla()在hsl()的基础上增加了透明度参数a，取值范围同样是 0 - 1。例如，hsla(240, 100%, 50%, 0.7)表示带有一定透明度的蓝色。
a {
  color: hsla(300, 50%, 75%, 0.8);
}

这样<a>标签内的文本就是具有透明度的洋红色调。

2. color 的继承性

color属性具有继承性，这意味着如果一个元素没有显式设置color，它将继承其父元素的color值。例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    body {
      color: blue;
    }

    p {
      /* 未设置 color，将继承 body 的 color 值 */
    }
  </style>
</head>

<body>
  <p>这段文本将是蓝色，因为它继承了 body 的 color 属性值。</p>
</body>

</html>

在上述代码中，<p>标签没有设置color属性，所以它会继承<body>标签设置的蓝色文本颜色。了解这种继承性有助于统一页面的文本颜色风格，同时也可以通过在特定元素上覆盖继承的color值来实现局部文本颜色的定制。

3. color 在不同场景下的应用

  • 突出重要信息：在页面中，对于标题、重要提示等关键信息，可以使用鲜明的颜色来吸引用户注意力。比如将标题设置为醒目的颜色，如红色或黄色。
h2 {
  color: yellow;
}

这样可以让<h2>标题在页面中更加突出。

  • 区分不同类型的文本：例如在新闻网站中，可以将正文文本设置为一种颜色，将作者信息设置为另一种较浅或不同色调的颜色，以区分不同类型的内容。
article p {
  color: #333;
}

article .author {
  color: #666;
}

这里正文文本使用深灰色#333，作者信息使用较浅的灰色#666，实现了文本类型的区分。

  • 与背景颜色的搭配：选择合适的文本颜色与背景颜色搭配至关重要，要确保文本的可读性。一般来说，高对比度的颜色搭配，如黑色文本在白色背景上或白色文本在黑色背景上，具有较好的可读性。但在一些设计场景中，也会使用低对比度的搭配来营造柔和的氛围，但需要注意不能影响文本的识别。例如，在淡蓝色背景上使用浅蓝色文本可能会导致阅读困难，此时可以适当调整文本颜色的亮度或饱和度来提高可读性。
body {
  background-color: lightblue;
  color: darkblue;
}

在这个例子中，淡蓝色背景搭配深蓝色文本，既有一定的色彩呼应，又能保证文本的清晰可读。

CSS 文本样式之 font - size

font - size属性用于设置字体的大小，它对文本的可读性和页面的整体布局有着重要影响。合适的字体大小可以提高用户阅读体验，确保信息准确传达。

1. font - size 的取值单位

  • 绝对长度单位
    • px（像素）：像素是最常用的绝对长度单位，它表示屏幕上的一个物理像素点。使用px设置字体大小可以精确控制字体的尺寸，在不同设备上显示效果相对稳定。例如：
p {
  font-size: 16px;
}

这将把<p>标签内的文本字体大小设置为 16 像素，是网页正文文本比较常用的字体大小。 - pt（磅）：磅是印刷行业常用的长度单位，1pt 约等于 1/72 英寸。在网页开发中，pt单位使用相对较少，因为它与屏幕像素的换算关系在不同设备上可能有所不同，可能导致显示效果不一致。例如：

h3 {
  font-size: 12pt;
}

这里将<h3>标签的字体大小设置为 12 磅。

  • 相对长度单位
    • em：em单位是相对于父元素字体大小的倍数。如果父元素字体大小为 16px，设置子元素font-size: 1.5em，则子元素字体大小为 16 * 1.5 = 24px。em单位在响应式设计和继承布局中有很大优势，可以根据父元素的变化自动调整字体大小。例如：
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    body {
      font-size: 14px;
    }

    div {
      font-size: 1.2em;
    }

    p {
      font-size: 0.8em;
    }
  </style>
</head>

<body>
  <div>
    <p>这段文本的字体大小将基于 div 的字体大小计算，div 的字体大小又基于 body。</p>
  </div>
</body>

</html>

在上述代码中，<div>的字体大小是body字体大小的 1.2 倍，即 14 * 1.2 = 16.8px，而<p>标签的字体大小是<div>字体大小的 0.8 倍，即 16.8 * 0.8 = 13.44px。 - rem：rem（root em）单位是相对于根元素（通常是<html>标签）字体大小的倍数。与em不同，rem不会受到中间嵌套元素字体大小的影响，使得整个页面的字体大小控制更加统一和方便。例如：

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

这里<h1>标签的字体大小是根元素字体大小的 2 倍，即 32px，<p>标签字体大小与根元素相同，为 16px。 - %：百分比单位也是相对于父元素字体大小的比例。例如，设置font-size: 150%，表示字体大小是父元素的 1.5 倍。

section {
  font-size: 14px;
}

section span {
  font-size: 120%;
}

在这个例子中，<span>标签的字体大小是<section>字体大小的 1.2 倍，即 14 * 1.2 = 16.8px。

2. 最佳实践与注意事项

  • 响应式设计中的字体大小：在移动设备和桌面设备共存的时代，响应式设计至关重要。使用相对长度单位如em或rem可以使字体大小根据设备屏幕大小和布局自动调整。例如，可以通过媒体查询来设置不同屏幕宽度下根元素的字体大小，从而实现整体页面字体大小的响应式变化。
/* 针对小屏幕设备，如手机 */
@media (max - width: 600px) {
  html {
    font-size: 14px;
  }
}

/* 针对大屏幕设备，如桌面电脑 */
@media (min - width: 1200px) {
  html {
    font-size: 16px;
  }
}

这样在小屏幕上整体字体相对较小，适合手机屏幕空间，而在大屏幕上字体较大，便于阅读。

  • 可读性与易访问性：选择合适的字体大小对于文本的可读性和易访问性非常关键。过小的字体可能导致视力不好的用户难以阅读，而过大的字体可能会破坏页面布局。一般来说，正文文本字体大小在 14px - 18px 之间较为合适，标题字体大小可以根据层级适当增大。同时，要注意不同字体在相同大小下的视觉差异，一些字体可能看起来比其他字体稍大或稍小，需要根据实际情况进行微调。

  • 避免过度使用绝对单位：虽然px单位可以精确控制字体大小，但在响应式设计中，过度依赖px可能导致页面在不同设备上显示效果不佳。尽量优先使用相对单位，只有在对字体大小有严格固定要求的情况下才使用px，例如按钮上的文本，为了保证按钮的固定尺寸和美观，可能会使用px设置字体大小。

CSS 文本样式之 font - family

font - family属性用于指定文本使用的字体。合适的字体选择可以极大地影响页面的风格和可读性，不同的字体传达出不同的情感和信息。

1. 字体分类

  • 衬线字体（Serif）：衬线字体在笔画的末端有额外的装饰线条，这些装饰线条被称为衬线。常见的衬线字体有 Times New Roman、Georgia 等。衬线字体通常给人一种传统、正式、优雅的感觉，适合用于印刷品、长篇文章等需要较高可读性的场景。例如，报纸、书籍的正文常常使用衬线字体。
p {
  font-family: Times New Roman, serif;
}

这里将<p>标签内的文本字体设置为 Times New Roman，如果该字体在用户设备上不存在，则会使用系统默认的衬线字体。

  • 无衬线字体（Sans - Serif）：无衬线字体没有笔画末端的装饰线条，字体外观简洁、现代。常见的无衬线字体有 Arial、Helvetica、Roboto 等。无衬线字体在屏幕上显示效果较好，因为它们的简洁性使得在低分辨率屏幕下也能保持清晰可读。适用于网页正文、标题以及现代风格的设计。
h1 {
  font-family: Arial, sans - serif;
}

此代码将<h1>标题字体设置为 Arial，若 Arial 不可用，则使用系统默认的无衬线字体。

  • 等宽字体（Monospace）：等宽字体中每个字符占用相同的水平空间，这使得字符排列整齐，适合显示代码、表格等需要精确对齐的内容。常见的等宽字体有 Courier New、Consolas 等。
pre {
  font-family: Courier New, monospace;
}

在<pre>标签内，常用来显示预格式化的文本，如代码片段，使用等宽字体可以保持代码原本的格式和对齐方式。

2. font - family 的取值方式

  • 指定具体字体名称：可以直接指定字体的名称，如font-family: "Open Sans", sans - serif;。这里Open Sans是具体的字体名称，需要注意的是，如果字体名称包含空格，必须用引号括起来。如果用户设备上安装了该字体，就会使用它来显示文本，否则会按照后续的字体选项或系统默认字体来显示。

  • 通用字体族：除了指定具体字体，还可以使用通用字体族，如serif、sans - serif、monospace、cursive（手写风格字体）、fantasy（装饰性或奇特风格字体）。当指定通用字体族时，浏览器会选择系统中相应类型的字体。例如，font-family: cursive;会使文本以系统中可用的手写风格字体显示。

3. 字体加载与优化

  • 网页字体嵌入：为了确保在不同用户设备上都能显示预期的字体，可以使用网页字体嵌入技术。通过@font - face规则，可以将自定义字体文件（如.woff、.woff2、.ttf等格式）嵌入到网页中。例如：
@font - face {
  font - family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font - weight: normal;
  font - style: normal;
}

body {
  font-family: 'MyCustomFont', sans - serif;
}

在上述代码中，首先通过@font - face定义了一个名为MyCustomFont的字体，指定了字体文件的来源，并设置了字体的权重和样式。然后在body元素中使用这个自定义字体，如果字体加载失败，则会使用系统默认的无衬线字体。

  • 字体加载策略：为了优化页面性能，需要考虑字体的加载策略。可以使用font - display属性来控制字体在加载过程中的显示行为。例如，font - display: swap;表示字体加载时，先使用系统默认字体显示文本，当自定义字体加载完成后再替换，这样可以避免文本长时间不可见的情况，提高用户体验。
@font - face {
  font - family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font - weight: normal;
  font - style: normal;
  font - display: swap;
}

CSS 文本样式之 text - align

text - align属性用于设置文本在元素内的水平对齐方式，它对页面的排版和视觉效果有着重要影响，能够帮助我们更好地组织和展示文本内容。

1. text - align 的取值

  • left：将文本左对齐，这是大多数语言（如英语、中文等从左到右书写的语言）的默认对齐方式。文本从元素的左侧开始排列。
p {
  text-align: left;
}

这样<p>标签内的文本会左对齐显示。

  • right：使文本右对齐，文本从元素的右侧开始排列。常用于一些需要突出右侧信息的场景，比如价格、日期等信息的显示。
div.price {
  text-align: right;
}

在这个.price类的<div>元素中，文本会右对齐，适合显示价格等需要靠右显示的内容。

  • center：将文本居中对齐，文本在元素内水平居中排列。常用于标题、导航栏等需要突出显示且追求对称美感的场景。
h1 {
  text-align: center;
}

<h1>标题会在其所在元素内水平居中显示，增强标题的视觉效果。

  • justify：两端对齐，文本在元素内均匀分布，左右两端都对齐容器边界。这种对齐方式常用于报纸、杂志等印刷品的正文排版，能使文本看起来更加整齐、美观，充分利用空间。但在网页中使用时，可能会因为单词间间距不均匀而影响可读性，需要注意调整。
article p {
  text-align: justify;
}

在<article>中的<p>标签文本会两端对齐显示，使段落看起来更加规整。

2. text - align 与块级元素和行内元素

  • 块级元素：text - align属性直接应用于块级元素，如<div>、<p>、<section>等，控制这些元素内的文本对齐方式。例如，将一个<div>元素内的所有文本设置为居中对齐：
div {
  text-align: center;
}
  • 行内元素：text - align属性本身并不直接影响行内元素的对齐，但如果行内元素包含在块级元素中，块级元素的text - align设置会影响行内元素的水平对齐。例如：
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    p {
      text-align: center;
    }

    span {
      /* 行内元素 span 会继承 p 的 text - align 设置 */
    }
  </style>
</head>

<body>
  <p><span>这段文本会居中显示，因为 span 继承了 p 的 text - align 设置。</span></p>
</body>

</html>

在上述代码中，<span>行内元素虽然没有直接设置text - align，但由于包含它的<p>块级元素设置了text - align: center，所以<span>内的文本也会居中显示。

3. 特殊情况与注意事项

  • 表格内文本对齐：在表格中，text - align属性同样可以控制单元格内文本的对齐方式。可以对<table>、<tr>或<td>元素分别设置text - align，以实现不同的对齐效果。例如：
table {
  width: 100%;
}

td {
  text-align: center;
}

td.price {
  text-align: right;
}

在这个例子中，所有<td>单元格内的文本默认居中对齐，但具有.price类的<td>单元格内文本会右对齐，便于价格信息的显示。

  • 多行文本对齐：对于多行文本，text - align属性的效果与单行文本类似。但在两端对齐（justify）时，需要注意单词间间距的处理，尤其是在不同语言和文本长度变化的情况下。有时可能需要结合word - break、letter - spacing等属性来优化文本的显示效果，以避免出现不美观的间距。例如：
p {
  text-align: justify;
  word - break: break - all;
  letter - spacing: 0.5px;
}

这里word - break: break - all允许单词在任意位置换行，letter - spacing: 0.5px适当增加字母间距，使两端对齐的文本在视觉上更加均匀、美观。

总之，text - align属性是前端文本排版中不可或缺的一部分，通过合理设置其取值，可以优化页面的视觉效果，提高文本的可读性和信息传达效率。在实际应用中，需要根据具体的设计需求和内容特点，灵活运用text - align以及其他相关的 CSS 属性，打造出美观、易用的网页界面。