p5.js的loadFont函数是什么？

Question

我该如何在p5.js中更改字体？它不识别Processing术语“loadFont”，也不能从CSS中继承字体，也不允许我使用.vlw文件或链接到Google Font。至少，我尝试过的方法都不行。

参考页面只包含“text”和“textFont”选项（在p5.js参考页面末尾的Typography部分），但两者都不能实际指定字体。

我也尝试过

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"; 

"

which they have in the examples for text and textFont does not work.

" 的意思是“在文本和textFont的示例中，它们并不起作用。”

另外需要使用其他字体的方法，请帮忙提供解决方案！

- Lucy

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>

- OrionMelt

Answer 2

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

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

以下是示例：

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);
    }
}

- Roberto Stelling

---

布尔值不是必需的，预加载将在调用设置之前完成。 - rednoyz

没错，preload函数会在setup函数之前被调用，但是由于loadFont函数的某些错误条件可能导致字体不可用。 - Roberto Stelling

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);
}

- rednoyz

Answer 4

var myfont;
function preload() {
font = loadFont('font.ttf)
}
function setup{
createCanvas(400, 400)
}
function draw{
textFont(myfont)
text("Hello", 200, 200)
}

不需要ready函数，因为如果在preload函数中，较新版本的p5.js将在项目完成加载之前不显示它。

- unixGeek

Answer 5

根据文档，如果您有一个p5识别（如otf、ttf等）的字体文件，则可以加载该字体文件，然后使用以下2行代码：

var myFont = loadFont('customfont.ttf');
textFont(myFont);

然后用这样的字体编写：

text('Stack overflow', 2,2);

- Michael Quintero

---

这对我有用。但是，必须使用本地服务器运行它。我想知道为什么？如果不使用本地服务器（在我的情况下是Xampp中的Apache），它会在控制台中显示错误 -“XML_HTTP_REQUEST_ERROR”。 - Pramesh Bajracharya

@PrameshBajracharya，“file:”协议无法执行CORS。 - Benny Jobigan