如何在css中安装自定义字体

Question

我在一个名为Fonts的文件夹中有一个包含2个自定义字体的文件夹,其中一个名为PlayfairDisplay-Black.我不知道如何在我正在开发的网站中使用它们？

怎么用这些字体？

Answer 1

一个特殊的CSS @ font-face声明可以帮助各种浏览器选择所需的合适字体,而不会让您头疼.

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

您所要做的就是链接到HTML中的样式表,如下所示:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

要利用新字体,必须告诉样式表使用它们.查看上面的原始@ font-face声明,找到名为"font-family"的属性.链接的名称将用于引用字体.将该webfont名称添加到"font-family"属性中的字体堆栈中,在要更改的选择器内.例如:

p { font-family: 'MyWebFont', Arial, sans-serif; }