CSS文字与字体设置入门教程

CSS作为网页设计的核心技术，在文本呈现方面扮演着至关重要的角色。虽然CSS本身并不直接添加文本内容，但它通过强大的样式控制，赋予文本生命和风格，让其以美观且易读的方式呈现在用户面前。本文将深入探讨如何利用CSS精细地控制和美化文本，包括设置文本颜色、字体、大小等基本属性，以及利用文本对齐、行高、字符间距等属性优化排版。此外，还将介绍如何通过伪元素插入装饰性文字，引入自定义字体提升设计感，并解决文本溢出、长词换行等实际问题。通过本文的学习，你将掌握CSS文本样式设置的精髓，从而提升网页的可读性和用户体验，打造更具吸引力的网页设计。

CSS不直接添加文本内容，而是通过样式控制文本的外观。使用color、font-family、font-size等属性设置文本颜色、字体和大小；利用text-align、line-height、letter-spacing等优化排版；通过::before和::after伪元素插入装饰性文字；借助@font-face引入自定义字体提升设计感；针对文本溢出，单行用white-space+text-overflow截断，多行依赖-webkit-line-clamp；结合overflow-wrap处理长词换行；并通过line-height、text-rendering、font-feature-settings等增强可读性与视觉表现，确保响应式与可访问性兼顾。

CSS要说直接‘加字’，那其实是HTML的活儿。CSS真正做的是给那些字穿衣打扮，让它们以我们想要的样子呈现在网页上。它负责定义文本的颜色、大小、字体、间距，甚至是如何处理溢出等等。所以，当我们谈论CSS如何‘加字’时，更多的是在探讨如何精细地控制和美化文本内容，确保它们既美观又易读。它不是用来添加内容本身的，而是赋予内容生命和风格的魔法。

解决方案

当我们需要在网页上展示文本时，首先会在HTML中写入内容，例如

这是一段文本。

基本文本样式设置：

• color: 决定文本的颜色。这大概是最基础也最直观的设置了，比如color: #333;让文本变成深灰色，或者color: rgb(255, 0, 0);让它变成红色。选择一个合适的颜色，对可读性至关重要。
• font-family: 指定字体类型。这是个大学问，你可能想用思源宋体，也可能偏爱Helvetica。通常我们会提供一个字体列表，以防用户系统没有某个字体，比如font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;。这样，浏览器会从左到右尝试，直到找到一个可用的字体。
• font-size: 设置字体大小。单位可以是像素（px）、em（相对父元素字体大小）、rem（相对根元素字体大小）、或者百分比（%）。我个人倾向于rem，因为它在响应式设计中表现更灵活，方便统一调整。比如font-size: 1.6rem;。
• font-weight: 控制字体粗细。常见的有normal (400), bold (700)，也可以用数字100-900来表示。font-weight: 500;就能让字体比普通字体略粗一点，但又没到bold的程度。
• font-style: 决定字体样式，通常是normal或italic（斜体）。
• text-align: 文本对齐方式，left、right、center、justify（两端对齐）。justify在处理大段文本时，能让排版看起来更整齐，但有时可能会导致单词间距过大，需要权衡。
• text-decoration: 添加或移除文本装饰，比如underline（下划线）、line-through（删除线）、none。链接默认有下划线，我经常用text-decoration: none;来移除它，再用其他方式（比如hover效果）来提示这是个链接。
• line-height: 行高。这个值可以是一个数字（相对于font-size的倍数），也可以是具体的单位（px，em）。合适的行高能极大提升阅读体验，避免文字挤在一起。比如line-height: 1.6;。
• letter-spacing 和 word-spacing: 字符间距和单词间距。微调这些可以改善文本的视觉平衡，尤其是在标题或特定设计中。
• text-transform: 文本大小写转换，uppercase（大写）、lowercase（小写）、capitalize（首字母大写）。
• text-shadow: 为文本添加阴影效果。text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);能让文字有立体感，或者在背景复杂的图片上提升可读性。
• white-space: 控制元素内部空白符的显示方式。nowrap可以防止文本换行，pre-wrap则会保留空白符和换行符，但允许自动换行。
• overflow-wrap / word-break: 处理长单词或URL在行尾溢出的问题。overflow-wrap: break-word;允许在单词内部断行。

通过伪元素“添加”文本：

虽然CSS不直接添加主体内容，但通过::before和::after伪元素，我们可以在元素内容的前面或后面插入一些装饰性或辅助性的文本。

p::before {
    content: "前缀："; /* 这里的“前缀：”就是CSS“加”的字 */
    color: gray;
    font-weight: bold;
    margin-right: 5px;
}

