CSS-Font-Weight

A utility to convert font weight names into number values

Acceptable values include:
    EXTRABOLD, Extra Bold, extra bold, extra-bold, extra_bold

Installation

Local

npm install @ibnlanre/css-weight

API

Script tags

<script src="./node_modules/@ibnlanre/weight.js" type="module"></script>

ES6

import cssWeight from "./node_modules/@ibnlanre/weight.js"
import { openType } from cssWeight
import { weights } from cssWeight

CommonJS

const cssWeight = require("@ibnlanre/css-weight");
const openType = cssWeight.openType;

Reference

openType[300] //-> [ 'Light' ]
cssWeight.weights[350] //-> [ 'Book', 'Demi' ]

Single Arguments

cssWeight(""); //-> "missing query"
cssWeight({ MDN: true }); //-> "query must be a string"
cssWeight("--=HAIR9876LINE Condensed");
//-> { style: 'normal', weight: 200, stretch: 'condensed' }
cssWeight("Italic Book", { MDN: true });
//-> { style: 'italic', weight: 'normal', stretch: 'normal' }

Multiple Arguments

cssWeight("Oblique Poster, Semi_Expanded Demi");
// returns
// [
//   { style: 'oblique', weight: 999, stretch: 'normal' },
//   { style: 'normal', weight: 350, stretch: 'semi-expanded' }
// ]

Default Weights

|Value| Description | |:--- |:---| | 100 | UltraThin | | 150 | ExtraThin | | 200 | Thin, Hairline, UltraLight | | 250 | ExtraLite, ExtraLight | | 300 | Lite, Light | | 350 | Book, Demi | | 375 | Text | | 400 | Normal, Regular | | 425 | Thick | | 450 | Extra Thick | | 500 | Dark, Medium | | 550 | ExtraDark, Semibold, Demibold | | 600 | Bold | | 650 | ExtraBold | | 700 | UltraBold | | 800 | Black | | 900 | ExtraBlack, Heavy | | 999 | UltraBlack, Fat, Poster |

OpenType Weights

To use the font weight definition in the OpenType specification, which is the same shown on MDN, use the option { MDN: true }

|Value| Description | |:--- |:---| | 100 | Thin | | 200 | ExtraLight, UltraLight | | 300 | Light | | 400 | Normal, Regular | | 500 | Dark, Medium | | 600 | DemiBold, SemiBold | | 700 | Bold | | 800 | ExtraBold, UltraBold | | 900 | Black, Heavy | | 950 | ExtraBlack, UltraBlack |

References

• MDN
• Microsoft
• HTMLDog
• Lukasz Grolik

Acknowledgements

CSS-Font-Weight was inspired by dan-gamble/postcss-font-weight-names