Canvas 字体 font

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

为什么呢?

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

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

衬线字体和无衬线字体

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

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

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

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

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

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

常用的字体一般设置为非衬线的,兼顾了 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>

运行结果如下



字体越大越清晰,如果要兼顾,一般要 14px+

参考文档

  1. 何保证网页的字体在各平台都尽量显示为最高质量的黑体

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.