p::after {
    content: " (完)";
    font-size: 0.8em;
    color: #999;
}

这在给列表项添加图标、或者为特定元素添加说明时非常有用。

CSS中如何引入并使用自定义字体，让网页更具个性？

引入自定义字体是提升网页视觉风格的关键一步，它能让你的设计跳出系统字体的限制。我个人觉得，一个独特的字体能瞬间提升网站的品牌感和专业度。

要实现这一点，主要通过@font-face规则。这个规则允许你定义一个自定义字体，并告诉浏览器去哪里找到它。

@font-face {
    font-family: 'MyCustomFont'; /* 给你的字体起个名字 */
    src: url('fonts/MyCustomFont.woff2') format('woff2'), /* 优先加载woff2，因为它压缩率高，性能好 */
         url('fonts/MyCustomFont.woff') format('woff'),
         url('fonts/MyCustomFont.ttf') format('truetype'); /* 兼容性考虑 */
    font-weight: normal; /* 字体的粗细，如果一个字体文件包含多种粗细，可以定义多个@font-face */
    font-style: normal; /* 字体的样式，如斜体 */
    font-display: swap; /* 这是一个很重要的属性，决定字体加载时的行为 */
}

/* 然后，你就可以在CSS中像使用系统字体一样使用它了 */
h1 {
    font-family: 'MyCustomFont', sans-serif; /* 记得加上备用字体，以防自定义字体加载失败 */
}

这里有几个我常遇到的坑和一些心得：

• 字体格式选择: WOFF2是现代浏览器首选，压缩率最高，加载速度快。WOFF次之，TTF/OTF用于更老的浏览器。为了最佳兼容性，通常会提供多种格式。
• font-display: 这个属性非常关键，它控制了字体加载时文本的显示方式。swap是我的首选，它允许浏览器先用系统字体显示文本，等自定义字体加载完成后再替换，这样用户不会看到空白文本（FOIT - Flash Of Invisible Text），体验会好很多。
• 字体文件路径: 确保url()中的路径是正确的，相对于CSS文件或网站根目录。
• 性能考量: 自定义字体文件可能会比较大，影响页面加载速度。只加载你需要的字符集（例如，只加载英文字符或常用汉字），或者使用Google Fonts等服务，它们通常会帮你优化。
• 字体版权: 使用自定义字体前，务必确认其授权许可，避免侵权。

文本溢出问题怎么解决？CSS有哪些文本截断和换行策略？

文本溢出是前端开发中很常见的问题，尤其是在响应式设计中，内容长度不确定时很容易出现。我坦白说，这玩意儿处理起来有时候挺让人头疼的，特别是多行截断。

单行文本溢出截断（省略号）

这是最常见也相对简单的场景，通常用于标题、列表项等。

.single-line-ellipsis {
    white-space: nowrap; /* 强制文本不换行 */
    overflow: hidden;    /* 隐藏溢出部分 */
    text-overflow: ellipsis; /* 将溢出部分替换为省略号 */
    width: 200px; /* 或者设置max-width，容器必须有明确宽度 */
}

这里需要注意的是，width或max-width是必须的，浏览器需要知道容器的边界才能判断是否溢出。

多行文本溢出截断（省略号）

这个就稍微复杂一点了，因为CSS原生支持的方案并不理想，我们通常会依赖于一个Webkit内核的私有属性。

.multi-line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; /* 必须结合这个属性 */
    -webkit-line-clamp: 3; /* 限制文本显示3行 */
    -webkit-box-orient: vertical; /* 必须结合这个属性，设置或检索伸缩盒对象的子元素的排列方式 */
    /* 注意：这个方案在非Webkit内核浏览器（如Firefox）中不完全支持，需要备用方案或JS */
}

对于Firefox等非Webkit浏览器，可能需要使用JavaScript来实现多行文本截断，或者采取一些折衷方案，比如只显示固定高度，溢出部分隐藏，但不显示省略号。这是一个典型的跨浏览器兼容性挑战。

文本换行策略

除了截断，控制文本如何换行也同样重要。

• word-wrap / overflow-wrap: 这两个属性基本相同，overflow-wrap是新的标准名称。它决定了当一个单词过长，一行放不下时，是否可以在单词内部断开。

  .break-word-container {
      overflow-wrap: break-word; /* 允许在长单词或URL内部断行 */
  }

  这对于处理URL、很长的技术名词等非常有用，避免它们撑破布局。

