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

Question

我有一个包含 2 种自定义字体的文件夹，我将其命名为 Fonts，其中一种名为 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”的属性。链接的名称将是您用来引用字体的名称。在要更改的选择器内的“font-family”属性中将该 webfont 名称添加到字体堆栈中。例如:

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