p5.js loadFont函数？

Question

如何更改p5.js中的字体？它不识别处理术语"loadFont“，也不允许我输入.vlw文件或链接到GoogleFont。至少，我根本没试过。

引用页面只包含"text“和"textFont”选项(在p5.js引用页末尾的排版部分)，这两个选项都不允许实际指定字体。

我也试过

text.style('font-family', 'Walter Turncoat');

此处列出的选项(https://github.com/lmccart/p5.js/wiki/Beyond-the-canvas)无效。实际上它打破了整页。在CSS中：

@font-face {
    font-family: 'Walter Turncoat';
    src: url('http://fonts.googleapis.com/css?family=Walter+Turncoat');
}

处理版本不起作用：

var type = loadFont("AmericanTypewriter-48.vlw");
var smallType = loadFont("AmericanTypewriter-14.vlw");

另外，

var type = "Helvetica"; 

在文本和textFont的示例中，它们是不起作用的。

一定有办法有另一种字体。请帮帮我！

Answer 1

参考文献中的例子做得很好。运行下面的代码片段以获得结果。你说它对你不起作用是什么意思？

​

function setup() {
  createCanvas(640, 480);
}

function draw() {
  fill(0);
  textSize(36);
  textFont("Georgia");
  text("Hello World! in Georgia.", 12, 40);
  textFont("Arial");
  text("Hello World! in Arial.", 12, 100);
  textFont("Walter Turncoat");
  text("Hello World! in Walter Turncoat.", 12, 160);
}

<link href="http://fonts.googleapis.com/css?family=Walter+Turncoat&.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/p5.js/0.3.8/p5.min.js"></script>

​

Answer 2

要在p5.js中加载字体，您需要一个.ttf或.otf文件，p5不适用于.vlw文件。因此，要在p5中使用字体，您需要：

1. 获取.ttf或.otf字体文件。此字体文件将在执行时间加载到您的应用程序。
2. 声明一个全局变量以保留字体。
3. 在预加载函数中加载带有loadFont的字体。
4. 加载字体之后，您必须使用textFont()来告诉p5，这是要使用的字体。
5. 用文字()打印一些东西。

下面是一个示例：

var myFont, fontReady = false;

function fontRead(){
    fontReady = true;
}

function preload() {
    myFont = loadFont("./fonts/MyfontFile.ttf", fontRead);
}

function setup() {
    createCanvas(720, 400);
    doyourSetup();
}

function draw() {
    background(255);
    if (fontReady) {
        textFont(myFont);
        text("Hello World!", 10, 30);
    }
}

Answer 3

您需要在预加载中加载字体：

var font;

function preload() {
    font = loadFont('thefont.ttf');
}

function setup() {
    createCanvas(600, 400);
    textFont(font);
}

function draw() {
    background(255);
    text('The Text', 280, 300);
}