font-weight用于控制字体粗细，可使用normal、bold等关键字或100-900的数值；font-style用于设置字体倾斜样式，italic为设计斜体，oblique为算法倾斜。
CSS中，
font-weight属性主要用来控制字体的粗细程度，而
font-style则负责定义字体的倾斜样式，比如我们常见的斜体。通过这两个属性，开发者可以精确地调整文本在视觉上的呈现，以适应不同的设计需求和阅读场景。
解决方案
说起字体的粗细和倾斜，
font-weight和
font-style就是我们最直接的工具。它们看起来简单，但实际应用起来，里面还是有些值得琢磨的细节。
控制字体粗细：font-weight
font-weight这个属性，你可以用关键字，也可以用数字。
关键字方式：
立即学习“前端免费学习笔记（深入）”；
normal
：这是默认的粗细，通常对应数字400
。bold
：加粗，通常对应数字700
。lighter
：相对于父元素的字体更细。bolder
：相对于父元素的字体更粗。
举个例子：
p {
font-weight: normal; /* 普通粗细 */
}
h1 {
font-weight: bold; /* 加粗 */
}
.lighter-text {
font-weight: lighter; /* 比父元素细 */
}数字方式： 你可以使用
100到
900之间的整数值（必须是
100的倍数）。数字越大，字体就越粗。
100
：最细400
：等同于normal
700
：等同于bold
900
：最粗
不是所有字体都提供了所有这些粗细级别。如果某个字体没有你指定的粗细，浏览器会尝试模拟，或者使用最接近的可用粗细。
.thin-text {
font-weight: 200; /* 较细 */
}
.extra-bold {
font-weight: 800; /* 超粗 */
}控制字体倾斜：font-style
font-style主要有三个值：
normal
：默认值，文本不倾斜。italic
：斜体。这通常指的是字体设计时就包含了专门的斜体字形（italic face），它的字形可能会和常规体有所不同，看起来更优雅自然。oblique
：倾斜。如果字体没有专门的斜体字形，浏览器会通过算法将常规字形进行倾斜处理，形成一种“伪斜体”。你可以指定倾斜角度，比如oblique 10deg
，不过多数时候我们直接用oblique
就行。
span {
font-style: normal; /* 不倾斜 */
}
em {
font-style: italic; /* 使用字体的斜体字形 */
}
.skewed-text {
font-style: oblique; /* 倾斜常规字形 */
}
/* 也可以指定角度，但兼容性要留意 */
.skewed-more {
font-style: oblique 15deg;
}在我个人看来，如果字体本身提供了
italic字形，那优先使用
italic，视觉效果会好很多。
oblique更像是一种备用方案。
font-weight
数值与关键字：如何选择最适合的粗细？
在选择
font-weight的粗细时，我个人通常会根据项目的具体需求和字体的可用性来决定。用关键字（
normal,
bold）的好处是简单直接，兼容性也非常好，对于大多数只需要基本粗细变化的场景来说，这已经足够了。比如，标题用
bold，正文用
normal，这种最常见的排版，关键字就能搞定。
但如果你的设计对字体粗细有更精细的要求，或者你正在使用一些现代的、支持多种粗细的字体（比如Google Fonts上很多字体都有从100到900的多个权重），那么数字值就显得非常重要了。使用数字可以让你在
400（normal）和
700（bold）之间找到更多的中间态，比如
500（medium）或
600（semi-bold），这对于提升文本的层次感和视觉美感是很有帮助的。特别是现在很多设计师喜欢用更细的字体来体现高级感，
200或
300的权重就派上用场了。
不过，这里有个实际的考量：不是所有字体都提供了所有
100到
900的权重。如果你指定了一个字体没有的权重，浏览器会尝试“模拟”它，或者退回到最接近的可用权重。这种模拟出来的效果，有时会显得不够自然，甚至会影响文本的清晰度。所以，在使用数字权重前，最好确认你引用的字体是否真的支持这些权重。对于可变字体（Variable Fonts）来说，数字权重更是核心，因为它能让你在1到1000的范围内无级调整粗细，但那又是另一个更深入的话题了。
italic
与 oblique
：它们真的有区别吗？
关于
italic和
oblique，很多人会觉得它们不就是让文字倾斜嘛，有啥区别？但从字体的设计和渲染角度来看，它们确实有本质上的不同，而且这个区别在我看来还挺重要的。
italic
（斜体） 通常指的是字体家族中一个独立设计的字形变体。设计师在创作
italic字形时，不仅仅是把常规字形倾斜一下那么简单。他们可能会重新设计一些字母的形状，比如小写字母
a在斜体中可能会变成单层结构，
f和
j的笔画也可能变得更流畅、更具手写感。这种专门设计的斜体，在视觉上会显得更协调、更自然，也更易读。它传达的是一种“书写”的感觉，而不是简单的“倾斜”。
oblique
（倾斜） 就比较粗暴了。它通常是指浏览器或者排版引擎，在没有找到专门的
italic字形时，直接将常规（
normal）字形通过算法进行倾斜处理。你可以想象成把文字“推”了一下，让它歪向一边。这种倾斜是几何上的变换，而不是设计上的重塑。因此，
oblique文字的笔画粗细、字形结构并不会像
italic那样发生变化，只是整体倾斜了。
所以，核心区别在于：
italic是设计出来的斜体，
oblique是计算出来的斜体。
在实际应用中，如果你的字体支持
italic，我强烈建议使用
font-style: italic;。它能提供更优质的视觉体验。只有当字体没有
italic字形时，或者你确实需要一种纯粹的几何倾斜效果时，才考虑使用
font-style: oblique;。浏览器在遇到
font-style: italic;时，如果找不到
italic字形，它可能会自动回退到
oblique效果，以确保文字至少是倾斜的。这算是浏览器的一种智能处理吧。
字体样式控制的常见陷阱与性能考量
在实际开发中，对
font-weight和
font-style的控制，远不止写几行CSS那么简单，我们还得考虑一些实际的坑和性能问题。
一个比较常见的陷阱是字体的加载问题。如果你使用了多个
font-weight或
font-style变体（比如，一个字体同时有
normal,
bold,
italic,
bold italic），浏览器就需要加载多个字体文件。每个字体文件都是一个HTTP请求，并且有自己的文件大小。如果加载的字体文件过多或过大，就会显著增加页面的加载时间，导致用户看到FOUC (Flash of Unstyled Content)，也就是在字体加载完成前，页面显示的是系统默认字体，然后突然跳变到自定义字体，这种体验非常不好。
为了缓解这个问题，我通常会建议：
- 按需加载： 只加载你实际用到的字体权重和样式。很多字体服务（如Google Fonts）允许你选择性地加载。
- 字体子集化： 如果你只需要用到一部分字符（比如只显示中文），可以对字体文件进行子集化，去掉不需要的字符，大幅减小文件大小。
-
font-display
属性： 配合@font-face
规则使用font-display: swap;
或fallback;
等，可以控制字体加载时的行为，优化用户体验，避免长时间的白屏或FOUC。swap
会让浏览器先用系统字体渲染，加载完成后再替换成自定义字体。
另一个需要注意的点是可访问性。过度使用加粗或者斜体，可能会对有阅读障碍的用户造成困扰。例如，如果大段文字都加粗，反而会削弱加粗的强调作用，并且让阅读变得疲劳。同样，斜体在某些字体和屏幕尺寸下，可能会降低可读性。所以，在使用这些样式时，要适度，并考虑到不同用户的阅读习惯和需求。
最后，提一下变量字体（Variable Fonts）。这是一个比较新的技术，它将多个字体变体（比如从细到粗的所有权重，以及倾斜等）打包在一个字体文件中。这样，你只需要加载一个文件，就可以在CSS中通过
font-weight和
font-style等属性，以极细的粒度控制字体的各种样式，而不需要加载多个独立的字体文件。这大大优化了性能，也提供了前所未有的设计灵活性。虽然目前普及度还不是100%，但它无疑是未来字体控制的一个重要方向。
