指定的 Google 字体未使用 EasleJS canvas 显示

Question

我尝试显示一种特定的非网络安全字体，结果令人惊讶地证明比我想象的要困难得多。我假设我的代码中有一些拼写错误或其他一些我没有注意到的明显错误，因为显示字体不应该这么困难。

index.html:

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>

        <link rel="stylesheet" type="text/css" href="resources/css/main.css">
    </head>
    <body>
        <canvas id="canvas"></canvas>

        <script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
        <script type="text/javascript" src="resources/js/main.js"></script>
    </body>
</html>

main.css:

@import url("fonts.css");

body {
    width: 100%;
    height: 100%;
    margin: 0px;
}

canvas {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: inherit;
}

fonts.css:

@font-face {
    font-family: "Muli-Regular";
    src: url("https://fonts.googleapis.com/css?family=Muli:400");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Muli-Semi-Bold";
    src: url("https://fonts.googleapis.com/css?family=Muli:600");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Muli-Bold";
    src: url("https://fonts.googleapis.com/css?family=Muli:700");
    font-weight: 700;
    font-style: normal;
}

main.js:

const stage = new createjs.Stage("canvas");
stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;

const title = new createjs.Text();
title.text = "This is my text to display";
title.font = "50px Muli-Regular";
title.color = "#000000";

stage.addChild(title);
stage.update();

结果：（这不是正确的字体）

Answer 1

这个方法对我有用：

@font-face {
    font-family: 'YourFontName';
    src: url('font_path.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

但是，如您所见，我使用的是本地自定义字体文件。我不确定字体文件托管在其他地方是否有任何相关性。

指定的 Google 字体未使用 EasleJS canvas 显示

Specified Google font not displaying with EasleJS canvas

javascript

css

html

fonts

createjs