导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

HTML canvas font 属性


实例

在画布上写一个 30px 高的文本,使用“Arial”字体

您的浏览器不支持 HTML5 canvas 标签。

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");


ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
亲自试一试 »

描述

font 属性设置或返回 canvas 文本的字体属性。

font 属性使用与 CSS font 属性相同的语法。

默认值为 10px sans-serif。

另请参阅

fillStyle 属性 (设置文本颜色/渐变)

textAlign 属性 (设置文本对齐方式)

textBaseline 属性 (设置文本基线)

fillText() 方法 (绘制文本)

strokeText() 方法 (绘制文本)


语法

context.font = "italic small-caps bold 12px arial"

属性值

描述 试一试
font-style
  • normal
  • 斜体
  • 倾斜
试一试 »
font-variant
  • normal
  • 小型大写字母
试一试 »
font-weight
  • normal
  • 粗体
  • 更粗
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
试一试 »
font-size 像素字体大小 试一试 »
font-family 字体系列 试一试 »
标题 使用按钮中使用的字体 试一试 »

浏览器支持

<canvas> 元素是 HTML5 标准(2014)。

font 在所有现代浏览器中都受支持

           
Chrome Edge Firefox Safari Opera IE
9-11

Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。