如何在网页设计中使用个性化字体
作者:神采飞扬 来源:前端观察 发布时间:2009-07-07 11:29:00
一个常常令设计师和前端开发人员都头疼的事情就是字体的使用,设计师常常在设计稿中使用某些很漂亮的字体,以实现比较酷炫的界面。但这样常常给编码人员造成一些难度,如果在页面中放弃使用这些字体,设计师会感到郁闷,而如果使用这些字体的话,就要切图并使用很多额外的样式——又一个鱼和熊掌的抉择。还好,现在已经有了一些相关的替代技术了。
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,需要的朋友可以去下载使用。
可以使用的样式如下:
@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);
}
这是目前最简单实现嵌入字体的方法。
@font-face资源:
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资源:
猜你喜欢
- Oracle提供了不少方法用于数据空间的使用、监控和维护,同时也在各版本中陆续对这方面的功能进行了增强,目的在于简化这方面工作的复杂度,提高
- 链接的 target 属性怎么用 JS 来控制? 在HTML 4.0 Strict和XHTML 1.0 STRICT里不允许在<a&g
- 首先呢,需要有两个mysql服务器。如果做测试的话可以在同一台机器上装两个mysql服务程序,注意要两个运行程序的端口不能一样。我用的是一个
- 如何利用Image Data Type从数据库中读取图片,并在主页中显示图形?然后,写如下代码:< % @&nbs
- Application对象 Application对象是个应用程序级的对象,用来在所有用户间共享信息,并可以在Web应用程序运行期间持久地保
- 适合各种浏览器的js拖动层,ie,firefox等,调用方便!<!DOCTYPE HTML PUBLIC "-//W3C//
- 在linux服务器lvs负载均衡、双机热备应用中经常用到mysql双机热备,安装和配置过程如下:一、 安装MYSQL# cp mysql-s
- 以前的服务器,由于内存的价格过高,一般配置的内存不是很多,超过4GB的当然就不多了.现在的服务器,配置超过4GB就很多,在配作SQL 数据库
- 这次我们讨论的是,区分有单选框的选项和普通的选项~~乍听起来,可能不太理解我说了什么,下面举个例子先~~1、标签的单选~~例如QQ秀的支付流
- 很多设计师都会遇到这样的问题。一个产品会有很多种方式去包装,其中包括很多功能和很多体验。功能越多会被认为越实用,体验越好会被认为越方便。方便
- '************************************* '读取文件 &
- 如何在网页打开时显示“正在加载”之类的信息?代码及说明见下: <% Response.Buffer =
- 在这种配置下我们要实现关键词不区分大小写搜索并高亮显示要借助ASP的正则处理了,请看下面代码:<% Function&nbs
- MySQL是中小型网站普遍使用的数据库之一,然而,很多人并不清楚MySQL到底能支持多大的数据量,再加上某些国内CMS厂商把数据承载量的责任
- 国外的空间和我们国内的空间使用的语言系统一般不一样,所以在网页程序上时如果处理不当很容易出现乱码,看了让人摸不着头脑。所以我们在编写程序时就
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 15 - SlidersMooTools 1.2的
- 北京时间2月15日据国外媒体报道,美国知名sns网站Facebook全球活跃用户量已突破1.75亿大关。数据显示,全球20%的网民都使用Fa
- 说明:本函数作用是截取指定英汉混合字符串,并保持显示长度一至。就是将一个汉字当两英文来截取。用途:一般会用在标题显示列表,可以避免截取的字符
- 英国著名学者李约瑟早在100多年前就疑惑:为什么中国的科技在唐宋时代就已领先西方,却在明清时代落后下来。对此,人们一向认为这主要是儒家思想的
- 下面就是我们的authenticate.asp页面,在这里,将用户的信息收集起来,连同最初的URL一起传到一个识别用户身份的页面中。我们可用