如何使用cssfont-weight和font-style控制字体样式

font-weight用于控制字体粗细，可使用normal、bold等关键字或100-900的数值；font-style用于设置字体倾斜样式，italic为设计斜体，oblique为算法倾斜。

CSS中，

属性主要用来控制字体的粗细程度，而则负责定义字体的倾斜样式，比如我们常见的斜体。通过这两个属性，开发者可以精确地调整文本在视觉上的呈现，以适应不同的设计需求和阅读场景。

解决方案

说起字体的粗细和倾斜，

和就是我们最直接的工具。它们看起来简单，但实际应用起来，里面还是有些值得琢磨的细节。

控制字体粗细：

font-weight

登录后复制

这个属性，你可以用关键字，也可以用数字。

关键字方式：

立即学习“前端免费学习笔记（深入）”；

• normal

  登录后复制
  ：这是默认的粗细，通常对应数字

  400

  登录后复制
  。

• bold

  登录后复制
  ：加粗，通常对应数字

  700

  登录后复制
  。

• lighter

  登录后复制
  ：相对于父元素的字体更细。

• bolder

  登录后复制
  ：相对于父元素的字体更粗。

举个例子：

数字方式： 你可以使用

到之间的整数值（必须是的倍数）。数字越大，字体就越粗。

• 100

  登录后复制
  ：最细

• 400

  登录后复制
  ：等同于

  normal

  登录后复制

• 700

  登录后复制
  ：等同于

  bold

  登录后复制

• 900

  登录后复制
  ：最粗

不是所有字体都提供了所有这些粗细级别。如果某个字体没有你指定的粗细，浏览器会尝试模拟，或者使用最接近的可用粗细。

控制字体倾斜：

font-style

登录后复制

主要有三个值：

• normal

  登录后复制
  ：默认值，文本不倾斜。

• italic

  登录后复制
  ：斜体。这通常指的是字体设计时就包含了专门的斜体字形（italic face），它的字形可能会和常规体有所不同，看起来更优雅自然。

• oblique

  登录后复制
  ：倾斜。如果字体没有专门的斜体字形，浏览器会通过算法将常规字形进行倾斜处理，形成一种“伪斜体”。你可以指定倾斜角度，比如

  oblique 10deg

  登录后复制
  ，不过多数时候我们直接用

  oblique

  登录后复制
  就行。

在我个人看来，如果字体本身提供了

字形，那优先使用，视觉效果会好很多。更像是一种备用方案。

font-weight

登录后复制

数值与关键字：如何选择最适合的粗细？

在选择

的粗细时，我个人通常会根据项目的具体需求和字体的可用性来决定。用关键字（, ）的好处是简单直接，兼容性也非常好，对于大多数只需要基本粗细变化的场景来说，这已经足够了。比如，标题用，正文用，这种最常见的排版，关键字就能搞定。

但如果你的设计对字体粗细有更精细的要求，或者你正在使用一些现代的、支持多种粗细的字体（比如Google Fonts上很多字体都有从100到900的多个权重），那么数字值就显得非常重要了。使用数字可以让你在

（normal）和（bold）之间找到更多的中间态，比如（medium）或（semi-bold），这对于提升文本的层次感和视觉美感是很有帮助的。特别是现在很多设计师喜欢用更细的字体来体现高级感，或的权重就派上用场了。

不过，这里有个实际的考量：不是所有字体都提供了所有

到的权重。如果你指定了一个字体没有的权重，浏览器会尝试“模拟”它，或者退回到最接近的可用权重。这种模拟出来的效果，有时会显得不够自然，甚至会影响文本的清晰度。所以，在使用数字权重前，最好确认你引用的字体是否真的支持这些权重。对于可变字体（Variable Fonts）来说，数字权重更是核心，因为它能让你在1到1000的范围内无级调整粗细，但那又是另一个更深入的话题了。

italic

登录后复制

与

oblique

登录后复制

