← Canvas 绘制文本 fillText Canvas 文本垂直对齐 textBaseline →

Canvas 字体 font

上一章节中我们使用 fillText() 绘制了一段文本，但看起来有点糊了，不那么清晰

为什么呢？

一方面是因为字体太小，对比下，是不是比我们教程文本的字体小那么一丁点

另一方面是因为字体选择的问题，字体有衬线字体和非衬线字体

衬线字体和无衬线字体

Canvas 中字体分为衬线字体和无衬线字体

衬线字体每个字的笔划有粗有细，衬线体棱角分明，长文阅读比较舒服
而无衬线字体笔划粗细均匀，比较简洁美观，适用于单词短句，例如标题

从下图可以看出它们的区别

中文界的衬线体与无衬线体，两个有代表性的分类——宋体和黑体，分别对应着衬线字体和无衬线字体

打开可以看看不同字体下不同字体大小衬线体与无衬线体的清晰度

因为现在扁平化比较流行，大多数情况下我们使用的都是非衬线字体

常用的字体一般设置为非衬线的，兼顾了 windows / mac 电脑/手机

"Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif

Canvas 提供了 font 属性用于设置要绘制的文本的字体

Canvas font 属性

ctx.font 属性用于绘制文字时，设置当前字体样式的属性

font 的使用和 CSS font 规范相同的字符串值。默认字体是 10px sans-serif

语法

ctx.font = value;

值	说明
value	符合 CSS font 语法的字符串。默认字体是 `10px sans-serif`

例如要设置字体为 48px 大小的微软雅黑，可以使用下面的方法

ctx.font = "48px Microsoft YaHei"

范例

我们先来看看一般的使用方法，将字体为 48px 大小的微软雅黑

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="500" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.font = "48px Microsoft YaHei"
ctx.fillText("简单教程，简单编程",50,50);
</script>

运行结果如下

不同字体大小下的效果

我们使用 for 循环绘制一个 10px-24px 序列的文本，看看字体大小的清晰度

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="400" height="500">
</canvas>

<script>
var fontfamily = 'px "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif';
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");

for (var i= 10; i <= 24; i++ ) {
    ctx.font = i + fontfamily;
    ctx.fillText(i + "px " + "简单教程:www.twle.cn",30,30*(i-9));
}
</script>