定义和用法
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来实现字体倾斜的效果啦。
参考链接：https://blog.csdn.net/cc18868876837/article/details/87647071
一句话总结：
italic和oblique都是让字体具有倾斜的效果，当字体没有italic属性时，可以使用oblique来替代。
2.font-variant 属性定义字体的显示形式
variant词意：
| n. | 变体; 变种; 变形; |
| adj. | 变异的; 不同的，相异的，不一致的; 多样的; 易变的，不定的; |
它具有两种属性：
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
3.font-weight 属性设置文本的粗细
用好开发者工具，参考官方手册。
万维网联盟（World Wide Web Consortium，简称 W3C）
另附地址：https://www.w3.org/html/ig/zh/wiki/CSS3%E5%AD%97%E4%BD%93%E6%A8%A1%E5%9D%97
| 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"，这是一种日本的衬线字体；"微软雅黑"，这也是微软公司的一种字体；还有"方正姚体"，这是一种中国大陆的电脑字体。
这些字体都可以在绘图上下文中使用，但是不同的字体在不同的环境中可能表现不同，所以在选择字体时，需要根据具体情况进行选择。
此处不做演示，大家可以自行实践！
参考资料：https://m.jb51.net/w3school/tags/canvas_font.htm
参考资料：https://www.twle.cn/l/yufei/canvas/canvas-basic-text-font.html
非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：https://ntvu.love/?p=27
