一、web載入字體設置@font-face

1、@font-face設置

！設置時必須在最后加上;（分號），否則@font-face無效

屬性：

font-famliy：設置字體名稱

src：設置字體文件

例如：

@font-face{

font-famliy:”league Gothic”;

src:url(”font/league_Gothic-web font.woff”);

}

2、@font-face兼容性解決方案

@font-face{

設置字體名稱

font-famliy:”league Gothic”;

兼容IE9兼容模式

src:url(”font/league_Gothic-webfont.eot”);

兼容IE6~IE8，format指明字體格式使瀏覽器更好的兼容

src:url(”font/league_Gothic-webfont.eot?#iefix”) format(”embedded-opentype”),

      woff2是woff的優化版

      url(”font/league_Gothic-webfont.woff2”) format(”woff2”),

      兼容除IE外瀏覽器

      url(”font/league_Gothic-webfont.woff”) format(”woff”),

      兼容Safari, Android, iOS

      url(”font/league_Gothic-webfont.ttf”) format(”ttf”),

      url(”font/league_Gothic-webfont.svg”) format(”svg”);

}

二、使用web字體

h1{

font-family:’league Gothic’;

}

三、web粗體、斜體字體

web字體一般包括：一個常規體，一個粗體，一個斜體，一個粗斜體

1、設置粗體斜體

例如：

@font-face{   指定常規字體

font-famliy:”league Gothic”;

src:url(”font/league_Gothic-webfont.woff2”) format(”woff2”),

      url(”font/league_Gothic-web font.woff”) format(”woff”);

font-weight:normal;

font-style:normal;

}

@font-face{   指定粗體

font-famliy:”league Gothic”;

src:url(”font/league_Gothic-webfont.woff2”) format(”woff2”),

      url(”font/league_Gothic-web font.woff”) format(”woff”);

font-weight:bold;

font-style:normal;

}

@font-face{   指定斜體

font-famliy:”league Gothic”;

src:url(”font/league_Gothic-webfont.woff2”) format(”woff2”),

      url(”font/league_Gothic-web font.woff”) format(”woff”);

font-weight:normal;

font-style:italic;

}

@font-face{   指定粗斜體

font-famliy:”league Gothic”;

src:url(”font/league_Gothic-webfont.woff2”) format(”woff2”),

      url(”font/league_Gothic-web font.woff”) format(”woff”);

font-weight:bold;

font-style:italic;

}

！如上設置，只需指定完字體，讓瀏覽器自行判斷，<em>、<strong>使用哪種字體

2、設置粗體斜體兼容IE8

@font-face{   指定常規字體

font-famliy:”league Gothic”;

src:url(”font/league_Gothic-webfont.eot?#iefix”) format(”embedded-opentype”),

      url(”font/league_Gothic-webfont.woff2”) format(”woff2”),

      url(”font/league_Gothic-web font.woff”) format(”woff”);

font-weight:normal;

font-style:normal;

}

@font-face{   指定粗體

font-famliy:”league Gothic bold”;

src:url(”font/league_Gothic-webfont.eot?#iefix”) format(”embedded-opentype”),

      url(”font/league_Gothic-webfont.woff2”) format(”woff2”),

      url(”font/league_Gothic-web font.woff”) format(”woff”);

font-weight:bold;

font-style:normal;

}

@font-face{   指定斜體

font-famliy:”league Gothic”;

src:url(”font/league_Gothic-webfont.woff2”) format(”woff2”),

      url(”font/league_Gothic-web font.woff”) format(”woff”);

font-weight:normal;

font-style:italic;

}

@font-face{   指定粗斜體

font-famliy:”league Gothic boldItalic”;

src:url(”font/league_Gothic-webfont.eot?#iefix”) format(”embedded-opentype”),

      url(”font/league_Gothic-webfont.woff2”) format(”woff2”),

      url(”font/league_Gothic-web font.woff”) format(”woff”);

font-weight:bold;

font-style:italic;

}

四、其他選擇符

:target選擇符：依賴于ID屬性，要使用ID連接到網頁中的特定位置

例如：<a href=”#ID”>超鏈接至form</a>

      <form id=”ID”>XXX</form>

  #ID:target——點擊<a>后form成為target

:not()選擇符：選取不符合條件的標簽

例如：p:not(.aaa)

！not()只能使用簡單選擇符，不能使用情況如下：

1、后代選擇符（div p a）。

2、偽元素選擇符（:hover）

3、群組或組合選擇符（h2 + p）

4、同時使用多個not()選擇符（ p:not(#ID):not(.class) ）