之前如果想在自己的網(wǎng)站使用某些好看的字體，總是迫不得已得在PS里先把字體圖片做好。雖然這樣做也能達(dá)到我們想要的效果，但是這樣就增加了HTTP請求（如果在多處使用的話），即使合并所有圖片，也不好管理，靈活性不高，哪一天想換種更好看的字體，那工作量，想想都沒勁！幸好CSS3新增了@font-face模塊，可以幫助我們輕松解決Web頁面中使用優(yōu)雅字體的方式，而且我們可以根據(jù)需要自定義多種字體，但是每個@font-face只能定義一種，若需要多個字體就啟用多個@font-face規(guī)則。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名申請、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、武隆網(wǎng)站維護(hù)、網(wǎng)站推廣。
@font-face 主要就是把自己想要的，或者自己定義的Web字體嵌入到Web頁面中，然后這些字體就會被放置在服務(wù)器上，瀏覽器會根據(jù)指定的命令將對應(yīng)的字體下載到本地緩存，使用它來修飾文本。也就是我們所說的Web字體嵌入。
@font-face 語法：
font-family : 其屬性值指定的是自定義的字體名稱，最好就是直接使用下載字體的默認(rèn)文件名，然后需要將它引用到元素的font-family中。雖然自定義了自己想要的字體，但是也得在元素中使用它才有效果?！颈剡x屬性】
src : 其屬性值指定自定義字體的存放路徑，可以是相對路徑或者絕對路徑。format()指定的是自定義的字體格式，主要用來幫助瀏覽器識別，主要有：truetype，opentype，truetype-aat，svg，embedded-opentype等類型?！颈剡x屬性】
font-weight 和 font-style ：分別用來指定字體是否加粗和定義字體樣式。當(dāng)然還可以設(shè)置font-size等字體屬性?！究蛇x屬性】
三種方法：
第一種：嵌入式，例如
div style="width:100px; height:500px;"
img src="1.jpg"/
/div
第二種：在head/head之間寫，例如：
head
style
div{width:100px; height:200px;margin:auto;}
/style
/head
第三種：引入式 例如：
先單獨新建一個css文件，之后再html中的head標(biāo)簽之間輸入以下代碼：
link href="my.css" rel="stylesheet" type="text/css"
@import
導(dǎo)入 css 文件
@media?screen?and?(max-width:?600px)?{?/*當(dāng)屏幕尺寸小于600px時，應(yīng)用下面的CSS樣式*/
.class?{
background:?#ccc;
}
}
媒體查詢
如果你說的是第一次不執(zhí)行動畫的話。那么問題就是第一次加在不到是你第一次是append在文檔后面添加div，你第一次操作div不存在，當(dāng)你添加出div，因為div是直接被顯示出來，而你的open類是執(zhí)行動畫，你添加出div你的div是顯示的，open類也是執(zhí)行動畫顯示div，div已經(jīng)顯示出來了所以不會執(zhí)行動畫，而你后面的能執(zhí)行因為div已經(jīng)存在，他能正確的執(zhí)行動畫。如果要正確就是div直接寫出來不要用js返回，或者用js去操作動畫。我所理解的是這樣，不知道對你有幫助不。
HTML代碼
HTML的代碼非常簡單，只要為進(jìn)度條提供一個容器就可以了?；镜腍TML代碼如下：
div class="wrapper"
div class="load-bar"
div class="load-bar-inner" data-loading="0" span id="counter"/span /div
/div
h1Loading/h1
pPlease wait...(By:a href="";/a)/p
/div
CSS樣式表
接下來是為我們的進(jìn)度條定義樣式，這里主要運(yùn)用了CSS3的linear-gradient的漸變屬性、border-radius的圓角屬性、box-shadow的陰影屬性等等，來制作出進(jìn)度條的初步模型。完成進(jìn)度條的模型后我們利用animation屬性，讓進(jìn)度條開始動起來，就其中的進(jìn)度條動畫設(shè)置代碼如下：
.load-bar-inner {
height: 99%;
width: 0%;
border-radius: inherit;
position: relative;
background: #c2d7ac;
background: linear-gradient(#e0f6c8, #98ad84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), ?0 1px 5px rgba(0, 0, 0, 0.3), ?0 4px 5px rgba(0, 0, 0, 0.3);
animation: loader 10s linear infinite;
}
運(yùn)行效果：
重慶分公司
重慶分公司
