css 怎么调用外部字体。。

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

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

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

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

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

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

如果你想你网站上的文字看起来更加不一样，就必须要给网页中的标题、段落和其他页面元素应用不同的字体。你可以用font-family属性在CSS样式里设置字体，如： font-family:Arial; 但是设置的这种字体，你电脑上必须装有该字体，否则将按原字体样式显示。当然，也可以写上多种字体，当对方浏览你的网站，没有安装第一种字体时，浏览器就会在列表中继续往上搜寻，直到找到有适合的字 体为止，像这样： font-family:Arial,Helvetica,sans-serif; 在上例中，Web浏览器会先看看是否安装了Arial字体。如果安装了，那么就用Arial字体显示；如果没有安装，浏览器就会继续寻找Helvetica字体；如果还是没有找到，最后它就会指定一种通用的字体--sans-serif。如果字体的名称中包含多个单词时，则必须用双引号（“”）将它们括起来，如： font-family:"Times New Roman",Times,serif; 以下就介绍几种常用的font-family字体类型组合，每一列的最后都包含一种通用的字体。 1、Serif字体：最适用于冗长的文字信息，因为读者都会觉得这种字体使字母主笔划的结尾处会有一些细小的“足”，能够比较有效地引导人们的视线从一个字母一到到下一个字母，阅读起来感觉更加轻松。serif字体包括：Times，Times New Roman、Georgia。 2、Sans-serif字体：它看起来干净而简洁，所有经常被用在标题上。Sans-serif字体包括：Arial、Helvetica、Verdana和Formata。 3、Monospaced字体：它经常用于显示计算机代码，它每个字母都是等宽的。

你在eot后面加一个#iefix试试，我之前也做过css嵌入字体，而且各个浏览器测试也没什么问题，我当时的写法是这样的
@font-face
{
font-family:
'steiner';
src:
url('steinereot');
src:
url('steinereot#iefix')
format('embedded-opentype'),
url('steinerwoff')
format('woff'),
url('steinerttf')
format('truetype'),
url('steinersvg#steiner')
format('svg');
font-weight:
normal;
font-style:
normal;
}
你可以对比一下，另外可以看看在url里面加单引号会不会解决问题。

CSS自定义字体，让你的字体运用随心所欲！
步骤：
1、下载所需字体。字体下载站提供的字体一般为TTF格式。
2、字体转格式。为了确保在主流浏览器中都能正常显示该字体，需要提供3种字体格式。我们可以拿下载下来的TTF文件去转换得到另外两种格式的字体。字体文件格式的转换可以通过网站FontsQuirrel或 onlinefontconverter提供的在线字体转换服务获取。
TTF或OTF 适用于Firefox 35、Safari、Opera
EOT 适用于Internet Explorer 40+
SVG 适用于Chrome、IPhone
3、使用@font-face定义字体。如果你是在fontsquirrelcom进行的字体转换，那么连定义字体的步骤都可以免了。转换以后他会提供一个下载包，里面包含需要的字体格式和定义好字体样式的CSS文件stylesheetcss，还有一个供查看字体的demohtml文件。把字体和stylesheetcss拷贝到你的CSS文件夹目录里面就可以调用了。如何生成的样式不能满足你的要求，可以自己修改。
4、在html里面调用CSS。
附： CSS字体声明：
@font-face {
font-family: ‘fontNameRegular’;
src: url(’fontNameeot’);
src: local(’fontName Regular’),
local(’fontName’),
url(’fontNamewoff’) format(’woff’),
url(’fontNamettf’) format(’truetype’),
url(’fontNamesvg#fontName’) format(’svg’);
}
/其中fontName替换为你的字体名称/
在页面中需要的地方使用该字体：
p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}
然而，博客园并不能上传字体文件，上传到别的网盘什么的好像并不知道这个url什么的，这就很尴尬了呀。

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样式表中引入字体
一般的特殊字体文件是ttf、eot、svg结尾的
比如glyphicons-halflings-regularttf
然后在css样式表中引入字体
@font-face {
font-family: 'Glyphicons Halflings'; /字体的名字/
src: url('glyphicons-halflings-regularttf') format('truetype'); /字体文件的路径/
}
在样式表中定义特殊字体的名字和符号对应，比如
glyphicon-plus {
content: "\2b";
}
在页面上显示，可以写<i class="glyphicon-plus"></i>就可以了
通常特殊字体文件和css是配套的，不然自己去写名字和符号的对应太麻烦

---