- 浏览: 13638493 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的 时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片,
这样做有几个明显缺陷:
1. 不可能大范围的使用该字体;
2. 图片内容相对使用文字不易修改;
3. 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素)。
网络上有一些使用sIFR技术、或 javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。
【第一步】
获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。
1. @font-face
CSS3的@font-face属性(事实上CSS2中就已引入),为我们带来了一些希望,而 Firefox 3.5新增的对@font-face的支持,让我们离这个希望更进了一些。
到现在为止,已经有Safari、 Chrome、Opera 10和Firefox 3.5支持@font-face了,比较意外的是,IE系列浏览器也部分支持该属性。Mozilla旗下的其它产品,SeaMonkey 2 和Thunderbird 3 也支持该属性。
浏览器兼容性
Internet Explorer | 4.0 | 只 支持OpenType字体(eof格式) |
Firefox (Gecko) | 3.5 (1.9.1) | TrueType(ttf格式)和OpenType 字体 |
Opera | 10.0 | TrueType 和OpenType 字体 |
Safari (WebKit) | 3.1 (525) | TrueType和OpenType 字体 |
从表中可以看 出,IE系浏览器不支持TTF格式的字体,只支持eof格式,不过,微软官方发布了一个WEFT工具,可以将TTF转化为EOF,需要的朋友可以去下载使用 。
可以使用的样式如下:
- .TTF或.OTF,适用于Firefox 3.5、Safari、Opera
- .EOT,适用于Internet Explorer 4.0+
- .SVG,适用于Chrome、IPhone
下面要解决的是如何获取到某种字体的这三种格式文件。一般地,我们在手头上(或在设计资源站点已经找到)有该字体的某种格式文件,最常见的 是.TTF文件,我们需要通过这种文件格式转换为其余两种文件格式。
字体文件格式的转换可以通过网站FontsQuirrel 或onlinefontconverter 提 供的在线字体转换服务获取。这里推荐第一个站点,它允许我们选择需要的字符生成字体文件(在服务的最后一个选项),这样就大大缩减了字体文件的大小,使得 本方案更具实用性。
【第二步】
获取到三种格式的字体文件后,下一步要在样式表中声明该字体,并在需要的地方使用该字体。
字体声明如下:
@font-face { font-family: 'fontNameRegular'; src: url('fontName.eot'); src: local('fontName Regular'), local('fontName'), url('fontName.woff') format('woff'), url('fontName.ttf') format('truetype'), url('fontName.svg#fontName') format('svg'); } /*其中fontName替换为你的字体名称*/
在页面中需要的地方使用该字体:
p { font: 13px fontNameRegular, Arial, sans-serif; } h1{font-family: fontNameRegular}
或者
<p style="font-family: fontNameRegular">掬水月在手,落花香满衣</p>
其他方法:
sIFR
sIFR并非一种新技术,而是已经存在并被使用很多年了。sIFR是一种很有用也很好用的文本替换技术,通过 Flash+JS+CSS将网络字体嵌入到页面中。
考虑到网上已经有很多资源,本文就不再赘述,想要了解的朋友可以参考一下文章:
Typeface.js
Typeface 被认为是替代 SIFR的最佳方案,相对于sIFR,Typeface少了Flash的应用,使用纯JS来嵌入相关字体,而且用法也很简单:在页面中引入相应的js文件 就OK了。
<html> <head> <!-- 加载所有的样式先 --> <link rel="stylesheet" type="text/css" ref="/style.css"> <!-- 再加载typeface.js 库文件和typeface.js字体文件--> <script type="text/javascript" src="typeface-0.10.js"></script> <script type="text/javascript" src="helvetiker_regular.typeface.js"></script> </head> <body> <!-- 继续并使用CSS指定typeface.js 字体 --> <div class="myclass typeface-js" 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和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则有总体文件大小方面的优势。具体用哪一个,看你自己的喜好吧。
总结
事实上,sIFR、 typeface.js和cufon都是目前常说的文本替换技术,这些技术都可以用来替换@font-face,并且实现更好的浏览器兼容性。但是每种技 术都不是完美的:
- @font-face最简单,虽然大部分浏览器也都支持了,但是其浏览器兼容性并不是很完美,对IE还需要 eof字体的特殊支持,而且对于中文字体来说,一般都很大,这会占用很大的页面加载时间和服务器流量。
- sIFR是兼容性和可用性最好、 对SEO友好的一种方案,但也是实现起来最复杂的,而且需要浏览器支持Flash插件。
- typeface和cufon都是利用在IE中 渲染VML,而在非IE浏览器中使用canvas的方式实现“伪”字体的,他们使用起来相对简单,但是可用性和用户体验以及SEO都不是很理想。
- 版 权问题是一个很重要的问题,无论你使用哪种技术,都需要考虑文字的授权。
所以,使用哪种方案,要看你的需求和喜好,或许你宁愿 切更多的图片也不愿使用这些技术?
发表评论
-
SASS界面编译工具——Koala的使用
2016-08-24 13:18 4572《SASS 界面编译 ... -
CSS3: 利用分层动画让元素沿弧形路径运动
2016-08-24 13:19 2423原文:Moving along a curved pat ... -
HTML5: 利用SVG动画动态绘制文字轮廓边框线条
2016-08-24 13:14 2023DEMO: 点击这里看效果 ... -
如何制作HTML5 SVG描边文字
2016-08-24 13:15 1785在很多时候,SVG是最容易在网页上做出文字特效的方法。现在S ... -
基本的SVG样式属性
2016-08-24 13:11 2405SVG的样式属性和CSS的语法非常接近,有时甚至是一样的 ... -
SVG 入门教程系列列表
2016-08-19 03:09 968SVG 入门教程系列列表: SVG 教程 (一) ... -
CSS3: 动画循环执行(带延迟)的实现
2016-08-11 01:23 10980出处:http://www.cnblogs.com/s ... -
CSS3: 常用动画特效及4个最流行的动画库
2016-08-11 01:00 7088一、animates.css animate.css是来自 ... -
HTML5: 全局属性
2016-08-01 08:03 917出处:http://www.cnblogs.com/s ... -
CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
2016-08-01 07:57 2646BFC的理解与应用 首先我们来看看w3c规范对BFC的解释 ... -
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
2016-08-01 07:55 1826W3C规范 一般来说,页面中的每一个元素都会形成一个矩形盒 ... -
CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?
2016-07-29 13:00 3902原文:CSS: div高度自动适应背景图片的高度 How t ... -
移动开发需要知道的像素知识『多图』
2016-07-29 12:48 813像素(Pixel)对于WEB开 ... -
HTML5: 两个viewport的故事(第一部分)
2016-07-29 12:45 691英文:http://www.quirksmode.org/m ... -
HTML5: 两个viewport的故事(第二部分)
2016-07-28 05:23 728英文:http://www.quirksmode ... -
CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
2016-07-28 05:18 9691. Phones and Handhelds a) ... -
CSS3: 移动端开发中 max-device-width 与 max-width 的区别
2016-07-28 05:17 11478翻译自stackoverflow.com,源地址:http: ... -
CSS:媒体查询 CSS3 Media Queries
2016-07-28 05:11 1268定义和使用 使用 @medi ... -
CSS: SASS用法指南 (附视频)
2016-07-28 05:05 902观看视频: CSS: SASS用法指南 ... -
九张 Gif 图回顾 Web 设计的 25 年历史
2016-07-27 10:51 659原文出处: fastcodesign ...
相关推荐
自定义web字体,通过@font-face在网页中嵌入自定义字体
下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。
利用google-iframe在flex中嵌入网页是在swf上覆盖一个div,flex与网页无法融合,这样会出现各种显示,控制问题,如页面自适应,页面显示控制,内容遮盖,网页内容不随flex滚动条滚动等,现在这些问题都解决了
WPF_嵌入字体_EmbeddedFont
主要介绍了使用iframe在网页中嵌入其他网页的方法,需要的朋友可以参考下
在网页中嵌入Excel表格.zip在网页中嵌入Excel表格.zip
Word转PDF文件,如何在PDF中嵌入字体[收集].pdf
在CSS3所有时髦的新功能中,很难说哪个最好。但是,假如非要找出 那么一个功能,一个现在就能用,而且能够令人浮想联翩的功能,我想 就要数Web字体了。
关于怎样在网页中嵌入swf文件的几种方法
首先告诉大家如何看自己的pdf文档字体是否嵌入:在pdf格式的文件中,点“文件”-> “文档属性”-> “字体”,显示的就是你文档中用的所有字体了,每一个字体后面,如果注明了“embeded(已嵌入)”或“embeded subset...
网页中嵌入windows media player示例
dsoframer修改版 weboffice控件 cab打包制作工具 相关文档 可以帮助你很好的解决在网页中嵌入word.excel的问题
在WPF 资源文件内嵌入个性化字体。
网页中嵌入flv 格式视频(非常好!) 网页中嵌入flv 格式视频(非常好!) 网页中嵌入flv 格式视频(非常好!) 网页中嵌入flv 格式视频(非常好!) 网页中嵌入flv 格式视频(非常好!)
VisualC 实效编程 104 在程序中嵌入HTML网页VisualC 实效编程 104 在程序中嵌入HTML网页VisualC 实效编程 104 在程序中嵌入HTML网页VisualC 实效编程 104 在程序中嵌入HTML网页VisualC 实效编程 104 在程序中嵌入...
找了一天终于找到了@face-font 嵌入中文字体用法和工具,网上转换要不是要钱就是转到了中文。终于找到了分开转换的工具,ttf转换eot, woff, svg转换工具,里面还有实例分享给大家。
解决方法有两种:使用设备字体和使用嵌入字体。设备字体的特性是用户机器上的所有字 体都最大可能地模拟其外观,保持文本的样式不会出现较大变化;嵌入字体是指将字体文件编译 进SWF文件中或者运行时加载到SWF文件中...
微软提供的网页嵌入字体工具。 Weft:你自创字体后,weft会生成加载字体文件(Eot),然后把Eot上传到服务器。Weft支持Ie4.0及以上版本。 可以在这里下载Weft,再为你的字体创建了加载字体文件后,然后修改html的...