Today's the day

向软件大牛炫耀我会焊单片机,向硬件大牛炫耀我会写 Rails,向软硬件大牛炫耀我生物,向软硬件生物大牛炫耀我会折腾期货 -_-bbb

SyntaxHighlighter 挺不错
Mac 下搭建 Rails 环境

@font-face 很不错

galeki posted @ 2009年7月24日 00:56 in RoR with tags font 字体 css3 , 5867 阅读

CSS3 的 @font-face 是一大亮点,随着 Firefox 升级到了 3.5,也可以体验这个东西了。

这 @font-face 是干啥的? 简单来说,就是可以在网页中自由显示字体了~

早期的 CSS 虽然可以指定字体名称,但是前提是观看者的电脑商必须安装了这款字体才行,所以基本没啥用。

现在有了 @font-face,不再会有这个限制,可以轻松更改网页上的字体,比如本 Blog 的标题:

如果你看到的不是图片中的样子的话,那赶紧升级浏览器吧~

添加的CSS 如下:

@font-face{
  font-family: "RoughDraft";
  src: url("http://galeki.is-programmer.com/user_files/galeki/File/rough_draft.ttf");
}

h1#logo a{
  font-family: "RoughDraft", serif;
  font-size:50px;
}

前四行的 @font-face 部分就是关键,使用 font-family 给这个字体起一个名字,用 src 给出这个字体文件所在的位置,就 OK 了。

之后,就可以在 CSS 中用刚才定义的名字来引用这个字体了~

浏览器会自动下载 @font-face 里 src 中的字体,并正确显示出来,这样就可以使用漂亮的字体来设计网页了,再也不用担心别人看不到。

英文字体比较适合这样做,一款英文字体也就几十 K 的大小,中文字体就有点寒了。

顺便试试:

 

http://www.galeki.net

http://www.galeki.net

 

看不到上面的去面壁,哈哈。

以后 html 文档也会活泼很多吧~

详细一点的介绍可以看 https://developer.mozilla.org/index.php?title=En/CSS/%40font-face

更加详细的可以直接看 http://www.w3.org/TR/css3-webfonts/#font-descriptions

Avatar_small
LiYanrui 说:
2009年7月24日 02:50

呵呵,我要盗 http://galeki.is-programmer.com/user_files/galeki/File/angelina.ttf 链

邱焜 说:
2009年7月25日 02:06

文泉驿有个相关项目呢

pjq 说:
2009年7月25日 08:14

我这里看不到这种效果,难道我的浏览器需要升级了?

Avatar_small
galeki 说:
2009年7月25日 20:34

@邱焜: 是那个云字体计划吗?

@pjq: 难道是 IE 浏览器?貌似 IE 要特殊处理一下。

邱焜 说:
2009年7月26日 06:27

@galeki: 是

pjq 说:
2009年7月26日 09:25

@galeki: 是Firefox了,本来准备emerge 3.5.1的,但编译xuluner的时候failed了。

Avatar_small
太阳神上 说:
2009年7月26日 21:55

我试过了,Safari 的最新版也支持,但同为 WebKit 内核的 Chrome 却还不支持

Avatar_small
galeki 说:
2009年7月27日 04:12

@pjq: lyanry 同学也碰到了这个问题,也许因为 firefox 的“允许页面选择显示字体”这个设置没有开启吧。
@太阳神上: Chrome 看了下果然不成,确实奇怪,不过 Chrome 下字体的观感要好一点,难道对字体这块优化了。

Dianso 说:
2010年4月24日 06:46

正好要找这个,感谢


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter