第一個是指定字體。
創(chuàng)新互聯(lián)2013年至今,先為宜春等服務(wù)建站,宜春等地企業(yè),進行企業(yè)商務(wù)咨詢服務(wù)。為宜春企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
.youclass{font-family:文鼎POP;}。
此處 font-family 指定字體為 文鼎POP ,但電腦上沒裝 文鼎POP 字體的人看網(wǎng)頁,將看不到這個字體效果,任看到電腦上默認的 宋體 或 微軟雅黑體,因此針對中文操作系統(tǒng)來說:為保證網(wǎng)頁效果,通常只能指定:宋體、黑體、微軟雅黑之類的系統(tǒng)上默認自帶的字體。
第二個 font-face 的用法是載入一個字體。
@font-face { font-family:comic;src:url(文鼎POP.eot); } 。
將文鼎POP 的 .eot 格式文件傳到服務(wù)器上,然后用 font-face 加載到網(wǎng)頁中,別人電腦沒裝這個字體,但用 font-face 加載后同樣能在網(wǎng)頁上顯示出文鼎POP的效果。
css特點:
結(jié)構(gòu)與樣式分離的方式,便于后期維護與改版;
樣式定義精確到像素的級別;
可以用多套樣式,使網(wǎng)頁有任意樣式切換的效果(如:的開,關(guān)燈效果);
降低服務(wù)器的成本。
@font-face {
font-family: YourWebFontName;/*自定義的字體名稱,最好是使用下載的默認字體,他將被引用到Web元素中的font-family*/
src: source [format][,source [format]]*;/*自定義的字體的存放路徑*/
[font-weight: weight];
[font-style: style];/*weight定義字體是否為粗體,style主要定義字體樣式,如斜體*/
}
不過瀏覽器對各種字體解析不一致,下載到的字體通常只有.ttf格式。那么要兼容各主流瀏覽器就得通過在線字體轉(zhuǎn)換網(wǎng)站轉(zhuǎn)換得到這幾種字體【.eot,.woff,.ttf,.svg】
那么具體用法:
html:
h2 class="Demo"Demo/h2
先自定義好字體
@font-face {
font-family: 'NeuesBauenDemo';
src: url('../fonts/neues_bauen_demo-webfont.eot');
src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
font-weight: normal;
font-style: normal;
}
最后引用:
h2.Demo {
font-family: 'NeuesBauenDemo'/*通過這個引用下載的字體格式*/
}
你的代碼寫錯了,這應該是:!important。注意一下細節(jié),在css中這個如果是正確的他應該顯示為紅色,在dw中是這樣,我不知道你這個是用的什么,所以不是很清楚,但是一般的關(guān)鍵字都是不會和普通的代碼的顏色一樣。
關(guān)于@font-face的介紹(來自w3c)
網(wǎng)頁中的eot字體文件
用@font-face來加載服務(wù)器上的字體后,是需要用font-family來作用到指定的類、ID、標簽上才可以的。
比如對h1定義test這個字體,那么要用font-family來聲明使用這個test才可以。
@font-face用的不是太多,一個中文字體集的字體都有好幾M,不像英文字體那樣比較小,所以如果需要做特殊的藝術(shù)字或者要的效果還是做成圖片來的簡單、高效。
@ font-face的是一個CSS規(guī)則,允許你輸入自己的字體出現(xiàn)在網(wǎng)站上,即使在特定的字體在訪問者的計算機上沒有安裝。這條規(guī)則最重要的是,它為設(shè)計師打開了一個全新的世界。您可以使用任何你喜歡的字體。
下面的語法是你如何使用@ font-face的。首先,定義新的字體所提供的名稱和說明的字體。
@font-face?{
font-family:?DeliciousRoman;
src:?url('');
}
然后你引用它。
p?{
font-family:?DeliciousRoman,?Helvetica,?Arial,?sans-serif;
}
就是這樣。
在前面的例子中使用外部來源。但是,如果將字體文件是在您的服務(wù)器上,那么你可以參考以下的方式:
@font-face?{
font-family:?DeliciousRoman;
src:?url('…/Delicious-Roman.otf');
}
此外,還有其他三個字體屬性,您應該知道的。首先是font-stretch,您可以設(shè)定的字體會被拉伸,“normal’”是默認的。此外,有字體的風格,讓你的字體是斜或斜體。最后,還有字體的重量,最后字體為粗體,等你可以自己設(shè)置
@font-face?{
font-family:?DeliciousRoman;
src:?url('…/Delicious-Roman.otf');
font-stretch:?condensed;
font-style:?oblique;
font-weight:?bold;
}
建議:
字體渲染是一件棘手的事情 - 尤其是老移動瀏覽器。你應該總是測試,你可以盡可能多的設(shè)備支持。發(fā)現(xiàn)問題的速度越快越好。
最后,請記住,使用許多不同的字體可能會減慢你的網(wǎng)站需要時間來加載所有這些字體!
望采納!
本文題目:css樣式face,css樣式方框?qū)傩?/a>
文章轉(zhuǎn)載:http://www.rwnh.cn/article20/dsdjdjo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、網(wǎng)站導航、小程序開發(fā)、網(wǎng)站策劃、用戶體驗、網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)