HTML5之字体

寻技术 Html/CSS 2023年07月11日 91

- 使用CSS样式来定义

context.font = [CSS font property]
context.font = [font-style font-variant font-weight font-size font-family ]

属性名:font-style/font-variant/font-weight/font-size/font-family

只有font-size和font-family是必须的
如果指定的字体找不到会使用默认的字体
可以指定网络路径字体 @font-face{fontfamily:Scriptina;src:url('fonts/scriptina.ttf');}

--- 水平对齐方式

- textAlign属性用于判断水平对齐方式
context.textAlign = [left|right|center|*start|end]

- 修改浏览器字体排列方向
document.dir = [*|tr|rtl]

--- 垂直对齐方式

- textBaseline 指定垂直对齐方式
context.textBaseline = [top|middle|*alphabetic|bottom|hanging|ideographic]

--- 绘制文字

- 类似于绘制图形,首先fill然后stroke
context.fillText(text,x,y,maxwidth)
context.strokeText(text,x,y,maxwidth)

- 测量文字宽度
TextWidth = context.measureText(text).width

 

关闭

用微信“扫一扫”