好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

如何为页面添加Web字体...

有时候我们需要个性化自己的网页,或者某个特殊位置需要特殊的字体,可以通过Web字体来添加。下面小指介绍的是最普遍的用法,当然很多字体库有自己特殊的添加方法,你也可以使用字体库提供的方法。

第一步:找到一个字体

很多网站提供免费或授权的字体,允许你直接用css或js引用。

这里简单推荐几个网站:

站长素材字体:http://font.chinaz.com/(下载后添加,本文介绍)

有字库:http://www.youziku.com/ (在线中文字体库)

谷歌字体库:https://www.google.com/fonts/(在线英文字体库,可用大陆托管服务器如360等)

第二步:确保有所需字体的所有格式

不同的浏览器对很多不同的格式提供了不同程度的支持,因此需要保证能下载主流的格式,保证兼容性。

下面是几种常用的格式及其文件拓展名:

TrueType字体:.ttf

----TrueType字体在所有浏览器得到很好的支持,IE除外。

OpenType字体:.otf

----OpenType建立在TrueType基础上,但比TrueType新。

Embedded OpenType字体:.eot

----Embedded OpenType(EOT)是OpenType的一种压缩形式,是Microsoft专用,仅IE支持。

SVG字体:.svg

----Scalable Vector Graphics(SVG)是可缩放矢量图形格式,SVG字体其实是用图形来表示字符。

Web开放字体格式:.woff

----Web开放字体格式建立在TrueType基础之上,已经发展为Web字体的一个标准,大部分现代浏览器都对这种格式提供了很好的支持。


因此小指推荐使用Web开放字体格式,并为较老的浏览器提供候选的TrueType字体。

第三步:把你的字体放在Web上

一般有两种方式,一种是直接放到自己的服务器,另外一种是放到其他网站提供的字体库托管服务器。

第四步:在CSS中增加@font-face属性

@font-face规则中,使用font-family属性为字体创建名字,推荐与字体名一致,src属性指示字体地址。

@font-face:{
  font-family:"字体名";
  src: url("http://xxxx/字体.woff"),
       url("http://xxxx/字体.ttf");
}

网上下载字体一般只能找到TrueType格式的,具体设置的时候要预留备用字体。

第五步:在CSS中使用font-family名

使用@font-face规则在浏览器加载字体后,即可使用这个字体了,和普通字体一样使用font-family属性引用你指定的字体名。例如你规定了一个专门为情书设置的情书体:"Love Letter"字体。使用方法:

body {
  font-family: "Love Letter",sans-serif;
}

可以看到,小指在后面添加了sans-serif备用字体,以防浏览器不支持。

第六步:加载页面

完成了,你加载页面来测试一下字体吧。注意有些字体只有中文,一些字体只有英文的哦~

点赞8
 标签: Web字体 woff ttf font-face
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