做网站设计的时候,常常会遇到想在页面上显示某一字体,但是由于网站用户电脑里没有里某有相应的字体而烦恼。一般会想到的是用图片替换文字。而今天要说的是一个让用户即使电脑里没有那种字体还能自己显示的方法。
sIFR
通过sIFR你可以任意定义WEB中的文本字体,即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果,可以平滑消除文本锯齿,你可以像使用用CSS控制文本一样轻松得到各种文本效果。
参考网站:
sIFR :http://www.mikeindustries.com/blog/sifr/
sIFR 3 :http://novemberborn.net/sifr3
sIFR 字体生成工具:http://www.sifrgenerator.com/wizard.html
Typeface
Typeface被以为是替换SIFR的最佳方案,相对于sIFR,Typeface少了Flash的应用,使用纯JS来嵌进相关字体,而且用法也很简单:在页面中引进相应的js文件就OK了。
<html>
<head>
<!-- 加载所有的样式先 -->
<link rel="stylesheet" type="text/css" ref="/style.css">
<!-- 再加载typeface.js 库文件和typeface.js字体文件-->
<script src="typeface-0.13.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<!-- 继续并使用CSS指定typeface.js 字体 -->
<div style="font-family: Helvetiker">文本文本...</div>
</body>
</html>
从中我们可以看出来,使用Typeface只需要着简单的几步就可以在页面中使用嵌进字体了。
typeface资源:
cufon
cufon是一个比较新的技术,是一个很好的sIFR替换方案,它的特点:被浏览器原生支持无需浏览器插件;兼容各个主流浏览器;无需配置;快速渲染大量字体。
cufon的原理:
cufon通过生成器将字体文件转化为SVG字体,再将其转换为VML文件,这对IE很重要,由于IE原生支持VML文件。最后,使用复杂的JavaScript函数将VML文件编码为JSON文件(typeface的原理与此类似)。如下图所示:
这样做有很多好处:加载一个字体文件,只需要加载一些js文件就可以;客户端无需再次手工编码;外部js文件直到加载完成才会被执行,这可以让我们实现无闪烁的干净的替换。压缩率高。相对于字体文件,可压缩掉60-80% 。
cufon的用法:cufon的用法与typeface类似,需要加载一个库文件和字体文件。而与typeface不同的是,你需要使用js初始化cufon:
<script type="text/javascript">Cufón.replace('h2', { fontFamily: 'Qlassik Medium' }); </script>
这与typeface的在样式中定义字体很不一样。
cufon资源:cufon项目、cufon演示、cufon生成器、wp-cufon 一个使用cufon的wordpress插件。
cufon和typeface.js对比:
14.0kb (压缩后) | 16.3kb (未压缩) |
Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome 和 Internet Explorer6+ | Firefox 1.5+, Safari 2+, and Internet Explorer 6+, 最新版已经支持IE8 |
.ttf, .otf, PFB, postscript | .ttf |
font-size, font-style, font-weight, line-height, text-shadow, color | font-size, font-style, font-weight, font-stretch, letter-spacing, line-height |
尚不支持 | 尚不支持 |
从这个对比中可以看出来,两者并没有太大的不同,cufon支持更多的浏览器和字体类型,而typeface支持更多的字体样式。实际应用中貌似typeface方便一些,可以直接在样式中定义字体,而cufon则有总体文件大小方面的上风。具体用哪一个,看你自己的喜好吧。
@font-face
CSS3的@font-face属性(事实上CSS2中就已引进),到现在为止,已经有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了。IE系浏览器不支持TTF格式的字体,只支持eof格式,不过,微软官方发布了一个WEFT工具,可以将TTF转化为EOF,下载。
可以使用的样式如下:
@font-face { font-family: qianduanNet; font-style: normal; font-weight: 400; src: url("SketchRockwell.ttf"); }
.fontFace{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; }
IE中的样式如下:
@font-face { font-family: Goudy Stout; font-style: normal; font-weight: 400; src: url(GOUDYST0.eot); }
这是目前最简单实现嵌进字体的方法。
相关推荐
在爬虫中,字体反爬工具是一种常见的反爬手段,用于防止爬虫...4. OCR识别:如果以上方法都无法绕过字体反爬工具,爬虫程序可以使用OCR(光学字符识别)技术,将网页中的图片转换为文本。然后再对文本进行处理和分析。
Ashiva MultiPage Editor是一个独立的单一文件应用程序,可使用Ashiva WebRig在任何站点的多个网页上查找和替换文本。 MultiPage编辑器使用什么技术? 单一文件应用程序包含以下技术: PHP HTML5 CSS3 ...
针对互联网内容处理的需要,融合了自然语言理解、网络搜索和文本挖掘的技术,提供了用于技术二次开发的基础工具集。开发平台由多个中间件组成,各个中间件API可以无缝地融合到客户的各类复杂应用系统之中,可兼容...
技术说明 CLI程序 卷曲 httpie Python 硬件相关 uPython(MicroPython / CircuitPython) 皮塞里亚尔 :I2C框架 网络 paho-mqtt:Eclipse Paho MQTT Python客户端库 开发工具 火:自动生成CLI(命令行界面) 赛顿 ...
广泛用于网站页面下载后的加工、网站的网页维护、用户指南和技术资料的批量更新、数据在不同系统中进行格式转换、源代码或资源文件修改等方面;使用本工具可极大地提高数据处理的效率,对数据库提供单位、情报搜集...
它可以充分的替换记事本,它也提供网页作家及程序设计师许多强悍的功能。对于HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript及VBScript的语法突显。当然,它也可以在自定义语法文件后扩充其他的程序语言。嵌合...
4.1.1 课堂案例—茶叶网站 4.1.2 插入图像 4.1.3 图像源文件 4.1.4 图像的宽度和高度 4.1.5 替换文本 4.1.6 图像编辑 4.1 图像插入 Dreamweaver-CC之图像与多媒体全文共35页,当前为第4页。 案例学习目标:学习使用...
实例218 使Button控件大小自动适应文本长度 293 实例219 得到鼠标焦点后自动放大的Button按钮 294 实例220 动态创建多个Button控件 295 11.2 TextBox控件应用 296 实例221 制作多行文本框 296 实例222 制作密码...
' "网页_隐藏滚动条","网页_滚动条控制","网页_滚动条固定","网页_滚动条取位置","网页_滚动条取高宽","网页_替换选中内容","网页_创建新网页","网页_高亮关键字" ' "文本框_取对象","文本框_取数量","文本框_取...
' "网页_隐藏滚动条","网页_滚动条控制","网页_滚动条固定","网页_滚动条取位置","网页_滚动条取高宽","网页_替换选中内容","网页_创建新网页","网页_高亮关键字" ' "文本框_取对象","文本框_取数量","文本框_取内容...
' "网页_隐藏滚动条","网页_滚动条控制","网页_滚动条固定","网页_滚动条取位置","网页_滚动条取高宽","网页_替换选中内容","网页_创建新网页","网页_高亮关键字" ' "文本框_取对象","文本框_取数量","文本框_取内容...
标记文本被扩展重音文本替换。写作或阅读电子邮件或其他网页内容时,这是一件有用的事情。重建率达98%以上。平均而言,50个中的一个是错误地重建的。 这个工具是布拉迪斯拉发工科大学信息与信息技术学院的学士论文...
4.分块检测机制,将文章的每一文本块与其他文档的相似度都精确的表示出来了,每一文本块约为200字至400字不等,以红色表示极度相似(相似度大于80%),一目了然,清晰醒目。 5.相似文档模块跟踪技术,可以通过简单...
12.4.5 定义替换文本 12.5 使用object元素创建图像映射 12.5.1 使用a元素定义热点 12.5.2 为内嵌元素定义热点 12.6 巩固与自测 第13章 使用脚本语言 13.1 了解脚本语言 13.1.1 客户端脚本 13.1.2 服务端脚本 13.2 在...
4.4 字符串替换函数.replace(); 5、浏览器类 5.1 判断浏览器的类型 5.2 判断ie的版本 5.3 判断客户端的分辨率 6、结合类 6.1 email的判断。 6.2 手机号码的验证 6.3 身份证的验证 二、功能类...
13.9.2替换方法的使用430 13.9.3组匹配的使用431 13.9.4检验E-mail的合法性432 13.10本章小结434 第5篇桌面程序开发 第14章GUI程序设计436 14.1GUI程序设计的基本概念436 14.1.1组件437 14.1.2布局管理437 ...
特征:•当在网页上的文本中检测到侧面词典中存在的技术术语时,视觉提示将指示。•单击“扩展”图标,查看页面上检测到的所有技术术语的扩展侧栏列表及其顶级类比。•将突出显示的技术术语悬停在页面文本中,以在小...
• sample04.htm 在同一个网页中使用不同脚本语言 • sample05.htm 判断浏览器对JavaScript版本的支持情况 • sample06.htm 引用外部JavaScript • sample07.htm 在同一个HTML文档...
上篇 WEB搜索引擎基本原理和技术....................................................................16 第二章 WEB搜索引擎工作原理和体系结构..........................................................17 第...