如果我在 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

不，请查看这篇文章：新的 Bulletproof @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; }