網(wǎng)頁使用Google Font API(字體)的方法
更新時(shí)間:2013年11月12日 15:55:57 作者:
本文介紹在網(wǎng)頁中如何使用Google Font API(字體)的方法
在網(wǎng)頁設(shè)計(jì)里,字體的顯示是個(gè)問題。最普遍用的是宋體,但是宋體在 Win 7 下的表現(xiàn)真的很難看。雅黑端莊一些,但是隨著字體大小,感覺漢字的大小也會(huì)有區(qū)別。小站現(xiàn)在用的字體是是宋體 + Arial/Georgia,因?yàn)榱?xí)慣了也沒多在意,其實(shí)對于英文字體有其它更好的選擇。
比如 Bitter 字體,用來做標(biāo)題倒是不錯(cuò):
<div style="text-align:center; font-size:24px; font-family:Bitter;">Welcome To NowaMagic.net</div>
CSS 怎么調(diào)用 Bitter 字體?
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/s9gJB935qk_YG8d-lnTdvA.woff) format('woff');
}
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 700;
src: local('Bitter-Bold'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/JGVZEP92dXgoQBG1CnQcfD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
其實(shí),這是 Google 推出的Google Font Directory和Google Font API兩項(xiàng)服務(wù),Google聯(lián)合了眾多的字體設(shè)計(jì)者為用戶提供了多種漂亮的字體。具體可以參看以前寫的一篇文章:《用Google Font API來豐富網(wǎng)頁字體》。
這里僅僅拋磚引玉,國內(nèi)實(shí)在太少網(wǎng)站用 Google Font API 了。
比如 Bitter 字體,用來做標(biāo)題倒是不錯(cuò):
復(fù)制代碼 代碼如下:
<div style="text-align:center; font-size:24px; font-family:Bitter;">Welcome To NowaMagic.net</div>
CSS 怎么調(diào)用 Bitter 字體?
復(fù)制代碼 代碼如下:
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
src: local('Bitter-Regular'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/s9gJB935qk_YG8d-lnTdvA.woff) format('woff');
}
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 700;
src: local('Bitter-Bold'), url(http://themes.googleusercontent.com/static/fonts/bitter/v4/JGVZEP92dXgoQBG1CnQcfD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
其實(shí),這是 Google 推出的Google Font Directory和Google Font API兩項(xiàng)服務(wù),Google聯(lián)合了眾多的字體設(shè)計(jì)者為用戶提供了多種漂亮的字體。具體可以參看以前寫的一篇文章:《用Google Font API來豐富網(wǎng)頁字體》。
這里僅僅拋磚引玉,國內(nèi)實(shí)在太少網(wǎng)站用 Google Font API 了。
相關(guān)文章
解決URL中含有-與號-不符合標(biāo)準(zhǔn)問題
解決URL中含有-與號-不符合標(biāo)準(zhǔn)問題...2006-09-09
5個(gè)HTML5的常用本地存儲(chǔ)方式詳解與介紹
在HTML5規(guī)范之前,存儲(chǔ)主要是用cookies,但cookies缺點(diǎn)有在請求頭上帶著數(shù)據(jù),大小是4k之內(nèi),今天為大家介紹一下H5的5種存儲(chǔ)方式2020-02-02
淺談?dòng)蓀osition屬性引申的css進(jìn)階討論
說到position,稍微對css了解的能馬上說出四個(gè)屬性值:static 、relative、absolute、fixed。更深一步去討論,牽扯出諸如上文提到的normal flow、containing block、bfc、margin collapse,base line,有多少人能很好的回答完整呢,所以在此做一個(gè)自己的總結(jié)歸納。2021-05-05

