Cufon在渲染网页字体你不知道的事
清单 1. 无效的 font-family 字体指定
<style> |
因为在大部分的浏览器上,并不会安装有 Baroque Script 字体。因此在这些浏览器上系统会主动“忽略”掉代码中关于 font-family 的说明,转而使用缺省字体进行输出
图 1. 设计者为网站所设计的公司简介效果图(部分)
最初的设计初衷想法。
图 2. 在没有安装 Baroque Script 字体浏览器上的公司简介输出效果
结果却是不堪入目。
清单 2. 通过 @font-face 引入外部字体
……
@font-face {
font-family: "Baroque Script";
src: url('BaroqueScript.ttf')
}
……
清单 3. 引入 Cufon 核心库
<script src="cufon-yui.js" type="text/javascript"></script>
清单 4. 引入 Cufon 字体文件
<script src="Baroque_Script_400.font.js" type="text/javascript"></script> |
为标记附加 Cufon 转换
在完成了上述的两项准备工作后,事实上使用 Cufon 类库来实现对字体的渲染是非常简单的,这仅仅牵涉到了 Cufon 类库所提供的一个核心方法,即 Cufon.replace 方法
清单 5. 使用 Cufon.replace 方法对标记字体进行渲染
<script> |
清单 6. Cufon.set 语法规范
Cufon.set("配置项名称", 配置项值 ) |
举例而言,针对范例 2.htm,如果我们希望在显示时相关文字的颜色为红色,那么我们就可以在调用 Cufon.replace 方法之前,通过 Cufon.set 首先对 color 配置项进行设置,如下代码所示,完整的实现则可以参考范例 3.htm。
清单 7. 使用 Cufon.set 改变所渲染文字的颜色
Cufon.set("color", "#FF0000");
……
<p style="font-size:36px; color:green">This is the company's introduction</p> 清单 8. 完整的 Cufon.relace 语法规范
Cufon.replace("选择符", {"配置项 1" : 值 , "配置项 2": 值 , …… }); |
关于缺省渲染字体
如果不通过 fontFamily 配置,进行指定,那么,cufon 将使用在顺序上,最后引入到系统的那个 cufon 字体文件所对应的字体,来对相关标记进行渲染。
这是 Cufon 应用的另一大特色。在同一个页面中,Cufon 可以为不同的标记对象,提供不同的字体渲染效果,这对于实际的 Web 应用而言,当然是非常常见的一个需求。
而 Cufon 对此功能的支持则仍然是通过配置项来完成的。在 Cufon 中开发着可以通过指定配置项“fontFamily”,来确定对应标记对象所需要使用的字体。
清单 9. 使用不同的字体渲染标记
Cufon.replace("#id1", {fontFamily : "Baroque Script"}); |
清单 10. 饼图描述实例
var pie = [ |
清单 11. 接口对象声明
var StatisticalGraph = (function(){
this.draw = function(data, type, dest, options){
……
};
……
return this;
})();
清单 12. 饼图绘画接口
……
创建画笔对象 在创建了 Canvas 对象后,我们并不能直接在 Canvas 画布上进心绘画,而是需要通过创建一个一个画笔对象,才能够实现在 Canvas 画布上的绘画。这一画笔对象的创建方法也非常简单,如下代码所示,其中,“2d”表明在此处将使用二维平面模式进行绘画。 清单 14. 创建画笔
绘画并填充扇形区域 那么,我们又该如何使用画笔对象,进行统计图表如饼图的绘画呢?从几何学角度来讲每个饼图其实都是由若干个扇形所组成的,所以饼图绘画的核心,其实也就在于每一个扇形的作画上。而对于 Canvas 而言以下两点则是需要读者特别了解的。
当然,结合一定的数学知识,尤其是三角函数知识,笔者相信这一问题其实并不难解决。为方便起见,笔者在此将通过代码注解的方式,向读者来介绍在这一过程中的一些关键所在,以供读者参考。 清单 15. 绘画并填充扇形 清单 16. VML 基本应用范例
因此,在 VML 下动态创建图形的过程,其实也就是动态创建 VML 语言标记并将其附加到画布(即某一标记)下的过程,这二者是完全一致的。
这是 VML 应用另外一个与众不同之处。在 VML 的规范中,开发者如果希望使用 VML 技术来进行页面的绘画,则不仅仅需要如一般
清单 17. 需要为标记增加 behavior 风格,才能为 IE 解析 <!--[if IE]> |
Cufon在渲染网页字体你不知道的事的更多相关文章
- setTimeout,setInterval你不知道的事
javascript线程解释(setTimeout,setInterval你不知道的事) 标签: javascript引擎任务浏览器functionxmlhttprequest 2011-11-21 ...
- 利用Cufon技术渲染文字的简单示例
Cufon是一种能够根据指定的字体渲染文字的技术.今天试用了下,主要有几个步骤: 1.下载Cufon.js(http://cufon.shoqolate.com/generate/) 2.获取需要渲染 ...
- 使用 font-spider 对 webfont 网页字体进行压缩
原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...
- css基础—字体那些事
css基础-字体那些事 1. 首先讲字的大小样式等 字体大小 font-size: 40px; 文字字体 font-family: "宋体",Arial; 文字样式 font-st ...
- Type.js – 帮助你更好的控制网页字体排版
Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就 ...
- Font Combiner – 自定义网页字体和图标生成工具
Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...
- 网页字体在Frontpage2000制作网页中的讲解
运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力. ...
- 关于js渲染网页时爬取数据的思路和全过程(附源码)
于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...
- jQuery控制网页字体大小和肤色
在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> ...
随机推荐
- 【Centos】【Python3】yum install 报错
运行yum install 安装时报错 File "/usr/libexec/urlgrabber-ext-down", line 28 except OSError, e: Sy ...
- (转)FFmpeg源代码简单分析:avformat_open_input()
目录(?)[+] ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结 ...
- Android 4.4从图库选择图片,获取图片路径并裁剪
转至 http://blog.csdn.net/tempersitu/article/details/20557383 最近在做一个从图库选择图片或拍照,然后裁剪的功能.本来是没问题的,一直在用 In ...
- repo sync出现“fatal: '../platform/abi/cpp.git' does not appear to be a git repository”的解决方案
在我下载Android源代码时,在最后一步调用repo sync,出现“fatal: '../platform/abi/cpp.git' does not appear to be a git rep ...
- cuffquant 定量的结果全部为-nan
cuffquant 定量的过程中,当所有基因或者转录本的表达量都为0时,定量的结果就回全部是-nan , 而不是0: 出现这种情况有两种原因: 1) 参考基因组搞错了,比对和定量的不是同一个参考基因 ...
- EF学习和使用综合
一.(引)你必须知道的EF知识和经验 二.(引)EF学习和使用(七)EF性能优化篇 三.(引)采用EntityFramework.Extended 对EF进行扩展(Entity Framework 延 ...
- 前端图片压缩上传(纯js的质量压缩,非长宽压缩)
此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head&g ...
- nginx-windows版
nginx windows版,添加 分别是: 重启.启动.停止 下载地址:https://files.cnblogs.com/files/007sx/nginx-windows.zip
- UITextView: 响应键盘的 return 事件
UITextFieldDelegate代理里面响应return键的回调:textFieldShouldReturn:.但是 UITextView的代理UITextViewDelegate 里面并没有这 ...
- android代码规范和studio配置CodeStyle
studio配置CodeStyle可以很好的帮助我们检测代码规范性,保持大家的代码统一,来看看怎么配置和使用吧 代码规范,自己公司的一套 代码规范 一. 简介 A. 目的 本文提供一整 ...