如果我在 css 中定义自定义外部字体，我是否需要为每个使用它的类声明 src？

Question

如果我使用外部加载的字体(例如:"MyFont")并且它将在多个类中使用，我需要这样做吗:

.one { font-family: MyFont; src: url( "fonts/MyFont.ttf" ); }
.two { font-family: MyFont; src: url( "fonts/MyFont.ttf" ); }

或者我可以这样做吗?

.one { font-family: MyFont; src: url( "fonts/MyFont.ttf" ); }
.two { font-family: MyFont; }

Answer 1

不，看看这篇文章:新的防弹@Font-Face语法

在CSS文件的开头添加如下内容:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

运行这个示例代码，你的CSS的其余部分看起来应该是这样的:

.one { font-family: MyFontFamily }
.two { font-family: MyFontFamily }

Answer 2

你应该使用@font-face指令。

@font-face {
    font-family: MyFont;
    src: url(...);
}
.one { font-family: MyFont; }
.two { font-family: MyFont; }