CSS字體 css font-family使用方法:
10年積累的成都網(wǎng)站制作、網(wǎng)站建設(shè)經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程,更有博望免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
font-family:"設(shè)置字體名稱";
CSS運(yùn)用實(shí)例:
.div{font-family:"黑體";}
對(duì)應(yīng)html:
div?class="div"黑體/div
用font-face即可,如下
@font-face
{
font-family:?myFont;
src:?url('Sansation_Light.ttf'),
url('Sansation_Light.eot');
}
為處理兼容性,可以設(shè)置引入多個(gè)格式的字體文件,上面進(jìn)入了兩種,然后在需要用到這種字體的地方 設(shè)置屬性 font-family: myFont; ?即可
CSS調(diào)用系統(tǒng)沒有的字體的操作方法和步驟如下:
1、首先,將字體以ttf,otf等格式放置在文件夾中。 這些是字體的不同格式,以便與不同的瀏覽器兼容,然后創(chuàng)建html文件test,見下圖。
2、其次,完成上述步驟后,在test頁(yè)面上打開的頁(yè)面中添加一個(gè)class為anim的div代碼,見下圖。
3、接著,完成上述步驟后,在打開的頁(yè)面上,找到anim的寬度和高度樣式,見下圖。
4、然后,完成上述步驟后,創(chuàng)建一個(gè)font-face,將字體設(shè)置為test,并將所有字體文件包含在src中,見下圖。
5、隨后,在anim樣式中,完成上述步驟后,通過?font-family:test?來(lái)使用這個(gè)字體,見下圖。
6、最后,完成上述步驟后,在瀏覽器中打開test文件,發(fā)現(xiàn)文本已成為字體了,見下圖。
@font-face{
font-family:?'字體名稱';?
src:?url('../font/字體名稱.eot');
src:url('../font/字體名稱.woff')?format('woff'),
url('../font/字體名稱.ttf')?format('truetype'),
url('../font/字體名稱.svg')?format('svg');
}
/*html中的代碼中加一個(gè)元素div,h1,p等等,里面寫你自己定義的字體名稱*/
h1{font-size:36px;?color:#ccc;font-family:?"你自己定義的字體名稱";}
需要準(zhǔn)備的材料分別有:電腦、瀏覽器、html編輯器。
1、首先,打開html編輯器,新建html文件,例如:index.html。
2、在index.html中的style標(biāo)簽中,輸入css代碼:body{font-family: 楷體}。
3、瀏覽器運(yùn)行index.html頁(yè)面,此時(shí)文字的樣式被成功定義為楷體。
CSS中可以使用font-face屬性即可實(shí)現(xiàn)調(diào)用任何外部等特殊字體。
font-face屬性介紹及其實(shí)例:
對(duì)瀏覽器的支持:
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。
Internet Explorer 9+ 支持新的 font-face 規(guī)則,但是僅支持 .eot 類型的字體 (Embedded OpenType)。
使用您需要的字體。
在新的 font-face 規(guī)則中,您必須首先定義字體的名稱(比如 myFirstFont),然后指向該字體文件。
如需為 HTML 元素使用字體,請(qǐng)通過 font-family 屬性來(lái)引用字體的名稱 (myFirstFont):
使用粗體字體。
您必須為粗體文本添加另一個(gè)包含描述符的 @font-face。
文件 "aa.ttf" 是另一個(gè)字體文件,它包含了 Sansation 字體的粗體字符。
只要 font-family 為 "myFirstFont" 的文本需要顯示為粗體,瀏覽器就會(huì)使用該字體。
通過這種方式,我們可以為相同的字體設(shè)置許多 @font-face 規(guī)則。
實(shí)際案例:
案例1:
style?
@font-face
{
font-family:?myFirstFont;
src:?url('aa.ttf'),
url('aa.eot');?/*?IE9+,可以是具體的實(shí)際鏈接?*/
}
div
{
font-family:myFirstFont;
}
/style
案例2:
@font-face
{
font-family:?myFirstFont;
src:?url('aa.ttf'),
url('aa.eot');?/*?IE9+?*/
font-weight:bold;
}
注意事項(xiàng):
A、Internet Explorer 8 以及更早的版本不支持新的 ?font-face 規(guī)則。
B、代碼中注意負(fù)符號(hào),均為英文狀態(tài)下。
C、字體文件格式必須添加后綴,且鏈接中必須帶后綴。