Question

如何更改p5.js中的字体？它无法识别处理术语＆＃34; loadFont，＆＃34;不会遗留CSS中的字体，也不会让我放入.vlw文件或链接到GoogleFont。至少，我没有尝试过任何方式。

参考页面仅包含＆＃34; text＆＃34;和＆＃34; textFont＆＃34; options（在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 的例子中有的

不起作用。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

获取.ttf或.otf字体文件。此字体文件将在执行时加载到您的应用程序。
声明一个全局变量以保留字体。
使用loadFont在预加载函数中加载字体。
加载字体后，必须使用textFont（）告诉p5这是要使用的字体。
打印文字（）。

以下是一个例子：

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

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

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

然后用这样的字体写：

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

Answer 4

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

var font;

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

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

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

Answer 5

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

不需要就绪函数，因为较新版本的如果项目在预加载函数中，p5.js 将不会显示项目，直到它完成加载。

p5.js loadFont函数？

5 个答案:

p5.j​​s loadFont函数？

5 个答案:

p5.js loadFont函数？