Canvas 字体 font

您所在的位置：网站首页 › 合起来的汉字有哪些字体 › Canvas 字体 font

Canvas 字体 font

2024-07-13 06:46| 来源: 网络整理| 查看: 265

上一章节中我们使用 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 大小的微软雅黑

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

运行结果如下

不同字体大小下的效果

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

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

【本文地址】

Canvas 字体 font

Canvas 字体 font

今日新闻

推荐新闻