웹 글꼴로 문자 그리기(HTML5로 브라우저 게임 만들기)
그래서, 그 차이를 흡수하면서 외형을 좋게 하기 위해서 web 폰트를 도입합니다.
HMG 대부호
htps : // 하세몽몬. 네 t/df5/
아래 준비
우선은 프리 폰트 파일(ttf)을 준비합니다.
자신의 앱 이미지에 맞는 무료 글꼴을 열심히 찾아보세요.
그런 다음 글꼴을 변환합니다.
일본어를 포함한 폰트의 경우, 파일 사이즈가 괜찮아 10MB가 되어 버립니다.
이것으로는 제대로 web상에서 취급할 수 없습니다.
거기서 자신이 사용하고 싶은 문자만을 추출해 서브 세트를 만드는 것이 됩니다.
(덧붙여서 HMG 대부호에서 사용한 서브 세트 파일은 15kb 정도입니다.)
변환은 무사시 시스템의 서브 세트 폰트 메이커라고 하는 툴을 사용합니다.
ht tp // //오펜 tyぺ. jp/sbse t 후안 tmk. htm
이것을 사용하여 서브세트를 만든 후에는 스마트폰으로 취급할 수 있도록 WOFF 형식으로 변환합니다.
이쪽도 무사시시스템씨의 WOFF 컨버터라고 하는 툴을 사용합니다.
이들은 Windows 용 무료 소프트웨어이므로 매우 고맙습니다. (감사)
툴의 사용법은 무사시시스템씨의 사이트에 자세하게 실려 있으므로 확인해 주세요.
사용방법
우선은 HTML의 HEAD 부분에 web 폰트용의 기술을 추가합니다.
읽는 파일 형식은 타겟이 되는 브라우저에 의해 약간 변화합니다.
스마트 폰 메인이라면 다음 2 파일로 OK입니다.
<style type="text/css">
@font-face {
font-family: 'hm_tb'; /* フォント名 */
src: url('font/hm_tb.woff') format('woff'),
url('font/hm_tb.ttf') format('truetype'); /* フォントファイル */
}
</style>
추가한 폰트의 폰트명을 지정해 canvas에 렌더링 합니다.
<script>
(window.onload = function() { // 読み込み完了を待つ
drawTest();
})();
function drawTest(){
var cv = document.getElementById("TEST_CANVAS");
var ctx = cv.getContext('2d');
ctx.fillStyle = "#ccaf89";
ctx.fillRect(0, 0, 320, 320);
ctx.font = "60px hm_tb"; // サイズとフォント名を指定
ctx.fillStyle = "#ff0000";
ctx.fillText("WebFont", 25, 160);
}
</script>
이것으로 완료. 의 일이 어째서인지 잘 작동하지 않습니다.
출력 결과(실패 및 성공)
여러 번 다시 로드하면 성공과 실패가 반복됩니다.
당시 여기 잠시 끼워넣었는데...
처음에, 로드가 시간에 맞지 않는가 하고 setTimeout으로 시간을 두기도 했습니다만 아직 안정되지 않습니다.
그리고 궁극적으로 성공한 해결책은 캔버스에서 사용하기 전에 글꼴로 DOM에 쓰는 것이 었습니다.
<span style="
font-family: 'hm_tb';
">sample</span>
제 경우 이것으로 완전히 문제 해결했는데, 올바른 원인이나 그 밖에 더 좋은 방법이 있으면 지적 부탁드립니다.
(HMG 대부호에서는 스플래시 화면에 배경색과 같은 색으로 지정한 테스트용 문자를 그립니다.)
다음은 이번 샘플의 모든 소스입니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
@font-face {
font-family: 'hm_tb'; /* フォント名 */
src: url('font/hm_tb.woff') format('woff'),
url('font/hm_tb.ttf') format('truetype'); /* フォントファイル */
}
</style>
<title>webフォントテスト</title>
</head>
<body>
<span style="
font-family: 'hm_tb';
">sample</span><br>
<canvas id="TEST_CANVAS" width="320" height="320"></canvas>
</body>
<script>
(window.onload = function() { // 読み込み完了を待つ
setTimeout(drawTest, 200);
})();
function drawTest(){
var cv = document.getElementById("TEST_CANVAS");
var ctx = cv.getContext('2d');
ctx.fillStyle = "#ccaf89";
ctx.fillRect(0, 0, 320, 320);
ctx.font = "60px hm_tb"; // サイズとフォント名を指定
ctx.fillStyle = "#ff0000";
ctx.fillText("WebFont", 25, 160);
}
</script>
</html>
【선전】
작고 간단한 간단한 게임이지만 하이브리드 앱 두 번째 작품을 만들었습니다.
이번 폰트는 실제로 이 게임에서 이용하고 있습니다. (전회의 캔버스 음영 처리 등도 사용하고 있습니다)
대부호에서는 채용할 수 없었던 사운드 관련도 실장했으므로 나중에 그 근처의 해설도 기사로 하고 싶습니다.
리버시
Reference
이 문제에 관하여(웹 글꼴로 문자 그리기(HTML5로 브라우저 게임 만들기)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/hasemonmon/items/17acababec6fe53711b5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
우선은 HTML의 HEAD 부분에 web 폰트용의 기술을 추가합니다.
읽는 파일 형식은 타겟이 되는 브라우저에 의해 약간 변화합니다.
스마트 폰 메인이라면 다음 2 파일로 OK입니다.
<style type="text/css">
@font-face {
font-family: 'hm_tb'; /* フォント名 */
src: url('font/hm_tb.woff') format('woff'),
url('font/hm_tb.ttf') format('truetype'); /* フォントファイル */
}
</style>
추가한 폰트의 폰트명을 지정해 canvas에 렌더링 합니다.
<script>
(window.onload = function() { // 読み込み完了を待つ
drawTest();
})();
function drawTest(){
var cv = document.getElementById("TEST_CANVAS");
var ctx = cv.getContext('2d');
ctx.fillStyle = "#ccaf89";
ctx.fillRect(0, 0, 320, 320);
ctx.font = "60px hm_tb"; // サイズとフォント名を指定
ctx.fillStyle = "#ff0000";
ctx.fillText("WebFont", 25, 160);
}
</script>
이것으로 완료. 의 일이 어째서인지 잘 작동하지 않습니다.
출력 결과(실패 및 성공)
여러 번 다시 로드하면 성공과 실패가 반복됩니다.
당시 여기 잠시 끼워넣었는데...
처음에, 로드가 시간에 맞지 않는가 하고 setTimeout으로 시간을 두기도 했습니다만 아직 안정되지 않습니다.
그리고 궁극적으로 성공한 해결책은 캔버스에서 사용하기 전에 글꼴로 DOM에 쓰는 것이 었습니다.
<span style="
font-family: 'hm_tb';
">sample</span>
제 경우 이것으로 완전히 문제 해결했는데, 올바른 원인이나 그 밖에 더 좋은 방법이 있으면 지적 부탁드립니다.
(HMG 대부호에서는 스플래시 화면에 배경색과 같은 색으로 지정한 테스트용 문자를 그립니다.)
다음은 이번 샘플의 모든 소스입니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
@font-face {
font-family: 'hm_tb'; /* フォント名 */
src: url('font/hm_tb.woff') format('woff'),
url('font/hm_tb.ttf') format('truetype'); /* フォントファイル */
}
</style>
<title>webフォントテスト</title>
</head>
<body>
<span style="
font-family: 'hm_tb';
">sample</span><br>
<canvas id="TEST_CANVAS" width="320" height="320"></canvas>
</body>
<script>
(window.onload = function() { // 読み込み完了を待つ
setTimeout(drawTest, 200);
})();
function drawTest(){
var cv = document.getElementById("TEST_CANVAS");
var ctx = cv.getContext('2d');
ctx.fillStyle = "#ccaf89";
ctx.fillRect(0, 0, 320, 320);
ctx.font = "60px hm_tb"; // サイズとフォント名を指定
ctx.fillStyle = "#ff0000";
ctx.fillText("WebFont", 25, 160);
}
</script>
</html>
【선전】
작고 간단한 간단한 게임이지만 하이브리드 앱 두 번째 작품을 만들었습니다.
이번 폰트는 실제로 이 게임에서 이용하고 있습니다. (전회의 캔버스 음영 처리 등도 사용하고 있습니다)
대부호에서는 채용할 수 없었던 사운드 관련도 실장했으므로 나중에 그 근처의 해설도 기사로 하고 싶습니다.
리버시
Reference
이 문제에 관하여(웹 글꼴로 문자 그리기(HTML5로 브라우저 게임 만들기)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hasemonmon/items/17acababec6fe53711b5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
