- 使用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

HTML5之字体的更多相关文章

  1. html5——web字体

    基本介绍 1.自定义网页特殊字体,无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去. 2.支持程度比较好,甚至IE低版本浏览器也能支持. 3.web字体的大小鉴定是字 ...

  2. HTML5移动Web开发(八)——避免文本字体大小重置

    适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...

  3. Monotype推出基于HTML5的Web字体平台

    著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台,设计者可以访问近10万字体的目录. Monotype推出基于HTML5的Web字体平台 Monotype推出基于HTML5的We ...

  4. HTML5做手机站页面字体显示很小的解决方法

    HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...

  5. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  6. 01_MUI之Boilerplate中:HTML5示例,动态组件,自定义字体示例,自定义字体示例,图标字体示例

     1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

  7. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

  8. html5 canvas在线文本第二步设置(字体边框)等我全部写完,我会写在页面底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 01_MUI之Boilerplate中:HTML5演示样例,动态组件,自己定义字体演示样例,自己定义字体演示样例,图标字体演示样例

     1安装HBuilder5.0.0,安装后的界面截图例如以下: 2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上 ...

随机推荐

  1. Struts数据效验

    表单数据的验证: 前台验证:主要是通过JS验证, 表达数据是否合法! 后台验证:通过后台java代码进行验证! Struts也提供了数据效验的方式! Struts数据效验, 通过拦截器完成: < ...

  2. MYSQL BLOB 字段大小以及个数的限制測试。

    測试结论 mysql版本号 5.1     表类型: innodb, row_format=compact (这是默认的行格式)     插入超过10个blob, blob的数据量非常小(<76 ...

  3. 成员方法与const之间的关系

    const可以放在成员方法的三个地方,前.中.后. 首先考虑在中间: 1.const修饰形参,表示形参是否为const 2.如果const修饰引用(指针指向的对象),可以进行过载,如果不是修饰引用(指 ...

  4. svn :Can't connect to host *.*.*.*': 由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败。

    Can't connect to host *.*.*.*': 由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败. -------------------------------- ...

  5. Azure Powershell 创建 Internal Load Balancer

    Select-AzureSubscription -SubscriptionName "订阅名称" $serviceName="云服务名称" $ilbName= ...

  6. angualrjs学习总结三(http、select、表格、指令以及事件)

    一:http XMLHttpRequest:$http是angularjs的一个核心服务,用于读取远程服务器的数据.$http.get(url) 是用于读取服务器数据的函数.举例:<div ng ...

  7. TamperData火狐插件启用

    今天第一次在准备学习sqlmap的时候看到有人使用了这个TamperData火狐的插件,所以我也安装来看看,光是安装了,但是重启浏览器之后不知道怎么启用,得不到想要的运行界面,所以在这里记录一下,为自 ...

  8. [ImportNew]Java中的并发处理

    本文来源:http://www.importnew.com/14506.html 这篇文章讨论了Java应用中并行处理的多种方法.从自己管理Java线程,到各种更好几的解决方法,Executor服务. ...

  9. Redis的安装与使用

    一.什么 Redis REmote DIctionary Server,简称 Redis,是一个类似于Memcached的Key-Value存储系统.相比Memcached,它支持更丰富的数据结构,包 ...

  10. 问题:loadrunner录制event为0

     loadrunner录制问题问题1:录制时出现event为0的状况 解决办法: 1.如果是IE浏览器,把启用第三方浏览器扩展*钩给去掉    2使用火狐浏览器,这个就比较好,在lr启动的时候就去勾选 ...