• word-break: 这个属性更激进，它定义了单词内部是否可以断行。

  • normal: 默认行为。
  • break-all: 允许在任何字符之间断开，即使是非单词字符。这可能导致中文标点符号被强制断开，看起来不太自然。
  • keep-all: 强制保持单词完整，只在空白符或连字符处断行。对中文来说，这可能导致汉字单独一行，而不是与标点符号一起。
  • break-word: （已被overflow-wrap: break-word取代，但仍有浏览器支持）行为与overflow-wrap: break-word类似。

在实际项目中，我通常会优先使用overflow-wrap: break-word;来处理长单词换行，而对于多行截断，如果项目对兼容性要求高，我可能会考虑一个JS库或者只做单行截断，毕竟用户体验和开发成本需要平衡。

除了基本的字体设置，CSS还能怎样优化文本的可读性和用户体验？

文本的可读性和用户体验远不止于选择一个好看的字体和合适的大小，它涉及到一系列微妙的视觉和排版细节。对我而言，这些细节才是真正体现设计师和开发者功力的地方。

• 行高（line-height）的艺术: 一个好的行高能让文本呼吸。过小的行高会让文字挤在一起，眼睛难以追踪；过大的行高则会分散注意力，让段落看起来松散。通常，我推荐将line-height设置为1.4到1.8倍的font-size，具体取决于字体、字号和行宽。对于中文，由于字形结构更方正，可能需要略大一点的行高。

• 字符间距（letter-spacing）的微调: 默认的字符间距对大多数字体来说是OK的，但有时，尤其是在大字号的标题或者某些特定字体中，微调letter-spacing能让文本看起来更和谐。比如，我发现很多英文字体在默认大写字母时会显得有点挤，这时稍微增加一点letter-spacing（例如0.05em）就能改善视觉效果。但切记，微调就好，过大的间距会让文字难以阅读。

• 文本渲染（text-rendering）的平滑: text-rendering属性可以告诉浏览器如何优化文本渲染。optimizeLegibility会优先考虑文本的可读性，启用连字（ligatures）等高级排版特性；geometricPrecision则会优先考虑字形的几何精度。通常，我会在全局CSS中尝试设置text-rendering: optimizeLegibility;，它能让字体边缘更平滑，尤其是在高分屏上。

• 连字和字体特性（font-feature-settings）: 一些高级字体支持OpenType特性，比如连字（ligatures）、小型大写字母（small-caps）、老式数字（old-style figures）等。通过font-feature-settings，你可以手动开启这些特性，让排版更专业。

  /* 开启连字，比如fi、fl等会合并成一个字符 */
  p {
      font-feature-settings: "liga", "clig";
  }
  /* 开启小型大写字母 */
  .small-caps {
      font-feature-settings: "smcp";
  }

  这在排版印刷品风格的文本时特别有用。

• 响应式字体大小: 在不同的屏幕尺寸下，固定的字体大小可能不合适。结合媒体查询（@media）和视口单位（vw、vh），可以实现响应式字体。

  body {
      font-size: 16px; /* 默认字体大小 */
  }
  @media (min-width: 768px) {
      body {
          font-size: 18px; /* 在平板尺寸以上，字体稍大 */
      }
  }
  h1 {
      font-size: 5vw; /* 标题大小随视口宽度变化 */
      min-font-size: 24px; /* 设置最小字体大小 */
      max-font-size: 60px; /* 设置最大字体大小 */
  }

  这里我喜欢用clamp()函数来更优雅地实现响应式字体，比如font-size: clamp(1rem, 2.5vw, 2.5rem);，它能确保字体大小在一个合理的区间内变化。

• 文本阴影（text-shadow）提升对比度: 当文本放置在背景复杂的图片上时，简单的color可能不足以保证可读性。这时，一个微妙的text-shadow可以有效提升文本与背景的对比度，让文字“浮”出来。

  .hero-text {
      color: white;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.6); /* 黑色阴影，增加对比度 */
  }

• 可访问性（Accessibility）: 最后但同样重要的是，所有这些优化都应该考虑到可访问性。确保文本颜色与背景有足够的对比度（WCAG标准），避免使用纯粹的颜色来传达信息，因为色盲用户可能无法识别。使用语义化的HTML结构，并确保文本内容可以通过屏幕阅读器正确读取。

这些看似微小的调整，叠加起来就能显著改善用户阅读体验，让你的网页内容不仅仅是“显示”，更是“呈现”。

今天关于《CSS文字与字体设置入门教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于CSS,可读性,字体,文本溢出,文本样式的内容请关注golang学习网公众号！