CSS3怎么設(shè)置字體兼容所有瀏覽器

本篇內(nèi)容介紹了“CSS3怎么設(shè)置字體兼容所有瀏覽器”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

    1、設(shè)置字體（兼容所有瀏覽器）

    @font-face{

    font-family:'iconfont';

    src:url("fonts/iconfont/iconfont.eot");

    src:url("fonts/iconfont/iconfont.eot?#iefix")format("embedded-opentype"),

    url("fonts/iconfont/iconfont.ttf")format("truetype"),

    url("fonts/iconfont/iconfont.woff")format("woff"),

    url("fonts/iconfont/iconfont.svg#icomoon")format("svg");

    font-weight:normal;

    font-style:normal;}

    @font-face{font-family:name;src:url(url);sRules}

    說明：

    name:　字體名稱

    url:　使用絕對(duì)或相對(duì)地址指定OpenType字體

    sRules:　樣式表定義

    設(shè)置嵌入HTML文檔的字體。

    @font-face{font-family:dreamy;font-weight:bold;src:url(http://www.example.com/font.eot);}

    2、div[class^="test"]

    設(shè)置只有div內(nèi)class屬性值以"test"開頭的所有div元素的背景色：

    div[class^="test"]

    {

    background:#ffff00;

    }

    3、[class*="abc"]

    class的值中含有"abc"的元素。

    div[class*="abc"]

    代表只有div內(nèi)class=abc的樣式

    4、指定最后一個(gè)p標(biāo)簽背景樣式

    p:last-child{background:#ff0000;}

    5、顯示設(shè)備分辨率最小768并且最大979時(shí)候顯示abc（CSS3）

    @media(min-width:768px)and(max-width:979px){

    .abc{}

    }

    ie6-ie9支持

    <style>

    @mediascreenand(min-width:1201px){

    .y-row{

    width:1200px;

    border:1pxsolid#333;height:300px;

    min-width:1200px;}}

    @mediascreenand(max-width:1200px){

    .y-row{

    width:900px;

    border:1pxsolid#333;height:300px;

    min-width:900px;}}

    </style>

    <!--[ifltIE9]>

    <scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

    <![endif]-->

    6、div>span（IE6不支持）

    div>span{字體12px}

    div標(biāo)簽內(nèi)的兒子span樣式為字體12px，div內(nèi)孫子span不起作用，具有優(yōu)先

    7、字體陰影

    .blue{background:#01dbff;text-shadow:2px2px2px#09a5ef;}

    陰影字體靠左距離靠下距離陰影距離范圍陰影顏色

    字體背景+字體陰影

    8、盒子陰影

    -moz-border-radius:0px5px5px0px;-webkit-border-radius:0px5px5px0px;border-radius:0px5px5px0px;-moz-box-shadow:0px0px1px#fffinset;-webkit-box-shadow:0px0px1px#fffinset;box-shadow:0px0px1px#fffinset;

    -moz代表firefox瀏覽器私有屬性

    -ms代表IE瀏覽器私有屬性

    -webkit代表chrome、safari私有屬性

    -o代表opera蘋果瀏覽器

    設(shè)置

    border-radius:0px5px5px0px;代表邊框右上和右下圓角為5px

    box-shadow:0px0px1px#fffinset;代表邊框間距靠左0靠上0和1px陰影范圍陰影顏色為白色

    有inset代表框內(nèi)陰影不帶inset代表框外陰影

    注意：box-shadow:0px0px1px#fff

    第1個(gè)值為0時(shí)，代表左右邊框陰影為1px范圍

    第1個(gè)值為正整數(shù)代表左邊框陰影

    第1個(gè)值為負(fù)整數(shù)代表右邊框陰影

    同理

    第2個(gè)值為0代表上下邊框陰影

    第2個(gè)值為正整數(shù)代表1px陰影距離上邊框多少

    第1個(gè)值為負(fù)整數(shù)代表下邊框陰影設(shè)置

    border-radius圓角

    9、:first-letter

    p:first-letter{font-size:20px}

    代表p標(biāo)簽內(nèi)第一個(gè)字大小為20px

    10、div:first-line{color:red;font-size:16px;}

    代表DIV中第一行文字為紅色字體為16px

    11、pa:first-child{color:green}

    代表p盒子里第一個(gè)a超鏈接字體顏色為綠色

    12、p:before{content:"我在這"}

    代表p標(biāo)簽對(duì)象前加入一段內(nèi)容：“我在這”

    13、table:after{content:ENDOFTABLE}

    代表在table對(duì)象后顯示內(nèi)容“ENDOFTABLE”

    14、單冒號(hào)與雙冒號(hào)

    偽元素由雙冒號(hào)和偽元素名稱組成。雙冒號(hào)是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。但是偽類兼容現(xiàn)存樣式，瀏覽器需要同時(shí)支持舊的偽類，比如:first-line、:first-letter、:before、:after等。

    那么現(xiàn)在就可以完整的回答標(biāo)題中的問題了，對(duì)于CSS2之前已有的偽元素，比如:before，單冒號(hào)和雙冒號(hào)的寫法::before作用是一樣的。

    所以，如果你的網(wǎng)站只需要兼容webkit、firefox、opera等瀏覽器，建議對(duì)于偽元素采用雙冒號(hào)的寫法，如果不得不兼容IE瀏覽器，還是用CSS2的單冒號(hào)寫法比較安全。

    15、.uploaderinput[type=file]{}

    代表class為uploader盒子內(nèi)input標(biāo)簽屬性為type=file設(shè)置樣式

“CSS3怎么設(shè)置字體兼容所有瀏覽器”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！