css怎么调用外部字体？

CSS中可以使用font-face属性即可实现调用任何外部等特殊字体。

font-face属性介绍及其实例：

对浏览器的支持：

Firefox、Chrome、Safari 以及 Opera 支持 ttf (True Type Fonts) 和 otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 font-face 规则，但是仅支持 eot 类型的字体 (Embedded OpenType)。

使用您需要的字体。

在新的 font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

使用粗体字体。

您必须为粗体文本添加另一个包含描述符的 @font-face。

文件 "aattf" 是另一个字体文件，它包含了 Sansation 字体的粗体字符。

只要 font-family 为 "myFirstFont" 的文本需要显示为粗体，浏览器就会使用该字体。

通过这种方式，我们可以为相同的字体设置许多 @font-face 规则。

实际案例：

案例1：<style> 
@font-face
{
font-family: myFirstFont;
src: url('aattf'),
     url('aaeot'); / IE9+,可以是具体的实际链接 /
}
div
{
font-family:myFirstFont;
}
</style>案例2：@font-face
{
font-family: myFirstFont;
src: url('aattf'),
     url('aaeot'); / IE9+ /
font-weight:bold;
}

注意事项：

A、Internet Explorer 8 以及更早的版本不支持新的  font-face 规则。

B、代码中注意负符号，均为英文状态下。

C、字体文件格式必须添加后缀，且链接中必须带后缀。

CSS选择器、CSS属性

style写在head中间，type="text/css"可以不用写，默认就是这个。

规定文字样式、粗细、大小、字体的属性

1、字体不存在用户电脑上时：
不处理时，使用用户电脑系统默认字体
处理：font-family:“不存在的字体”,"备选字体"；--设置备选字体，可设置多个备选字体

2、一串字符串既有中文，又有英文时，如何设置两种字体
英文字体是中文字体的子集。意思是：英文字体不能处理中文，中文字体可以处理英文

文本装饰、文本对齐，文本缩进的属性

文本装饰-文字的下划线，中划线等

文本对齐：

文本缩进：

格式：
p{
font:20px,"楷体"
}
标签选择器选中的是页面中所有的该标签

作用：根据指定的id名称找到对应的标签，然后设置属性。（标签选择器选中的是全部的同类标签）
第一步：给需要设置的标签设置id，
第二步：

注意：
1、id在同一页面是唯一的
2、id名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用HTML的标签名
3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。

根据指定的类名称找到对应的标签，然后设置属性
第一步：给需要设置的标签设置className，
第二步：

注意：
1、className是可以重复的
2、className名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用标签名
3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。
4、同一个HTML变迁可以有多个classname

1、id使用“,”class使用#
2、class相当于人名，所以同一个页面上的HTML标签可以有一样的className；
id相当于身份z，所以同一个页面上的HTML标签不可以有一样的id；
3、class相当于人名，所以，一个HTML标签可以有多个Class
id相当于身份z，所以，一个HTML标签只能有一个id
4、一般情况下设置样式，使用class；如果需要js配合，使用id

格式：

先祖位置可以是HTML标签，可以是class名，可以是id
后代位置可以是HTML标签，可以是class名，可以是id
可以随意组合

只会查找直接子元素
格式：

1、都可以使用HTML标签、id名、class名

1、后代使用空格，子使用>
2、后代可以选取指定标签的所有特定标签，包括子、孙；而子只能选取指定标签的特定子标签

定义：两个选择器相交的部分
格式：
选择器1选择器2{

}
选择器1和选择器2之间没有任何符号，没有空格，没有>

选择器1和选择器2之间有逗号。

相邻：选择器1+选择器2，给紧跟着选择器1后面的选择器2设置样式
通用：选择器1~选择器2，给选择器1后面的所有选择器2设置样式

CSS3中新增的选择器最具代表性的就是序选择器
1同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签n的值可以是数值，可以是“odd”、“even”,也可以是表达式，比如xn+y
:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签
注意点: 不区分类型

2同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

| [ attribute ] | [target] | 选择带有 target 属性所有元素。 | 2 |
| [ attribute = value ] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |
| [ attribute ~= value ] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |
| [ attribute |= value ] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |

| [ attribute ^= value ] | a[src^=">字体是要客户端浏览器支持的。请注意是浏览器而不是 *** 作系统。如果设置的字体不能被浏览器识别，那么浏览器会使用浏览器的默认字体（IE默认为宋体，当然，这个默认值是可以修改的）来替代网页字体显示。

placeholder属性是css3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占位文本。因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

::-webkit-input-placeholder { / WebKit browsers /
color:#999;
}
:-moz-placeholder { / Mozilla Firefox 4 to 18 /
color:#999;
}
::-moz-placeholder { / Mozilla Firefox 19+ /
color:#999;
}
:-ms-input-placeholder { / Internet Explorer 10+ /
color:#999;
}

还可以写成下面这样：

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#666;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color:#666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:#666;
}

知识点：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

css伪类：CSS 伪类用于向某些选择器添加特殊的效果。

css伪元素：CSS 伪元素用于向某些选择器设置特殊效果。

伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类， 如:first-line,:first-letter,:before,:after等等。因此对于css2之前已经有的伪元素两种写法的作用是一样的，但是为了兼容IE浏览器还是使用单冒号的写法。

1、在文件夹中放入ttf、otf等格式的字体，这些都是一个字体的不同格式，是为了兼容不同的浏览器，然后创建一个html文件test。如下图所示：

2、在test页面打开的页面中添加一个class为anim的div代码。如下图所示：

3、在打开的页面找到接着设置anim的宽高等样式。如下图所示：

4、创建一个font-face，设置字体为 test ，在src中把我们的字体文件都包含进去。如下图所示：

5、现在我们就可以在anim样式中通过 font-family:test 来使用这个字体。如下图所示：

6、在浏览器中打开test文件，我们发现文字已经变成我们的字体了。如下图所示：

H5edu教育html5开发为您解答：

1、PX为单位

在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。

2、em为单位
这种技术需要一个参考点，一般都是以\<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”，这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“14em”。

CSS Code复制内容到剪贴板

body {

font-size: 625%;/10 ÷ 16 × 100% = 625%/

}

h1 {

font-size: 24em; /24em × 10 = 24px /

}

p   {

font-size: 14em; /14em × 10 = 14px /

}

li {

font-size: 14em; /14 ×  = 14px  /

}

---