7

p5.j​​sでフォントを変更するにはどうすればよいですか? 処理用語「loadFont」を認識せず、CSS からフォントを引き継がず、.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";

text と textFont の例にあるものは機能しません。

別のフォントを使用する方法が必要です。助けてください！

4

5 に答える 5

4

リファレンスに示されている例は問題なく動作します。結果を得るには、以下のコード スニペットを実行します。うまくいかないと言うとき、あなたは何を意味しますか？

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>

于 2014-09-30T01:05:52.200 に答える
1

p5.j​​s にフォントをロードするには、.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);
    }
}
于 2016-01-20T06:14:41.323 に答える