HTML 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> 요소를 지원하지 않습니다.
