fonts - 在yii2中的哪里放字体？

Question

我有一个bootstrap 3模板，想将其字体(例如Icons.woff)添加到yii2，但是我不完全知道如何在AppAsset类中将它们输出。像$ css和$ js一样，我们有$ font吗？我应该怎么办？

Answer 1

您将需要手动进行某种操作。

在您的网络目录中创建一个名为“fonts”的文件夹，然后将您的字体文件放入其中。

转到您的css目录，并在此处创建新的“fonts.css”文件。在内部，您可以使用@font-face规则声明字体，如下所示:

@font-face {
    font-family: 'Font_Name_1';
    src: url('../fonts/font1.ttf') format('truetype');
    font-weight: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Font_Name_2';
    src: url('../fonts/font2.ttf') format('truetype');
    font-weight: normal;
    font-weight: normal;
}

要将这个css文件添加到您的项目中，请转到assets/AppAsset.php或您曾经扩展过的文件，然后将新的css文件添加到该列表的其余部分:

public $css = [
        'css/site.css',
        ...,
        'css/fonts.css',
    ];

之后，您可以通过CSS字体系列规则在HTML中使用字体，如下所示:

body {
    font-family: 'Font_Name_1', serif;
}

注意:从个人经验来看，在 format()文件中声明字体时正确获取 fonts.css是非常重要的。 truetype适用于 .tff文件， eot适用于 .eot文件， woff适用于 .woff文件，等等。此外，如果您有多个相同字体的文件，则通常应将它们全部包含在 @font-face声明中，以确保您可以选择对于每个不同的浏览器。