p5.js loadFont function?

p5.js loadFont function?

本文关键字：function loadFont js p5      更新时间：2023-09-26

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

references页面只包含"text"answers"textFont"选项（在p5.js references页面末尾的Typhography部分），这两个选项都不允许实际指定字体。

我也试过

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示例中使用的不起作用。

必须有另一种字体的方法。请帮忙！

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

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>

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

  1. 获取.ttf或.otf字体文件。此字体文件将在执行时加载到您的应用程序中
  2. 声明一个全局变量以保持字体
  3. 在预加载函数中使用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);
    }
}

您需要在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);
}

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

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

然后用这样的字体写：

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

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

不需要就绪功能，因为如果项目在预加载函数中，则在完成加载之前，p5.js不会显示该项目。

相关文章：