クラウド実行時にLEDマトリクスの表示フォントが適用されない

ブラウザ実行時にはフォント適用されますが、クラウド実行時にフォントが適用されません。

例えば「Nikukyu」でのカタカナは適用されるのですが、下記のサンプルでは数字が「Roboto」でのフォントで表示されません。

<html>

<head>

<style>

body{

display:flex;

flex-direction:column;

}

canvas{

width:32px;

margin-bottom:5px;

}

</style>

WebFont.load({

google: {

families: ['Roboto'],

loading: function() {

console.log('loading');

active: function() {

console.log('active');

inactive: function() {

console.log('inactive');

fontloading: function(familyName, fvd) {

console.log('fontloading', familyName, fvd);

fontactive: function(familyName, fvd) {

console.log('fontactive', familyName, fvd);

// Obniz用

const deviceName = 'MatrixLED_MAX7219'; // デバイス名

const width = 8*4; // LEDマトリクスの幅

const height = 8; // LEDマトリクスの高さ

const brightness = 0; // LED明るさ 1～15

const speed = 60; // 文字の流れるスピード

const centerfont = '14px "Roboto"'; // フォント

console.log("表示開始")

//////////////////////////////////////////////////////

// 画面表示

//////////////////////////////////////////////////////

const display = (text) => {

const obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async () => {

obniz.resetOnDisconnect(false);

obniz.display.print("表示中");

// Obnizの配線

// 上部のLEDマトリクス

const matrixTop = obniz.wired(deviceName, { clk:0, cs:1, din:2, gnd:3, vcc:4});

// 下部のLEDマトリクス

const matrixBottom = obniz.wired(deviceName, { clk:5, cs:6, din:7, gnd:8, vcc:9});

// LEDマトリクスの初期設定

matrixTop.init(width, height);

matrixTop.brightness(brightness);

matrixBottom.init(width, height);

matrixBottom.brightness(brightness);

// //LEDマトリクスに表示させるCanvasを生成

const canvasTop = obniz.util.createCanvasContext(width, height);

const canvasBottom = obniz.util.createCanvasContext(width, height);

// 上部LEDマトリクスに表示

canvasTop.fillStyle = "black";

canvasTop.fillRect(0, 0, width, height);

canvasTop.fillStyle = "white";

canvasTop.font = centerfont;

canvasTop.textBaseline = "top";

canvasTop.fillText(text, 0, -2); // 文字が上半分だけ表示されるように位置調整

matrixTop.draw(canvasTop);

// 下部LEDマトリクスに表示

canvasBottom.fillStyle = "black";

canvasBottom.fillRect(0, 0, width, height);

canvasBottom.fillStyle = "white";

canvasBottom.font = centerfont;

canvasBottom.textBaseline = "top";

canvasBottom.fillText(text, 0,-10); // 文字が下半分だけ表示されるように位置調整

matrixBottom.draw(canvasBottom);

if (typeof done === "function") {

console.log("done");

done();

}

display("123");

fontinactive: function(familyName, fvd) {

console.log('fontinactive', familyName, fvd);

}

});

</script>

</head>

<body>

</body>

</html>

クラウド実行時にLEDマトリクスの表示フォントが適用されない

コメント

お探しのものを見つけられませんでしたか？