在yii2中放置字体的位置？

Question

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

Answer 1

你必须手动做.

在您的Web目录中创建一个名为"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声明中包含所有文件,以确保每个不同的浏览器都有一个选项.