定义和用法
font 属性 设置或返回 画布上文本内容的当前字体属性。
在Canvas font API属性使用的语法与 CSS中font的属性相同。
如果在实际运用中,我们没有设定font的具体属性值,它的默认值为:
10px sans-serif(10px 无衬线体)
在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中用不到) |
从目前的显示效果来看,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 基础教程 - 简单教程,简单编程