：它们真的有区别吗？

关于

和，很多人会觉得它们不就是让文字倾斜嘛，有啥区别？但从字体的设计和渲染角度来看，它们确实有本质上的不同，而且这个区别在我看来还挺重要的。

（斜体） 通常指的是字体家族中一个独立设计的字形变体。设计师在创作字形时，不仅仅是把常规字形倾斜一下那么简单。他们可能会重新设计一些字母的形状，比如小写字母在斜体中可能会变成单层结构，和的笔画也可能变得更流畅、更具手写感。这种专门设计的斜体，在视觉上会显得更协调、更自然，也更易读。它传达的是一种“书写”的感觉，而不是简单的“倾斜”。

（倾斜） 就比较粗暴了。它通常是指浏览器或者排版引擎，在没有找到专门的字形时，直接将常规（）字形通过算法进行倾斜处理。你可以想象成把文字“推”了一下，让它歪向一边。这种倾斜是几何上的变换，而不是设计上的重塑。因此，文字的笔画粗细、字形结构并不会像那样发生变化，只是整体倾斜了。

所以，核心区别在于：

是设计出来的斜体，是计算出来的斜体。

在实际应用中，如果你的字体支持

，我强烈建议使用。它能提供更优质的视觉体验。只有当字体没有字形时，或者你确实需要一种纯粹的几何倾斜效果时，才考虑使用。浏览器在遇到时，如果找不到字形，它可能会自动回退到效果，以确保文字至少是倾斜的。这算是浏览器的一种智能处理吧。

字体样式控制的常见陷阱与性能考量

在实际开发中，对

和的控制，远不止写几行CSS那么简单，我们还得考虑一些实际的坑和性能问题。

一个比较常见的陷阱是字体的加载问题。如果你使用了多个

或变体（比如，一个字体同时有, , , ），浏览器就需要加载多个字体文件。每个字体文件都是一个HTTP请求，并且有自己的文件大小。如果加载的字体文件过多或过大，就会显著增加页面的加载时间，导致用户看到FOUC (Flash of Unstyled Content)，也就是在字体加载完成前，页面显示的是系统默认字体，然后突然跳变到自定义字体，这种体验非常不好。

为了缓解这个问题，我通常会建议：

• 按需加载： 只加载你实际用到的字体权重和样式。很多字体服务（如Google Fonts）允许你选择性地加载。
• 字体子集化： 如果你只需要用到一部分字符（比如只显示中文），可以对字体文件进行子集化，去掉不需要的字符，大幅减小文件大小。

• font-display

  登录后复制
  属性： 配合

  @font-face

  登录后复制
  规则使用

  font-display: swap;

  登录后复制
  或

  fallback;

  登录后复制
  等，可以控制字体加载时的行为，优化用户体验，避免长时间的白屏或FOUC。

  swap

  登录后复制
  会让浏览器先用系统字体渲染，加载完成后再替换成自定义字体。

另一个需要注意的点是可访问性。过度使用加粗或者斜体，可能会对有阅读障碍的用户造成困扰。例如，如果大段文字都加粗，反而会削弱加粗的强调作用，并且让阅读变得疲劳。同样，斜体在某些字体和屏幕尺寸下，可能会降低可读性。所以，在使用这些样式时，要适度，并考虑到不同用户的阅读习惯和需求。

最后，提一下变量字体（Variable Fonts）。这是一个比较新的技术，它将多个字体变体（比如从细到粗的所有权重，以及倾斜等）打包在一个字体文件中。这样，你只需要加载一个文件，就可以在CSS中通过

和等属性，以极细的粒度控制字体的各种样式，而不需要加载多个独立的字体文件。这大大优化了性能，也提供了前所未有的设计灵活性。虽然目前普及度还不是100%，但它无疑是未来字体控制的一个重要方向。

以上就是如何使用cssfont-weight和font-style控制字体样式的详细内容，更多请关注php中文网其它相关文章！