Chapter1.1——HTML5 Canvas API中的font

2023年11月10日 233点热度 0人点赞 0条评论

定义和用法

font 属性设置或返回画布上文本内容的当前字体属性。

在Canvas font API属性使用的语法与 CSS中font的属性相同。

如果在实际运用中，我们没有设定font的具体属性值，它的默认值为：

10px sans-serif（10px 无衬线体）

在JavaScript中的语法示例：

[qzdypre]context.font="italic small-caps bold 12px arial";[/qzdypre]

根据以上代码，我们知道在这个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，代表字号值