Manual de referência HTML

Catálogo de etiquetas HTML

Propriedade de fonte do canvas HTML

font é a propriedade de Canvas 2Descrição da API D ao desenhar texto, as propriedades do estilo de fonte atual. Utiliza strings de valor idênticas às especificações de estilo de fonte CSS.

Manual de referência do canvas do HTML

Exemplo online

Escreva um texto na tela do canvas 30 pixels de texto, a fonte usada é "Arial":

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso da propriedade de fonte do canvas HTML-基础教程(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" altura="15" estilo="borda:1px sólido #d3d3d3>
Seu navegador não suporta o HTML5　etiqueta de 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>

Teste para ver ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam a propriedade de fonte propriedade.

Atenção:Internet Explorer 8 versões anteriores ao não suportam o elemento <canvas>.

Definição e uso

define e retorna as propriedades de fonte do texto atual na tela.

a sintaxe da propriedade de fonte é a mesma que propriedade de fonte CSS mesmo.

valor padrão:	10px sans-serif
Sintaxe do JavaScript:	context.font="italic small-caps bold 12px arial";

Valor do atributo

Valor	Descrição
font-style	Especificar o estilo da fonte. Valores possíveis: normal italic oblique
font-variant	Especificar a variante da fonte. Valores possíveis: normal small-caps
font-weight	Especificar a grossura da fonte. Valores possíveis: normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height	Especificar o tamanho e a altura da linha, em pixels.
font-family	Especificar a família de fontes.
caption	Usar a fonte para controles de título (por exemplo, botões, listas de desce).
icon	Usar a fonte para marcar ícones.
menu	Usar a fonte para menus (listas de desce e listas de menu).
message-box	Usar a fonte para caixas de diálogo.
small-caption	Usar a fonte para marcar pequenos componentes.
status-bar	Usar a fonte para a barra de estado da janela.

Manual de referência do canvas do HTML

HTML: <template> etiqueta