LogoLogoFowerGuideAtomsAPI
Blog
English
  • English
  • 简体中文
🌜
🌞
LogoLogoFower
  • Guide
  • Atoms
  • API
  • Blog
  • Languages
    • English
    • 简体中文
  • Introduction
    • About Fower
    • About Atomic Props
    • Comparison
    • Differences with tailwindcss
  • Getting Started
    • Use with react
    • Use with Vue
    • Use with Svelte
    • Use with React Native
    • Use with Taro
    • Use with uni-app
    • Use with Remax
    • Use with Vanilla
  • Basics
    • Basic
    • css prop
    • Pseudo-classes
    • Responsive Styles
    • Keyframes
    • Global style
    • Dynamic style
    • Programmable
    • Styled Components
  • Cool Features
    • Layout toolkit
    • Predictable style
    • Color helper
    • Composition Postfix
    • Auto dark mode
  • Advanced
    • Configuration
    • Theme mode
    • addAtom
    • composeAtom
    • Server Side Rendering (ssr)
    • Typescript
  • Design System
    • Theme
    • Spacings
    • Colors
    • Border radius
    • Shadows
    • Breakpoints
    • Font sizes
    • Font weights
    • Line heights
  • FAQs
    • Why CSS in JS?
    • Object or Template Strings?

Font weights

Fower provides a set of preset font weights values.

const config = {  theme: {    fontWeights: {      hairline: 100,      thin: 200,      light: 300,      normal: 400,      medium: 500,      semibold: 600,      bold: 700,      extrabold: 800,      black: 900,    },  },}
Edit this page
Previous
« Font sizes
Next
Line heights »