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画布一起显示

1 个答案: