Chapter1.1——HTML5 Canvas API中的font

定义和用法

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 基础教程 - 简单教程，简单编程