主流浏览器@font-face支持情况,IE支持EOT格式,FF、chrome等支持TTF

发布于 2010-12-03 作者 [重庆SEO]

本文来自百度空间博客搬家

2007年开始使用的是 hi.baidu.com/udjy
后来百度空间强制升级为轻博客 hi.baidu.com/imnoco
2015年百度关闭了百度空间

‍@font-face
设置要在 HTML 文档中嵌入的字体。

#语法
@font-face {
sFontDescription
}

#可能的值
sFontDescription

一个字符串,用于指定以下值:

font-family: font-familyName

可用于 font-family 属性的值范围中的任意值。

src: url( sURL )

字体文件的位置,其中 sURL 是绝对 URL 或相对 URL。

@font-face定义字体,font-family为定义字体的名称可以随便写,src为字体文件路径。然后在需要使用这个字体的标签里像平常那样调用就可以了,比如.div{font-family:"myfont"}

eot字体用于微软的IE浏览器,TTF字体用于Chrome、FireFox、Opera、Safari(pc)浏览器。

利用此功能,可以使用计算机上可能没有的特定字体。URL 必须指向嵌入的 OpenType 文件(.eot 或 .ote 格式)。此文件包含转换为 TrueType 字体的压缩字体数据。

#示例
以下示例通过指向位于另一个网站上的字体来源,从而在 HTML 文档中嵌入字体:

<html>
<head><style>
@font-face {
font-family:comic;
src:url(/css/font-face/comic-eot.eot);
}
</style>
</head>
<body>
<p style="font-family:comic;font-size:18pt">
This paragraph uses the font-face rule defined
in the preceding style element. The rule embeds
an OpenType file for the Comic Sans font.
</p>
</body>
</html>
看看关于font-face字体在线转换网站(http://www.fontsquirrel.com)的css吧!这样的案例应该更直白!

@font-face {
font-family: 'MEgalopolis';
src: url('fonts/megalopolisextra-webfont.eot');
src: local('☺'), url('fonts/megalopolisextra-webfont.woff') format('woff'), url('fonts/megalopolisextra-webfont.ttf') format('truetype'), url('fonts/megalopolisextra-webfont.svg#webfontgFqFRjPN') format('svg');
font-weight: normal;
font-style: normal;
}