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

Answer 2

您必须链接到HTML中的字体样式，如下所示：

<link rel="stylesheet" href="fonts/fonts.css" type="text/css"  />

使用来自第三方应用程序（例如fontsquirrel.com或transfonter.org的生成font-face附加字体文件，然后添加您的css字体，如

    @font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

将webfont名称添加到要更改的选择器内“font-family”属性中的字体堆栈。例如：

p { font-family: 'open_sansregular'; }

注意：这是基于不再适用的webfont模式。除了IE8之外没有使用eot，svg是一种实际上不再维护的格式，并且已被大多数主流浏览器主动删除，而WOFF是围绕ttf和otf源的逐字节包装，每个浏览器都支持ttf / otf也支持WOFF，因此加载两者都没有意义。对于现代浏览器，加载WOFF（和WOFF2，如果你需要它，但它仍然没有得到很好的支持），如果你需要IE8支持，添加eot，这是你需要的唯一两个。这里我只附加其他文件的知识。

Answer 3

在你的css中试试这个：

@font-face {
    font-family: 'MyFairFont'; /*to use later*/
    src: url('http://exampledomain.com/fonts/PlayfairDisplay-Black.ttf'); /*URL to the font*/
}

然后在特定元素上使用字体：

.myclassname {
    font-family: 'MyFairFont';
}

Answer 4

您可以在https://www.fontsquirrel.com/tools/webfont-generator或https://www.web-font-generator.com/轻松实现您想要的目标。您可以上传字体并获取所需格式的字体，以使其在大多数浏览器中运行并且css调用这些字体字体。将字体上传到您的项目，包括他们为您提供的css片段，正确链接您的字体，然后就可以了。

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

4 个答案: