共计 2065 个字符，预计需要花费 6 分钟才能阅读完成。
定义和用法
font 属性 设置或返回 画布上文本内容的当前字体属性。
在 Canvas font API 属性使用的语法与 CSS 中 font 的属性相同。
如果在实际运用中，我们没有设定 font 的具体属性值，它的默认值为：
10px sans-serif（10px 无衬线体）
在 JavaScript 中的语法示例：
context.font="italic small-caps bold 12px arial";根据以上代码，我们知道在这个 API 中的 font 属性有五个参数，也就是
context.font=”[font-style],[font-variant],[font-weight],[font-size]/[line-height],[font-family]”;
1.font-style 属性定义字体的风格
| normal | 默认值，显示标准样式（可不写） |
| italic | 斜体 的字体样式 |
| oblique | 倾斜 的字体样式 |
| inherit | 从父元素继承的样式（在 js 中用不到） |
从目前的显示效果来看，italic 和 oblique 的效果并没有区别，那么它们各有什么用途呢？
其实它们都是让字体具有倾斜的效果，italic 是 字体自带 的斜体属性，oblique 是 使字体向右倾斜 。但是， 并不是所有字体都具有斜体 的样式，对于那些没有斜体样式的字体来说，使用 italic 是没有效果的，此时就可以 利用 oblique 代替 italic来实现字体倾斜的效果啦。
参考链接：italic 和 oblique 的区别_italic oblique-CSDN 博客
一句话总结：
italic 和 oblique 都是让字体具有倾斜的效果，当字体没有 italic 属性时，可以使用 oblique 来替代。
2.font-variant 属性定义字体的显示形式
variant 词意：
| n. | 变体; 变种; 变形; |
| adj. | 变异的; 不同的，相异的，不一致的; 多样的; 易变的，不定的; |
它具有两种属性：
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
3.font-weight 属性设置文本的粗细
用好开发者工具，参考官方手册。
万维网联盟（World Wide Web Consortium，简称 W3C）
另附地址：CSS3 字体模块 – HTML5 Chinese Interest Group Wiki
| normal | 默认值（为 400）。浏览器显示一个标准的字体样式。 |
| bold | 定义粗体字符。默认值为 700 |
| bolder（bold 的比较级） | 定义更粗的字符。（指定外观的重量大于继承的值。） |
| lighter | 定义更细的字符。(100)（指定外观的重量小于继承的值。） |
| 1-1000 之间的值 | 定义由粗到细的字符。400 等同于 normal，而 700 等同 bold。 |
bolder 和 lighter：对于继承的值作比较，然后继承它的上一级或者下一级的值，以 100，400(normal)，700(bold)为标准。遵循四舍五入的原则！注意最后它会变成一个值，而不是 bolder 和 lighter 本身
4.font-size 属性可设置字体的尺寸。
规定字号和行高，以像素计。
| xx-small | 最小字体 |
| x-small | 较小字体 |
| small | 小字体 |
| medium | 缺省值 |
| large | 大字体 |
| x-large | 较大字体 |
| xx-large | 最大字体 |
| 任意数值 | 单位 px，代表字号值 |
5.font-family 规定元素的字体（系列）
默认为 sans-serif（无衬线体）
在绘图上下文的.font 属性中，除了使用 ”Arial” 字体之外，还可以使用其他的字体。有很多种字体可以在绘图上下文中使用，以下是一些常用的选项：
“ 微软雅黑 ”：这是一种非常常见的微软自带的中文黑体字体，通常在 Windows 系统中预装。
“ 华文细黑 ”：这是一种非常常见的中文细体字体。
“ 宋体 ”：这是一种非常常见的中文衬线字体。
“Times New Roman”：这是一种非常常见的英文衬线字体。
“Verdana”：这是一种非常常见的英文无衬线字体。
“Courier New”：这是一种非常常见的英文等宽字体。
“ 黑体 ”：这是一种非常常见的中文无衬线字体。
“Georgia”：这是一种非常常见的英文衬线字体。
“Tahoma”：这是一种非常常见的无衬线字体，常用于界面设计。
此外，还可以使用 ”Hiragino Sans GB”，这是一种日本的衬线字体；” 微软雅黑 ”，这也是微软公司的一种字体；还有 ” 方正姚体 ”，这是一种中国大陆的电脑字体。
这些字体都可以在绘图上下文中使用，但是不同的字体在不同的环境中可能表现不同，所以在选择字体时，需要根据具体情况进行选择。
此处不做演示，大家可以自行实践！
参考资料：HTML5 canvas font 属性
参考资料：Canvas 字体 font – Canvas 基础教程 – 简单教程，简单编程
原文地址: Chapter1.1——HTML5 Canvas API 中的 font
