1)文字
在style标签引入
@import "路径";
/*例如:*/
@import "font/font.css";
/*此文件格式*/
@font-face {
font-family: 'FontName';
src: url('TTTGB-Medium180130.ttf');
font-weight: normal;
font-style: normal;
}
使用:
font-family: 'FontName';
2)图片
定义:
data(){
return{
url:require("../../assets/img/1.png")
}
}
或者
computed(){
setIMG(){
return require("../../assets/img/1.png")
}
}
使用
使用变量名即可
同一目录下渲染多个图片
methods: {
getImg(img) {
return '../../assets/img/' + img;
},
}
使用
<img class="xzimg" :src="getImg('1.png')" />
本文介绍了如何在CSS中使用`@import`导入字体样式,以及通过`@font-face`定义自定义字体。同时,详细阐述了在Vue.js中动态加载图片的方法,包括在`data`或`computed`属性中定义图片路径,并在模板中使用变量显示图片。此外,还展示了如何在同一目录下渲染多个图片的技巧。
1969

被折叠的 条评论
为什么被折叠?



