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请求 (如果在多处使用的话),即使合并所有图片,也不好管理, ...
随机推荐
- 微信小程序组件action-sheet
操作反馈action-sheet:官方文档 Demo Code: Page({ data: { actionSheetHidden: true, actionSheetItems: ['item1', ...
- java反射之构造方法(三)
一. 1. 二.获取类的构造方法信息. ######################################################################## 三.
- web前端基础——初识CSS
1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...
- Python中常用技巧整理
Python中os.path的妙用 http://xpleaf.blog.51cto.com/9315560/1736956
- selenium的基本介绍
应吴姑娘(漂亮的姑娘)之邀,加上我师兄(屌丝)和国新(屌丝),组了个四黑小团伙,每周二分享点东西,感觉就是四个辣鸡相互取暖.可惜,今天早上直接是睡过去了,下午都捐给了<白夜追凶>---没办 ...
- selenim之ActionChains 用法
常见的点击方法集锦: 参数: 1.driver是我们的浏览器 2.Actions是我们系统内置的执行鼠标一系列操作的对象 鼠标左击:Actions actions=new Actions(driver ...
- 微服务—ELK分布式日志框架
在微服务架构下,微服务被拆分成多个微小的服务,每个微小的服务都部署在不同的服务器实例上,当我们定位问题,检索日志的时候需要依次登录每台服务器进行检索. 这样是不是感觉很繁琐和效率低下.所以我们还需要一 ...
- [日志] spring boot + logback 日志输出配置
一.输出日志到控制台 springboot有很多starter(参考starter)方便快速构建项目依赖组件,logback是springboot默认的日志组件,启动即可看到打印在控制台输出的info ...
- php 安装Memcache扩展
转载地址:http://www.tuicool.com/articles/EB3imm 文章概述:由于当前机器安装的php,是用yum安装,现在需要使用到memadmin做一些监控, memadmin ...
- nginx windows版本 1024限制
Windows版本因为文件访问句柄数被限制为1024了,当访问量大时就会无法响应. 会有如下错误提示:maximum number of descriptors supported by select ...