6.（初级）web字体之：@font-face

一、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) ）