Canvas font 속성
예제
40픽셀의 텍스트를 캔버스에 씁니다. 사용할 글꼴은 "Arial"입니다:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);
문법
context.font="italic small-caps bold 12px arial";
속성 값
| 값 | 설명 |
|---|---|
| font-style |
글꼴 스타일을 정의합니다. 가능한 값:
|
| font-variant |
글꼴 변체를 정의합니다. 가능한 값:
|
| font-weight |
글꼴의 두께를 정의합니다. 가능한 값:
|
| font-size / line-height | 글꼴 크기와 행 높이를 픽셀로 계산하여 정의합니다. |
| font-family | 글꼴 시리즈를 정의합니다. |
| caption | 타이틀 컨트롤을 표시하기 위한 글꼴(예: 버튼, 드롭다운 목록 등)을 사용합니다. |
| icon | 아이콘을 표시하기 위한 글꼴을 사용합니다. |
| menu | 메뉴에서 사용할 글꼴(드롭다운 목록과 메뉴 목록)을 사용합니다. |
| message-box | 대화 상자에서 사용할 글꼴을 사용합니다. |
| small-caption | 소형 컨트롤을 표시하기 위한 글꼴을 사용합니다. |
| status-bar | 윈도우 상태 표시줄에 사용되는 글꼴을 사용합니다. |
기술 세부 사항
| 기본 값: | 10px sans-serif |
|---|
브라우저 지원
표의 숫자는 해당 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
