| Name | /* @pjs font */ directive |
||
|---|---|---|---|
| Examples | /* @pjs font="Arial.ttf"; */
void setup()
{
size(200,200);
noLoop();
textFont(createFont("Arial",32));
}
void draw()
{
background(255);
String t = "P.js";
float tw = textWidth(t);
fill(0);
text(t, (width-tw)/2, (height+32)/2);
}
|
||
| Description | If you wish to use custom fonts in your sketch, these must be preloaded using the font @pjs directive. Preloading fonts uses its own command, rather than the standard preload command, because unlike images a font must not just be cached, but must also be loaded into memory for the browser to make use of. Processing.js does this by relying on the browser to load the font via a CSS @font-face rule. While most browsers support a large number of font formats for use with @font-face (woff, svg, eot, ttf and otf), relying on "truetype" (ttf) and "opentype" (otf) font formats offer the greatest interoperability between Processing and Processing.js. Fonts can be preloaded from URL, such as "Arial.ttf" or from data URI, such as "data:font/truetype,base64, {base 64 encoded data block}". Fonts that are preloaded can be loaded without their extension in your sketch using the createFont function: if you preload "Arial.ttf" you can use this font in your sketch by loading it as a Processing font using PFont myfont = createFont("Arial",12); and then using as text font by calling textFont(myfont); If you place your fonts in a separate directory, such as the "data" directory used by Processing, you only need to indicate the font location in the preload command. The preload command will be /* @pjs font="data/Arial.ttf"; */ but the call in your sketch remains createFont("Arial",12). NOTE: The "VLW" format used by Processing is not supported, as this is a custom bitmap image file with an index that indicates sections of the image that map to a letter. WARNING: only use this directive for fonts that are used exclusively by your sketch; if your sketch relies on a font that you have also included for use on your page with an @font-face CSS rule, this directive may overwrite your rule with a far simpler one. |
||
| Syntax |
/* @pjs font="fontURL"; */ |
||
| Syntax for multiple fonts |
/* @pjs font="font1,font2,..."; */
|
||
| Parameters |
|
||
| Usage | Web & Application, Processing.js compatibility | ||
| Related |
@pjs directives
createFont() |
This reference is licensed under the CC BY-NC-SA 2.0 license:
