CSS @font-face rule src field parser – css-font-face-src
A CSS @font-face src property value parser.
Basically it provides two operations:
-
parse: To convert a CSS property string to an array of easily readable objects. Each object either describes a local font (referenced using its family name) or a remote font (referenced using its URL). -
serialize: To convert an object array back to a CSS property string.
Examples
JavaScript verison (CJS, using require)
Parse
const parser = require('css-font-face-src');
console.log(parser.parse('local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'));will return:
[
{ local: 'The Font' },
{ url: 'font.otf', format: 'opentype' },
{ url: 'font.woff' },
{ local: 'Another Font' }
]Serialize
const parser = require('css-font-face-src');
console.log(
parser.serialize([
{ local: 'The Font' },
{ url: 'font.otf', format: 'opentype' },
{ url: 'font.woff' },
{ local: 'Another Font' }
])
);will return:
'local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'JavaScript version (ESM, using import)
Parse
import { parse } from 'css-font-face-src';
console.log(parse('local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'));will return:
[
{ local: 'The Font' },
{ url: 'font.otf', format: 'opentype' },
{ url: 'font.woff' },
{ local: 'Another Font' }
]Serialize
import { serialize } from 'css-font-face-src';
console.log(
serialize([
{ local: 'The Font' },
{ url: 'font.otf', format: 'opentype' },
{ url: 'font.woff' },
{ local: 'Another Font' }
])
);will return:
'local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'TypeScript version
Parse
import { parse } from 'css-font-face-src';
console.log(parse('local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'));will return:
[
{ local: 'The Font' },
{ url: 'font.otf', format: 'opentype' },
{ url: 'font.woff' },
{ local: 'Another Font' }
]Serialize
import { serialize, FontFaceSrcItem } from 'css-font-face-src';
console.log(
serialize([
{ local: 'The Font' },
{ url: 'font.otf', format: 'opentype' },
{ url: 'font.woff' },
{ local: 'Another Font' }
] as FontFaceSrcItem[])
);will return:
'local("The Font"), url("font.otf") format("opentype"), url("font.woff"), local("Another Font")'Build status
Author
Christoph Burgmer. Licensed under BSD-2-Clause. Reach out on Twitter.