我有三种字体类型-Gotham-bold，Gotham-medium，Gotham-thin，所以我需要使用三遍@ font-face吗？

问题描述

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

Actually I have three files in the fonts folder. These are Gotham-Bold.ttf, Gotham-Medium.ttf, Gotham-Thin.ttf..... So do I need to use the @font-face three times for those three types. Please anybody help me.

我目前使用的代码如下：

I have currently used the code like the following:

    @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");
    }

谢谢。

推荐答案

是的，对于要使用的每种字体粗细，您都需要一个 @ font-face 。

That is correct, you'll need an @font-face for each weight of the font you want to use.

@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;
 }

然后，您可以这样使用字体：

Then you can use your fonts as so:

body {
   font-family: 'Gotham';
}

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

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

// For thin
.light {
  font-weight: 300;
}

这篇关于我有三种字体类型-Gotham-bold，Gotham-medium，Gotham-thin，所以我需要使用三遍@ font-face吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！