波多野结衣免费久久中文字幕,精品福利一区二区,日本又黄又粗暴的GIF动态图含羞

IIS安裝了font awesome圖標(biāo)字體庫之后，在firefox和chrome上瀏覽正常，但在IE上卻看不見圖標(biāo)，咋回事？查詢后才知道，font awesome在IE上確實(shí)不能運(yùn)行正常。后來通過查詢，原來可以通過兩個(gè)方法來解決這個(gè)問題，完美解決了Font Awesome圖標(biāo)在IE瀏覽器不顯示的問題。

1、css利用expression表達(dá)式輸出圖標(biāo)

由于 content: "\f08e"; 的寫法在IE無效，所以圖標(biāo)無法顯示。不過css里利用expression表達(dá)式，使用 this.innerHTML 方法卻是可以輸出圖標(biāo)的。代碼如下所示：

.fa-external-link {
*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '');
}

這其中  便是一個(gè)font awesome圖標(biāo)（超鏈接箭頭）。*zoom 前面的星號(hào)“*”是表示只對(duì)IE瀏覽器有效。

html代碼就可以這樣寫來輸出一個(gè)font awesome圖標(biāo)：

這里 fa 是另一個(gè)相關(guān)的css類，主要是要聲明 font-family 使用 fontAwesome 字體的作用。代碼如下：

.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

完整html代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-CN" />
     <meta http-equiv="Cache-Control" content="no-transform " />
     <meta http-equiv="Cache-Control" content="no-siteapp" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
     <title>font awesome實(shí)例_兼容IE瀏覽器的方法_卡卡網(wǎng) webkaka.com</title>
<style type="text/css">
/* 引用圖標(biāo)文件注意路徑 */
@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.txtContent{
    width:100%;
    margin:30px 30px 30px 30px;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-external-link:before {
content: "\f08e"; /* 非IE瀏覽器有效 */
}
.fa-external-link {
*zoom:expression(this.runtimeStyle['zoom'] = '1',this.innerHTML = '');
}
.fa-fw {
width: 1.28571429em;
text-align: center;
}
</style>
</head>
<body>
    <div class="txtContent">
        <font style="font-size:16px;font-weight:bold">超鏈接圖標(biāo)</font><br>
        <a href="#">超鏈接圖標(biāo)<i class="fa fa-external-link fa-fw"></i></a><br>
    </div>
</body>
</html>

代碼運(yùn)行結(jié)果如圖：

css利用expression表達(dá)式輸出圖標(biāo)

提示：文章結(jié)尾可下載本實(shí)例。

2、html直接輸出圖標(biāo)

除了上述使用css類輸出圖標(biāo)外，其實(shí)我是還可以直接在html里寫上圖標(biāo)編碼，網(wǎng)頁打開時(shí)即顯示相應(yīng)的圖標(biāo)。這樣說比較抽象，我們看看下面的寫法范例：

這代碼里  便是一圖標(biāo)的編碼（超鏈接箭頭）。查看所有font awesome圖標(biāo)的編碼。

icon-external-link是css類名，主要作用是要聲明 font-family 使用的字體為 FontAwesome 。

.icon-external-link {
font-family:FontAwesome; /* FontAwesome 無引號(hào) */
font-weight: normal;
font-style: normal;
}

FontAwesome 是一個(gè)變量，它是由 @font-face 定義的，如下代碼所示：

@font-face {
font-family: 'FontAwesome'; /* FontAwesome 有引號(hào) */
src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

聲明 @font-face 時(shí)，需要特別主要各文件的路徑要正確。

完整的html代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-CN" />
     <meta http-equiv="Cache-Control" content="no-transform " />
     <meta http-equiv="Cache-Control" content="no-siteapp" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
     <title>font awesome實(shí)例_兼容IE瀏覽器的方法_卡卡網(wǎng) webkaka.com</title>
<style type="text/css">
@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.txtContent{
    width:100%;
    margin:30px 30px 30px 30px;
}
.icon-external-link {
font-family:FontAwesome;
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
    <div class="txtContent">
        <font style="font-size:16px;font-weight:bold">超鏈接圖標(biāo)</font><br>
        <span class="icon-external-link" style=""></span>
    </div>
</body>
</html>