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的范围内无级调整粗细，但那又是另一个更深入的话题了。
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情
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%，但它无疑是未来字体控制的一个重要方向。
以上就是如何使用cssfont-weight和font-style控制字体样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1061257.html
微信扫一扫 
支付宝扫一扫 
