tmlib.js에서 웹 글꼴을 사용해보십시오!
7676 단어 CSS3tmlib.jsCoffeeScript
소개
모처럼 게임을 만들고 있는데, 브라우저상에서의 게임의 경우 폰트가 환경 의존이 되기 쉽다.
이것은 JavaScript 라이브러리 인 tmlib.js에서도 동일하다고 생각합니다.
그래서 단말의 폰트 제약에 영향을 받지 않는 목적으로, Web 폰트가 있으므로, 이것을 사용해, tmlib.js 로의 게임내에서도 제대로 된 게임에 있던 폰트를 사용해-!
라는 것으로, 해 보았습니다.
다른 방법 등이 있으면 코멘트 잘 부탁드립니다.
CSS 파일
font family 로 지정하는 폰트명은, @font-face 라고 하는 CSS로 설정하는 것 같습니다.
지금 기억했다...
index.css@font-face {
font-family: 'Madoka Runes';
src: url('../fonts/maqbsm.ttf') format('truetype');
}
여기서 설정한다 font-family 가 실제로 사용할 때의 폰트명이 되는 것 같다.
HTML 파일
tmlib.js의 html에서 css를 읽습니다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>tmlib.js:Madomagi Web Font sample</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="lib/develop/tmlib.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id="world"></canvas>
</body>
</html>
이것은 보통 link 태그로 읽어들입니다.
스크립트 (CoffeeScript)
평소와 같이 tmlib.js 템플릿으로
main.js# メイン処理(ページ読み込み後に実行される)
tm.main ->
# アプリケーション作成
app = tm.display.CanvasApp '#world'
# リサイズ
app.resize 640, 400
# 自動フィット
app.fitWindow()
# APバックグラウンド
app.background = 'rgba(150,150,150,1.0)'
# 最初のシーンに切り替える
app.replaceScene TestScene()
# 実行
app.run()
메인 장면은 다음과 같습니다.
TestScene.coffeetm.define 'TestScene',
superClass: 'tm.app.Scene'
init: ->
@superInit()
labelName = 'mon mignon prêt-à-porter'
# ラベルを描画する
@fromJSON
children:
label_1:
type: 'tm.display.Label'
init: [labelName]
fillStyle: 'rgba(0,0,0,1.0)'
x: 640 / 2
y: 200
label_2:
type: 'tm.display.Label'
init: [labelName]
fillStyle: 'rgba(0,0,0,1.0)'
fontFamily: 'Madoka Runes'
fontSize: 32
x: 640 / 2
y: 250
tm.display.Label 의 fontFamily 에 폰트명을 지정하면(자), 사용되는 폰트가 바뀌지만, 여기서 @font-face 로 설정해 둔 폰트명을 지정한다.
이제 어느 단말에서도 같은 폰트가 표시되어 게임의 분위기라든지 있던 폰트로 표시가 가능하게!
좋아! (스스로 해가는 스타일)
샘플
tmlib.js:Madomagi Web Font sample
이런 식으로 표시되어야합니다.
참고
@font-face {
font-family: 'Madoka Runes';
src: url('../fonts/maqbsm.ttf') format('truetype');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>tmlib.js:Madomagi Web Font sample</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="lib/develop/tmlib.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id="world"></canvas>
</body>
</html>
# メイン処理(ページ読み込み後に実行される)
tm.main ->
# アプリケーション作成
app = tm.display.CanvasApp '#world'
# リサイズ
app.resize 640, 400
# 自動フィット
app.fitWindow()
# APバックグラウンド
app.background = 'rgba(150,150,150,1.0)'
# 最初のシーンに切り替える
app.replaceScene TestScene()
# 実行
app.run()
tm.define 'TestScene',
superClass: 'tm.app.Scene'
init: ->
@superInit()
labelName = 'mon mignon prêt-à-porter'
# ラベルを描画する
@fromJSON
children:
label_1:
type: 'tm.display.Label'
init: [labelName]
fillStyle: 'rgba(0,0,0,1.0)'
x: 640 / 2
y: 200
label_2:
type: 'tm.display.Label'
init: [labelName]
fillStyle: 'rgba(0,0,0,1.0)'
fontFamily: 'Madoka Runes'
fontSize: 32
x: 640 / 2
y: 250
웹 글꼴 정보
사용 글꼴
Reference
이 문제에 관하여(tmlib.js에서 웹 글꼴을 사용해보십시오!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YFukuyama/items/3a4a1d4b7b395cc32bd4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
