如何使用css2从服务器加载字体系列

时间:2012-11-28 05:28:49

标签: css

我想使用css2从服务器加载字体。我想在服务器上保留字体。我不想使用CSS3,因为并非所有的浏览器都支持它,所以我怎样才能使用css2?

@font-face

2 个答案:

答案 0 :(得分:5)

<style type="text/css">
@font-face {
    font-family: 'lucida_sans_unicoderegular';
    src: url('font/lsansuni-webfont.eot');
    src: url('font/lsansuni-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/lsansuni-webfont.woff') format('woff'),
         url('font/lsansuni-webfont.ttf') format('truetype'),
         url('font/lsansuni-webfont.svg#lucida_sans_unicoderegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
#menu {
    font-family: 'lucida_sans_unicoderegular',Times New Roman, Times, serif;
}
</style>

lsansuni-webfont.eot,lsansuni-webfont.wof,..将此文件放在字体文件夹中

使用此生成器创建@fontface

http://www.fontsquirrel.com/fontface/generator

答案 1 :(得分:1)

What is it?

@font-face是一条css规则,允许您从服务器下载特定字体,以便在用户未安装该字体时呈现网页。这意味着网页设计师将不再需要遵守用户在其计算机上预安装的特定“网络安全”字体集。

How to use:

语法

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

实施例

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

兼容性:

IE 6,7,8,9,10,Firefox,Chrome支持它。