我有一个bootstrap 3模板,想要将其字体(如Icons.woff)添加到yii2,但我不知道如何在AppAsset类中输出它们。我们有$ css和$ js,我们有$ font吗?我该怎么办?
答案 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
声明中包含所有字体,以确保您为每个不同的浏览器提供选项。