如何將Fontawesome 6 Pro自托管圖標與HTML5 canvas集成？

Question

我有一個 React 項目，並按照本指南自行托管了 fonts

我的文件夾如下所示：

src
|___fonts
|   |___css
|   |   |___fontawesome.css
|   |   |___regular.css
|   |___webfonts
|       |___fa-regular-400.woff2
|       |___fa-regular-400.ttf
|___App.css
|___App.ts
|___...

在我的 App.js 中，我有以下代碼：

import React, {useLayoutEffect, useRef} from 'react';
import './App.css';
import './fonts/css/fontawesome.css';
import './fonts/css/regular.css';
function App() {

  const canvasRef = useRef<HTMLCanvasElement>(null);
  let ctx: CanvasRenderingContext2D;
  let canvas: HTMLCanvasElement;
  useLayoutEffect(() => {
    canvas = canvasRef.current as HTMLCanvasElement;
    ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
    draw();
  }, []);

  const draw = (): void => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = '100px Font Awesome 6 Pro';
    ctx.fillText('\uf111', 100, 100);
    requestAnimationFrame(draw);
  }

  return (
    <div className="App">
      <canvas id={'game_canvas'} ref={canvasRef} width={500} height={500}>Your browser doesn't support canvas.</canvas>
      <p>&#xf111;</p>
    </div>
  );
}

export default App.ts;

和 App.css 里面

.App {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Font Awesome 6 Pro';
}
.App #game_canvas {
  border: 1px solid red;
}

請注意，在 canvas 之后，我呈現了一個<p></p>標簽。 該標記對 unicode 使用 HTML 語法，而在ctx.fillText function 中我使用的是其他語法。

結果是我看到了在<p></p>標記中呈現的圖標，但沒有看到 canvas 上下文中的圖標。

里面canvas圖標壞了，但是外面可以看到fa-circle-icon

我嘗試交替使用 unicode 的幾種語法，並按照本指南將排版與樣式化組件集成，但沒有取得好的結果。

預期的行為是能夠從 canvas 2D 上下文中的自托管網絡字體呈現圖標。

Answer 1

發現問題，我只是忘記了定義ctx.font屬性的字體名稱中的雙引號

ctx.font = '100px Font Awesome 6 Pro' //wrong
ctx.font = '100px "Font Awesome 6 Pro"' //correct

仔細查看時發現了問題： How can I use FontAwesome icons on a html 5 canvas