首页 前端知识 Chapter1.1——HTML5 Canvas API中的font

Chapter1.1——HTML5 Canvas API中的font

2024-11-10 09:11:50 前端知识 前端哥 978 151 我要收藏

定义和用法

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

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

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

10px sans-serif(10px 无衬线体)

Chapter1.1——HTML5 Canvas API中的font

Chapter1.1——HTML5 Canvas API中的font

在JavaScript中的语法示例:

context.font="italic small-caps bold 12px arial";

根据以上代码,我们知道在这个API中的font属性有五个参数,也就是

context.font="[font-style],[font-variant],[font-weight],[font-size]/[line-height],[font-family]";

1.font-style 属性定义字体的风格

normal默认值,显示标准样式(可不写)
italic斜体的字体样式
oblique倾斜的字体样式
inherit从父元素继承的样式(在js中用不到)

Chapter1.1——HTML5 Canvas API中的font

从目前的显示效果来看,italic和oblique的效果并没有区别,那么它们各有什么用途呢?

其实它们都是让字体具有倾斜的效果,italic是字体自带的斜体属性,oblique是使字体向右倾斜。但是,并不是所有字体都具有斜体的样式,对于那些没有斜体样式的字体来说,使用italic是没有效果的,此时就可以利用oblique代替italic来实现字体倾斜的效果啦。

参考链接:italic和oblique的区别_italic oblique-CSDN博客

一句话总结

italic和oblique都是让字体具有倾斜的效果,当字体没有italic属性时,可以使用oblique来替代。

2.font-variant 属性定义字体的显示形式

variant词意:

n.变体; 变种; 变形;
adj.变异的; 不同的,相异的,不一致的; 多样的; 易变的,不定的;

它具有两种属性:

normal默认值。浏览器显示一个标准的字体样式。
small-caps浏览器会显示小型大写字母的字体。

font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

3.font-weight 属性设置文本的粗细

用好开发者工具,参考官方手册。

万维网联盟(World Wide Web Consortium,简称 W3C

另附地址:CSS3字体模块 - HTML5 Chinese Interest Group Wiki

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,代表字号值

5.font-family 规定元素的字体(系列)

默认为sans-serif(无衬线体)

在绘图上下文的.font属性中,除了使用"Arial"字体之外,还可以使用其他的字体。有很多种字体可以在绘图上下文中使用,以下是一些常用的选项:

"微软雅黑":这是一种非常常见的微软自带的中文黑体字体,通常在Windows系统中预装。

"华文细黑":这是一种非常常见的中文细体字体。

"宋体":这是一种非常常见的中文衬线字体。

"Times New Roman":这是一种非常常见的英文衬线字体。

"Verdana":这是一种非常常见的英文无衬线字体。

"Courier New":这是一种非常常见的英文等宽字体。

"黑体":这是一种非常常见的中文无衬线字体。

"Georgia":这是一种非常常见的英文衬线字体。

"Tahoma":这是一种非常常见的无衬线字体,常用于界面设计。

此外,还可以使用"Hiragino Sans GB",这是一种日本的衬线字体;"微软雅黑",这也是微软公司的一种字体;还有"方正姚体",这是一种中国大陆的电脑字体。

这些字体都可以在绘图上下文中使用,但是不同的字体在不同的环境中可能表现不同,所以在选择字体时,需要根据具体情况进行选择。

此处不做演示,大家可以自行实践!

参考资料:HTML5 canvas font 属性

参考资料:Canvas 字体 font - Canvas 基础教程 - 简单教程,简单编程

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20109.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!