如何使用 @font-face 添加 Gotham-Light 字体？

Question

我想在网页上使用Gotham-Light字体，但我不会编写CSS代码。我有两个字体文件，名为Gotham-Light.eot和Gotham-Light.ttf。现在我该如何在浏览器中使用这些字体呢？请帮帮我。

- Mishkat Islam

Answer 1

按照以下方式定义您的字体：

@font-face{
   font-family: gotham-light;
   src: url('gotham-light.ttf') url('gotham-light.eot');
}

并像平常一样使用它

#someelement {
    font-family: gotham-light;
}

- Starx

Answer 2

@font-face {
    font-family: 'GothamLight';
    src: url('/fonts/Gotham-Light.eot');
    src: url('/fonts/Gotham-Light.otf') format('opentype'),
         url('/fonts/Gotham-Light.eot?iefix') format('embedded-opentype'),
         url('/fonts/Gotham-Light.woff') format('woff'),
         url('/fonts/Gotham-Light.ttf') format('truetype'),
         url('/fonts/Gotham-Light.svg#gothamlight') format('svg');}

- konfuzius

Answer 3

这不适用于IE，但是在FF和Chrome中你可以这样做

@font-face{
font-family: gotham-light;
src: url('gotham-light.ttf');
}

或者

@font-face{
font-family: gotham-light;
src: url('gotham-light.eot');
}

然后在 CSS 中将所需的类应用到 font-family。

- Mistry