CSS3: @font-face

想要製作一些很酷的頭部效果並且不使用圖片檔案嘛？可以嘗試一下 CSS3 裡面的 @font-face。

代碼如下：

 

@font-face {font-family: qianduanNet;src: url("SketchRockwell.ttf");}.fontFace{font-family: qianduanNet;font-size: 3.2em;letter-spacing: 1px;text-align: center;}

 

 

但這需要你去下載字型，相對而言 Google Font Directory 就方便太多了。只可惜目前不支援中文。

不過簡單的中文用英文代替，大家都可以看得懂的。嘿嘿，因此在 b3log 的新皮膚中頭部使用到了Google Font Directory 中的兩中字型，實際如下。

 

你可以到 Google Font Directory 上面選擇你喜歡的字型，然後點擊進入，選擇 use this font, 相應的添加 link 和 CSS 就可以搞定了；

或者使用 WebFont Loader, 它將為您提供更加多的使用方法。

本文是使用 B3log Solo 從 Vanessa 進行同步發布的原文地址：http://vanessa.b3log.org/css3-font-face