VuePressVuePress
首页
  • 基础
  • UI
  • JavaScript
  • CSS
  • postcss
  • Vue3
  • Vue的设计与实现
  • 前端常用插件
  • PHP
  • Laravel
  • Linux
  • 线性代数
Category
AI
jiyun
Timeline
首页
  • 基础
  • UI
  • JavaScript
  • CSS
  • postcss
  • Vue3
  • Vue的设计与实现
  • 前端常用插件
  • PHP
  • Laravel
  • Linux
  • 线性代数
Category
AI
jiyun
Timeline
  • 基础知识

    • 单位和函数
    • line-height
    • backdrop-filter
  • 文本

    • white-space
  • 盒子模型

    • box-shadow
    • shadow-box1
    • outline
    • 层叠上下文
  • 布局

    • CSS 网格完整指南
    • Positions
    • 视口相关单位
  • 动画

    • animation
  • demo

    • transform1
    • animation border
  • tailwindcss

    • sr-only
    • font
      • font-semibold

font-semibold

font-semibold 是 Tailwind CSS 中的一个工具类,用于设置字体的粗细。具体来说:

  1. font-semibold 通常对应于 CSS 中的 font-weight: 600;。
  2. 它比普通字体(font-normal,相当于 font-weight: 400;)更粗,但比粗体(font-bold,相当于 font-weight: 700;)稍细。
  3. 在字体粗细的范围中,它处于中等偏重的位置,提供了一个在普通和粗体之间的视觉效果。
  4. 这个类可以让文本看起来更加突出,但又不像完全的粗体那样强烈。
  5. font-semibold 被用来为标题文本增加一些视觉重要性,使其在页面上更加醒目,同时保持适度的强调。

如果您想调整字体的粗细,Tailwind CSS 提供了一系列选项:

  • font-thin: 100
  • font-extralight: 200
  • font-light: 300
  • font-normal: 400
  • font-medium: 500
  • font-semibold: 600
  • font-bold: 700
  • font-extrabold: 800
  • font-black: 900

您可以根据设计需求选择最合适的字体粗细类。

Last Updated:
Contributors: BaronYan
Prev
sr-only