지정된 Google 글꼴이 EasleJS 캔버스로 표시되지 않음

웹 안전하지 않은 특정 글꼴을 표시하려는 시도가 놀랍게도 상상할 수 없었던 것보다 훨씬 더 어렵다는 것이 입증되었습니다. 나는 폰트를 표시하는 것이 어렵지 않아야하기 때문에 내 코드 또는 일부 이스케이프 오류에 오타가 있다고 가정합니다.지정된 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

Google 웹 글꼴을 다운로드하고 작동하는 CSS 파일을 생성하여 서버없이 이러한 글꼴을 사용하려면 http://www.localfont.com을 사용했습니다. – 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 캔버스로 표시되지 않음

답변

관련 문제