- 使用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. XMPP——Smack[6]离线消息和离线文件的实现

    终篇,三天所学所用,也就这些,如果需要大家要自己去查资料研究研究,功能其实可以很强大的 可惜界面做得不好,一大短处,从大一迄今没整好,主要是个人审美不行,哎 毕业季呀毕业季,明天摆摊卖书,再半月就可能 ...

  2. XMPP——Smack[2]会话、消息监听、字体表情和聊天窗口控制

    连接之后,拿到了connection,通过它可以搞定会话 建立一个会话 MessageListener msgListener = new MessageListener() { public voi ...

  3. linux centos6 NAT 端口转发

    有很多时候我们为了安全,需要将例如数据库服务器放到内网中.但是有些时候又系统给外网开一个端口,这时就可以利用外网的服务器进行一个端口转发.今天我们以centos6 为例进行端口转发配置. 首先vi / ...

  4. Codeforces Round #320 (Div. 1) [Bayan Thanks-Round] C. Weakness and Poorness 三分 dp

    C. Weakness and Poorness Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/5 ...

  5. mysqldump原理4

    http://blog.csdn.net/dba_waterbin/article/details/23611601?utm_source=tuicool&utm_medium=referra ...

  6. PHP 环境塔建与数据类型转换

    手动塔建PHP开发环境 安装php c:\apps\php 安装apache c:\apps\apache 1.配制apache 配制c:\apps\apache\conf\httpd.conf Do ...

  7. 转--23种设计模式的搞笑解释(后续放逐一C++解释版本)

    创建型模式 1.FACTORY —追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳和肯德 ...

  8. MySQL(9):数据表的约束(列的属性)

    1.首先我们看一下这个图: 1.NULL| not NULL是否为空      规定一个字段的值是否为NULL 2.Default value 字段默认值属性 常见的是一个字段不能为空,而且存在默认值 ...

  9. 几本关于PHP安全的书

    几本关于PHP安全的书: Essential PHP Security php architect‘s Guide to PHP Security Pro PHP Security Securing ...

  10. java基础学习总结一(java语言发展历史、jdk的下载安装以及配置环境变量)

    最近一段时间计划复习一下java基础知识,使用的视频课程是尚学堂高淇老师的,上课过程中的心得体会直接总结一下,方便以后复习. 一:计算机语言的发展 1:机器语言,最原始的语言,主要有“01”构成,最早 ...