在yii2中放置字体的位置?

时间:2015-05-30 15:04:14

标签: fonts yii2 assets

我有一个bootstrap 3模板,想要将其字体(如Icons.woff)添加到yii2,但我不知道如何在AppAsset类中输出它们。我们有$ css和$ js,我们有$ font吗?我该怎么办?

1 个答案:

答案 0 :(得分:5)

您必须手动执行此操作。

创建一个名为' 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 font-family规则在HTML中使用您的字体,如下所示:

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

注意:根据个人经验,在format()文件中声明字体时,fonts.css权限非常重要。 truetype适用于.tff个文件,eot适用于.eot个文件,woff适用于.woff个文件等。此外,如果您有多个文件对于相同的字体,您通常应在@font-face声明中包含所有字体,以确保您为每个不同的浏览器提供选项。