HTML 참조 매뉴얼

HTML 태그大全

HTML canvas font 속성

font은 Canvas 2D API는 텍스트를 그리는 데 현재 글꼴 스타일의 속성을 설명합니다. CSS font 규약과 같은 문자열 값을 사용합니다.

온라인 예제

캔버스에 텍스트를 씁니다 30 픽셀의 텍스트를 쓰고, "Arial" 글꼴을 사용합니다:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas font 속성 사용-기본教程(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="15" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다.5　canvas 태그.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.font="30px　Arial";
ctx.fillText("기본教程　oldtoolbag.com",10,50);
</script>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome 및 Safari에서 font을 지원합니다. 속성.

주의:Internet Explorer 8 및 이전 버전에서 <canvas> 요소를 지원하지 않습니다.

정의와 사용법

캔버스에 텍스트 내용의 현재 글꼴 속성을 설정하거나 반환합니다.

font 속성 사용 문법은 CSS font 속성 동일합니다.

기본 값:	10px sans-serif
JavaScript 문법:	context.font="italic small-caps bold 12px arial";

속성 값

값	설명
font-style	글꼴 스타일을 지정합니다. 가능한 값: normal italic oblique
font-variant	글꼴 변체를 지정합니다. 가능한 값: normal small-caps
font-weight	글꼴 두께를 지정합니다. 가능한 값: normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height	픽셀 단위로字号과 행높이를 지정합니다.
font-family	폰트 시리즈를 지정합니다.
caption	타이틀 컨트롤을 사용하는 글꼴(예: 버튼, 드롭다운 목록 등)을 사용합니다.
icon	아이콘을 표시하는 글꼴을 사용합니다.
menu	메뉴에 사용되는 글꼴(드롭다운 목록과 메뉴 목록)을 사용합니다.
message-box	다이얼로그에 사용되는 글꼴을 사용합니다.
small-caption	작은 컨트롤을 표시하는 글꼴을 사용합니다.
status-bar	창 상태 바에 사용되는 글꼴을 사용합니다.

HTML canvas 참조 가이드

HTML: <template> 태그