主流浏览器@font-face支持情况，IE支持EOT格式，FF、chrome等支持TTF
引用请注明出处: https://seonoco.com/blog/1238
发布于 分类 Html5
581天前 有1个用户阅读过
本文来自我的百度空间博客详情
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 {
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;
}-- The End --