2

实际上我在字体文件夹中有三个文件。这些是Gotham-Bold.ttf, Gotham-Medium.ttf, Gotham-Thin.ttf..... 所以我需要@font-face为这三种类型使用三次。请任何人帮助我。

我目前使用的代码如下：

    @font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Bold.eot'); /* IE9 Compat Modes */
    src: url('fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Gotham-Bold.woff') format('woff'), /* Modern Browsers */
         url('fonts/Gotham-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/Gotham-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
     font-weight: normal;
     font-style: normal;
     }

     @font-face {
      font-family: 'Gotham';
      src: url("/fonts/Gotham-Bold.eot");
     }
    @font-face {
      font-family: 'Gotham';
      src: url("/fonts/Gotham-Bold.woff") format("woff");
    }

谢谢。

4

2 回答 2

12

这是正确的，你需要一个@font-face你想要使用的字体的每个权重。

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/Gotham-Bold.woff') format('woff'), /* Modern Browsers */
     url('fonts/Gotham-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/Gotham-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 700;
   font-style: normal;
 }

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Medium.eot'); /* IE9 Compat Modes */
  src: url('fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/Gotham-Medium.woff') format('woff'), /* Modern Browsers */
     url('fonts/Gotham-Medium.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/Gotham-Medium.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 400;
   font-style: normal;
 }

@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Thin.eot'); /* IE9 Compat Modes */
  src: url('fonts/Gotham-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/Gotham-Thin.woff') format('woff'), /* Modern Browsers */
     url('fonts/Gotham-Thin.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fonts/Gotham-Thin.svg#svgFontName') format('svg'); /* Legacy iOS */
   font-weight: 300;
   font-style: normal;
 }

然后你可以这样使用你的字体：

body {
   font-family: 'Gotham';
}

// For normal
.normal {
  font-weight: 400;
}

// For bold
.bold,
strong {
  font-weight: 700;
}

// For thin
.light {
  font-weight: 300;
}
于 2013-07-24T14:47:51.263 回答
0

是的，您需要将每种字体类型声明为单独的@fontface. 在这种情况下，每个都是不同的字体系列。

像这样：

@font-face {
  font-family: 'GothamThin';
  /* links to all gotham thin files, font-weight/style declaration */
}
@font-face {
  font-family: 'GothamMedium';
  /* links to all gotham medium files, font-weight/style declaration */
}
@font-face {
  font-family: 'GothamBold';
  /* links to all gotham bold files, font-weight/style declaration */
}

不过，只包含您正在使用的字体。如果您不在页面上的任何地方使用 Gotham Thin，请不要包含它（为了速度）。

于 2013-07-24T14:46:49.197 回答