p5.js loadFont 函数？答案

【问题标题】：p5.js loadFont function?p5.js loadFont 函数？
【发布时间】：2014-11-24 11:58:19
【问题描述】：

如何更改 p5.js 中的字体？它不识别处理术语“loadFont”，不从 CSS 继承字体，也不让我放入 .vlw 文件或链接到 GoogleFont。至少，我没有以任何方式尝试过。

参考页面仅包含“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";

他们在 text 和 textFont 的示例中的那些不起作用。

必须有办法拥有另一种字体。请帮忙！

【问题讨论】：

标签： javascript p5.js

【解决方案1】：

参考文献中给出的例子很好。运行下面的代码 sn-p 以获得结果。当你说它不适合你时，你是什么意思？

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>

【讨论】：

【解决方案2】：

根据文档，如果您有一个 p5 识别 (such as otf, ttf ect...) 的字体文件，您可以加载该字体文件，然后使用以下 2 行代码：

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

然后用这样的字体写：

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

【讨论】：

这对我有用。但是，必须使用本地服务器运行它。我想知道为什么？。不使用本地服务器（在我的例子中来自 Xampp 的 Apache）它在控制台中显示错误 - “XML_HTTP_REQUEST_ERROR”
@PrameshBajracharya "file:" 协议不能做 CORS。

【解决方案3】：

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

获取 .ttf 或 .otf 字体文件。此字体文件将在执行时加载到您的应用。
声明一个全局变量来保留字体。
在预加载函数中使用 loadFont 加载字体。
加载字体后，您必须使用 textFont() 告诉 p5 这是要使用的字体。
用 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);
    }
}

【讨论】：

布尔值不是必需的，预加载将在调用设置之前完成
没错，在设置之前会调用 preload，但由于 loadFont 调用中的一些错误情况，字体可能不可用。

【解决方案4】：

你需要在preload中加载字体：

var font;

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

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：