Wie füge ich benutzerdefinierte Schrift zu Sprite

Question

Soweit ich weiß, kann ich Arial nur verwenden, wenn Sie eine Sprite erstellen. Die anderen Schriftarten funktionieren nicht. Gibt es eine Möglichkeit, benutzerdefinierte Schriftarten wie Roboto hinzuzufügen?

Code:

const makeTextSprite = (_text, properties) => { 
    const text = _text; 
    const canvas = document.createElement('canvas'); 
    const context = canvas.getContext('2d'); 
    context.translate(0.5, 0.5); 
    const metrics = context.measureText(text); 
    const textWidth = metrics.width; 

    context.font = properties.font; 
    context.fillStyle = properties.fillStyle; 
    context.strokeStyle = properties.strokeStyle; 
    context.lineWidth = properties.lineWidth; 

    context.fillText(text, 125, 75); 

    const texture = new THREE.Texture(canvas); 
    texture.needsUpdate = true; 
    return texture; 
}; 

componentDidMount() { 
    const properties = { 
     font: '5px Arial', 
     fillStyle: 'rgb(142, 142, 142)', 
     strokeStyle: 'rgba(255,0,0,1)', 
     lineWidth: 4, 
    }; 

    const texture1 = makeTextSprite('Text Here', properties); 

    this.spriteMaterial1.map = texture1; 
} 

render() { 
    return 
     <React3 
      mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below 
      width={canvasWidth} 
      height={canvasHeight} 
      clearColor={'#ffffff'} 
      antialias 
     > 
     <scene ref={(ref) => { this.scene = ref; }}> 
      <perspectiveCamera 
       name="camera" 
       fov={45} 
       aspect={canvasWidth/canvasHeight} 
       near={1} 
       far={1000} 
       position={this.cameraPosition} 
       ref={(ref) => { this.camera = ref; }} 
      /> 

      <sprite position={this.position1} scale={this.scale} > 
       <spriteMaterial ref={(ref) => { this.spriteMaterial1 = ref; }} /> 
      </sprite> 
     </scene> 
    </React3> 
    } 

In properties versuchte ich Ariel mit Roboto ersetzen, aber es hat nicht funktioniert. Irgendwelche Ideen?

Der Code oben (schrieb nur die relevanten Teile) funktioniert und gibt mir Schriftart in Ariel. (Es ist jedoch ein bisschen verschwommen. Möchten Sie wissen, wie man klaren klaren Text auch erhält)

Answer 1

Um externe Zeichensätze im Canvas zu verwenden, müssen Sie sicherstellen, dass sie bereits geladen sind, wenn Sie ctx.fillText() aufrufen.

Nur die @font-face ist nicht genug, da es nur dem Browser sagt, wo es es finden WENN es es laden will. Wenn jedoch kein HTML-Inhalt vorhanden ist, der die Schriftart verwendet, lädt der Browser die Datei nicht.

Für Firefox und Chrome gibt es die Font-Lade-API, die Sie stattdessen verwenden könnten. Alternativ können Sie mithilfe von https://fontfaceobserver.com/ feststellen, wann die Schriftart bereit ist.