web-spf

An implementation of SimplePixelFont rendering for the web.

About

web-spf provides a native api for loading and rendering .spf files in the web. The api uses HTML's custom elements to define unique spf tags. And internally uses render_spf, a framework for creating textures from .spf text strings. You can see a live demo at the following site: https://simplepixelfont.github.io/web-spf/.

Usage

Copy the pkg directory in your project. Then, in your html document add the following script tag:

<scriptsrc="./pkg/web/js/dom_elements.js" type="module"></script>

Now you can load fonts with the spf-font tag:

<spf-fontsrc="./Peaberry.spf"></spf-font>

Add the default attribute to set the font as the default for all text-renderings:

<spf-fontsrc="./Peaberry.spf" default></spf-font>

Lastly, use the spf-text to render any text:

<!-- You can even use custom styles like height to simulate custom text size! --><spf-textstyle="height: 8rem;" class="bannerText">Hello!</spf-text>

NPM installation

You can install web-spf from npm with the following command.

npm i web-spf

Then you can use web-spf functionality in CommonJS via the following require.

constspf=require("web-spf");

Or you can also import the package for use in ECMAScript modules.

importinit,{loaded,load_layout_from_file,print_text,PrintSocket,Texture,BadgeSocket,print_badge}from'path/to/web-spf/pkg-web/web_spf.js';