p5js 库的 loadFont 函数似乎不适合我？

Question

我什至从参考中复制了确切的代码并粘贴到一个新项目中，它总是告诉我文件路径不正确。

我尝试使用以下代码：

`function preload() {font = loadFont('MightySouly-lxggD.ttf')}`

加载我下载使用的字体，但它却给出错误，指出文件路径可能不正确。当我使用参考页面中显示如何使用 loadFont() 的确切代码时，出现了相同的结果。

Answer 1

这是加载字体和外部字体的解决方案。首先创建一个文件夹来保存您的字体。请根据需要随意修改：

index.html
assets/
   fonts/
      LovelyHome.ttf
      Photogenic.otf
      WeddingDay.ttf

然后创建一个数组来保存您的字体，包括文件结构中存储字体的目录：

let fontsArray = [
   'Consolas',                           // no need to execute loadFonts()
   'assets/fonts/LovelyHome.ttf',        // we need to execute loadFonts()
   'assets/fonts/Font1.ttf'              // Font doesn't exist in file structure
];

以下代码将尝试创建一个引导徽章来显示每种字体。

• 如果字体不包含斜杠，例如

  Consolas

  那么它不会调用

  loadFont()

  ，而只会继续创建徽章。
• 如果字体包含斜杠，那么它将尝试加载字体，如果不成功则徽章不可见，否则创建徽章并设置字体。

let fontsArray = [
  'Consolas',
  'assets/fonts/LovelyHome.ttf',
  'assets/fonts/Font1.ttf'
];
let loadedFonts = {};
let form_text;
let form_font;


function preload() {
  setupFonts();
}

function setup() {
  textAlign(CENTER, CENTER);
  textSize(60);
  // Add event listeners for form inputs and submit button to create the canvas
  document.getElementById("createNeon").addEventListener("click", createTextWithFont);
  document.getElementById("formDiv_text").addEventListener("input", createTextWithFont);
  document.getElementById("formDiv_fontTypography").addEventListener("click", createTextWithFont);
}

function createTextWithFont() {

  createCanvas(800, 200).parent('canvas-container'); //Create Canvas
  clear(); //Reset Cnavas
  background(200); //Add Background on canvas

  // Get Text and Font Information
  form_text = document.getElementById('formDiv_text');
  form_font = document.getElementsByClassName("bg-primary")[0].textContent;
  textFont(form_font);

  text(form_text.value, width / 2, height / 2); //Draw Text
}

function setupFonts() {
  fontsArray.forEach(function(thisFont, index) {
    var badge = document.createElement("span");
    badge.style.fontSize = "1.5em";
    badge.style.cursor = "pointer";
    badge.classList.add("badge", "me-1", "mt-1", "typography-badge");
    badge.classList.add(index === 0 ? "bg-primary" : "bg-secondary");

    var fontFamilyPromise = thisFont.includes("/") ? fetch(thisFont, {
        method: 'HEAD'
      })
      .then(response => {
        if (response.ok) {
          loadedFonts[thisFont] = loadFont(thisFont);
          return thisFont.substring(thisFont.lastIndexOf('/') + 1, thisFont.lastIndexOf('.'));
        } else {
          console.log("Font file not found:", thisFont);
          return '';
        }
      }) : Promise.resolve(thisFont);

    fontFamilyPromise.then(fontName => {
      badge.style.fontFamily = fontName;
      badge.textContent = fontName || thisFont;
    });

    badge.addEventListener("click", function() {
      if (!badge.classList.contains("bg-primary")) {
        document.querySelectorAll(".typography-badge").forEach(badge => {
          badge.classList.remove("bg-primary");
          badge.classList.add("bg-secondary");
        });
        badge.classList.remove("bg-secondary");
        badge.classList.add("bg-primary");
        form_font = loadedFonts[thisFont] || fontFamilyPromise;
      }
    });
    document.getElementById("formDiv_fontTypography").appendChild(badge);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">

<style>
  #canvas-container {
    display: flex;
    justify-content: center;
  }
</style>

<div class="container mt-5">
  <h1>Upload custom fonts on canvas</h1>
  <div class="row mb-3">
    <label for="textInput" class="col-sm-2 col-form-label">Step 1: Add your own text.</label>
    <div class="col-sm-10">
      <textarea class="form-control" id="formDiv_text" rows="3" placeholder="Enter text">Happy Birthday</textarea>
    </div>
  </div>
  <div class="row mb-3">
    <label for="fontOptions" class="col-sm-2 col-form-label">Step 2: Select your Font</label>
    <div class="col-sm-10">
      <div class="row row-cols-auto" id="formDiv_fontTypography">
        <!-- Generated badges from JavaScript -->
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button type="submit" class="btn btn-primary" id="createNeon">Submit</button>
    </div>
  </div>
</div>

<div id="canvas-container" class="container mt-3">
  <!-- Canvas will be placed here -->
</div>

<div id="canvas-container" class="container mt-3">
  <!-- Canvas will be placed here -->
</div>