Google 的字体服务
以前介绍过 CSS3 中的 @font-face,可以在网页中展现独特的字体样式,不过必须得自己找到字体上传到特定位置,还要在 css 文件中写一下字体的 @font-face 定义才行。
现在 Google 有了字体服务,这个步骤就简单多了,只需要添加一句 <link>,然后再设定元素的 font-falmily 名称就行了,目前有 18 中字体,都是免费的。
比如要想在目前的 Blog 标题使用 Google 字体服务中提供的 IM Fell 字体,只要在 Google 字体页面中找到 IM Fell 的链接,选择好样式,然后“Get the code”就行了~
按照上面所说,在 <head> 中插入:
<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>
然后在 css 中给想要的元素设定 font-fmalily 名称:
h1.logo { font-family: 'IM Fell DW Pica', arial, serif; }
效果如本 Blog 标题。
这服务以后应该不会被 GFW 吧……
@font-face 很不错
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