Web字体(链接)嵌入
下面是我最近在学习的两种字体嵌入方法
1、@font-face
使用@font-face可以这样做:
@font-face{
font-family:"Garamod Premier Pro";
src:url(fonts/GaramondPremrPro.otf);
}
然后,按我们已经习惯的做法引用font-family:
h1{
font-family:"Garamod Premier Pro",serif;
}
这样,就可以在网站设计中使用你拥有的字体啦。
但是,事情其实那么简单,@font-face存在着几个缺点。(1)浏览器支持问题,一些低版本浏览器并不支持@font-face,IE6只支持.eot(EmbeddedOpenType)格式。(2)字体文件存诸在网站上,允许公共访问,很容易被下载和非法使用;许多产商的最终用户许可协议还没有更新以允许字体链接。这使得字体开发商和字体销售商非常担心Web上的字体链接。
2、Cufon
利用Cufon可以用所选的 字体显示HTMl,而不需要使用任何图像或@font-face。
使用Cufon的过程如下:
(1)到Cufon网站下载Cufon脚本文件。
(2)使用Cufon生成器上传所选的字体。
Cufon生成器部分截图如下:
(3)在文档头中,添加对Cufon脚本和生成器提供的字体脚本的引用,比如:
<script src="js/cufon-yui.js"></script>
<script src="js/Museo_400.font.js"></script>
还应该在body结束标签前添加以下代码,以避免在IE中出现闪烁问题:
<script>Cufon.now();</script>
另外,还应该在文档开头指定哪些HTML元素或选择器应该替换为你的字体,比如:
<script>
Cufon.replace('h1');
</script>
或
<script>
Cufon.replace('h1')('h2')('blockquote');
</script>
(4)如果在使用Cufon的网站上使用jQuery等JavaScript框架,Cufon会利用框架的选择器引擎,因此可以指定特有的选择器,比如:
<script>
Cufon.replace('#header h2,#header ul a');
</script>
(5)在css文件中,按与其他文本相同的方式,修改由Cufon替换的文本的样式——例如:color:#333;、font-size:12px;、text-transform:uppercase;等。
这样就可以啦。(注意,在许可协议方面Cufon与@font-face面对相同的问题——所选文字的EULA必须允许在Web上进行字体嵌入。)
Web字体(链接)嵌入的更多相关文章
- CSS3之嵌入Web字体
之前如果想在自己的网站使用某些好看的字体,总是迫不得已得在PS里先把字体图片做好.虽然这样做也能达到我们想要的效果,但是这样就增加了HTTP请求(如果在多处使用的话),即使合并所有图片,也不好管理,灵 ...
- 嵌入web字体
@font-face模块 可以帮助我们轻松解决Web页面中使用优雅字体的方式,而且我们可以根据需要自定义多种字体,但是每个@font-face只能定义一种,若需要多个字体就启用多个@f ...
- 制作web字体:CSS3 @font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font- ...
- 几种web字体格式
目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体 ...
- web设计经验<七>13步打造优雅的WEB字体
今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代.下面是一些基本的关于字体的规则,特别适用于Web字体. 原文地 ...
- web字体格式及几种在线格式转换工具介绍
原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字 ...
- 工作笔记——web字体格式转换
转载自:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体 ...
- 如何使用Web字体?
如何使用Web字体 嵌入Web字体的关键是@font-face规则,通过它可以指定浏览器下载web字体的地址,以及如何在样式表中引用该字体 @font-face { font-family: Voll ...
- WEB 字体
之前如果想在自己的网站使用某些好看的字体,总是迫不得已得在PS里先把字体图片做好.虽然这样做也能达到我们想要的效果,但是这样就增加了HTTP请求 (如果在多处使用的话),即使合并所有图片,也不好管理, ...
随机推荐
- 【Unity3D】使用MD5值,确保本地Sqlite数据库内容没有被篡改
Sqlite的应用场景 在判断是否使用存储格式为Sqlite模式的标准,我们的标准是内容只读.也就是说,除非发布者修改Sqlite内容,玩家只有读取的权限. 换个角度说,Sqlite里面的数据都是游戏 ...
- VS插件神器 ReShaper入门
@简介: 1,Resharper提供以下6个核心功能,分别是: (1). 代码分析(Code Analysis):智能提示代码中存在的问题和修复建议. (2). 编码助手(Coding Assista ...
- QT解决视频透视,有阴影的方法
#define BG_DEVNAME "/dev/fb0"#define FG_DEVNAME "/dev/fb1" 课题5, QT界面与视频透明叠加问题:颜色 ...
- Selenium+Python定位实例
常见的定位方式参见:http://www.cnblogs.com/ranxf/p/7928732.html 1.ID定位(find_element_by_id) <input class=&qu ...
- 机器学习与R语言:NB
#---------------------------------------- # 功能描述:演示NB建模过程 # 数据集:SMS文本信息 # tm包:维也纳财经大学提供 #----------- ...
- JAVA-JVM垃圾回收算法
哪些对象可以回收,有两种算法: 1. 引用计数算法,对象被引用计数器加1,对象被释放计数器减1.计数器为0的对象是可以被回收的. 此种方法优点:简单.缺点:会存在互相引用的两个对象,但实际这两个对象都 ...
- goquery常用语法
Find 查找获取当前匹配的每个元素的后代Eq 选择第几个Attr 获取对应的标签属性AttrOr 获取对应的标签属性.这个可以设置第二个参数.获取的默认值 如果获取不到默认调用对应默认值Each 遍 ...
- 20145231熊梓宏《网络对抗》逆向及Bof基础
20145231网络对抗<逆向及Bof基础> 实验目的与要求 1.本次实践的对象是一个名为pwn1的linux可执行文件. 2.若该程序正常执行,则main函数会调用foo函数,foo函数 ...
- python-作用域和装饰器
Python 作用域 学习的时机: 基本的数据类型 Python的运算 数字运算 + - * / // ** 逻辑运算 And or not 比较运算 > < == >= <= ...
- nodeJs和JavaScript的异同
JavaScript组成:ECMAScript(定义这门语言的基础,比如语法.数据类型.结构以及一些内置对象等).DOM(基于ECMASCRIPT,扩展出来的用于操作页面元素的方法).BOM(基于EC ...