【文本】HTML5 Canvas设置字型属性(font-style、font-variant、font-weight、font-size、line-height、font-family)

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

介绍

在Canvas中，可以通过绘图环境对象的font属性设置文本所采用的字型。该属性是一个CSS3格式的字型字符串，各个分量如下表所示，在设置font属性时，需要从上到下一次制定这些分量的值。

Canvas默认字型是10px sans-serif 。font-style、font-variant、font-weidht的默认值均为normal。

font属性的各个分量

字型各个分量	有效取值
font-style	normal | italic | oblique，italic是常规的cursive(手写体)，oblique是倾斜的字体版本，大多数情况下二者没有区别
font-variant	normal | small-caps，字体变体，small-caps可以将小写字母转化为小尺寸的大写字母
font-weight	normal | blod | bloder | lighter | 100 | 200 |……
font-size	larger | medium | …… 字型的大小
line-height	浏览器强制normal值，不管你设置什么值
font-family	”family-name“格式： 一个字体族的名字。例如"Times" 和 "Helvetica" 都是字体族名。字体族名可以包含空格，但包含空格时应该用引号。 “generic-name”格式： 通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。 在列表的末尾应该至少有一个通用字体族名。 以下是该属性可能的取值以及他们的定义。

在线示例

该应用程序将每个要绘制的字符串设置为绘图环境对象的font值，然后用fillText()绘制到屏幕上。

在线演示 详细代码

以各种指定的字体来绘制文本

 

左边这一列字符串所使用的字型都是Palatino字体集的变种，右边一列演示了一些“网络安全字型”(Web-safe font)的绘制效果。这个“安全”并不是说字体本身有什么危险性，实际意思是这些字体在三大主流操作系统中所有浏览器上都能被正确地渲染，因为已经广泛地被使用在了Windows、Mac和Linux上。

另外，如果font值无效，浏览器就不会修改该属性值。比如说，设置font-style和font-family分量时弄错了顺序，或非法指定了font-style分量等等。