指定されたGoogleフォントがEasleJSキャンバスで表示されない

Webセーフではない特定のフォントを表示しようとすると、私が想像していたよりもはるかに難しいことが判明しました。私は、フォントを表示することが難しいはずがないので、私のコードにいくつかのタイプミスがあるか、あるいは私を逃している他の目立つエラーがあると仮定します。指定されたGoogleフォントがEasleJSキャンバスで表示されない

の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();

結果：（これは正しいフォントではありません）

出典

2016-12-13 TheDarkIn1978

私はhttp://www.localfont.comを使用して、GoogleのWebフォントをダウンロードし、サーバーなしでこれらのフォントを使用するためのCSSファイルを生成しました。 – TheDarkIn1978

この方法は、私の仕事：

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

しかし、としてあなたが見ることができる、私はローカルのカスタムフォントファイルを使用していた。フォントファイルが他の場所にホストされているという事実が関連性があるかどうかはわかりません。

出典

2016-12-13 18:12:20

ああ、華麗な私は、サーバーを使わなくても別のドメインのフォントにアクセスしようとしていました。 *一口* – TheDarkIn1978

指定されたGoogleフォントがEasleJSキャンバスで表示されない

答えて

関連する問題