Question

据我所知，我只能在创建Arial时使用Sprite。其他字体不起作用。有没有办法添加自定义字体，如Roboto？

代码：

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

在properties我尝试用Ariel替换Roboto，但它无效。有什么想法吗？

上面的代码（只是写了相关部分）有效，并在Ariel给我字体。（虽然有点模糊。想知道如何获得清晰的明文）

Answer 1

要在画布中使用外部字体，您需要确保在调用ctx.fillText()时已加载它们。

只是@font-face是不够的，因为它只是告诉浏览器在哪里找到它，如果它想要加载它。但除非HTML中有实际内容使用该字体，否则浏览器将不会加载该文件。

对于Firefox和Chrome，您可以使用字体加载API。或者，使用类似https://fontfaceobserver.com/的内容来检测字体何时就绪。

如何为精灵

1 个答案: