跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

在css中字体加粗font-weight与斜体font-style

font-weight用于设置字体粗细,取值有normal、bold及100-900数值,font-style用于设置斜体样式,取值包括normal、italic和oblique,合理使用可提升页面可读性与视觉层次。

在CSS中,font-weight和font-style是两个用于控制字体样式的属性,分别用来设置文字的粗细和是否为斜体。

font-weight:设置字体加粗这个属性用来定义文本的粗细程度。常见取值包括:normal:正常粗细,相当于400 bold:加粗,相当于700 bolder:比父元素更粗lighter:比父元素更细100 到 900:数字形式,以100为单位递增,400为正常,700及以上算加粗

例如:

p { font-weight: bold; }h1 { font-weight: 600; }注意:能否显示中间数值(如300、500)取决于字体本身是否提供对应的字重文件。如果字体不支持,浏览器会自动就近匹配可用的粗细。

立即学习“前端免费学习笔记(深入)

”;

Comet AI 浏览器下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载font-style:设置字体倾斜这个属性主要用于控制文本是否以斜体显示。主要取值有:normal:正常样式,不倾斜italic:使用字体的斜体版本(如果有)

oblique:强制倾斜文本,即使没有斜体字形,浏览器也会模拟倾斜效果

例如:

em { font-style: italic; }.slanted { font-style: oblique; }通常italic更自然,因为使用的是字体设计好的斜体;而oblique是视觉上的倾斜,可能影响清晰度。

实际使用建议加粗推荐使用font-weight: bold或具体数值如600、700,避免依赖不支持的细粒度字重强调内容用em标签配合font-style: italic是语义化做法某些字体(如思源黑体、Roboto)提供多个字重文件,可完整支持100-900,提升视觉层次避免对非斜体字体强行设置 italic 而无对应字体资源,可能导致渲染异常基本上就这些。合理使用 font-weight 和 font-style,能有效提升页面的可读性和视觉结构。

相关文章