前端实现字体引入

438 阅读1分钟

在src下新建font文件夹,把ui给的字体放入

在font文件夹下新建font.css文件

/* Source Han Sans CN-Medium */
@font-face {
    font-family: 'Source Han Sans CN-Medium';
    src: url(./SourceHanSansCN-Medium.otf)
}
@font-face {
    font-family: 'Source Han Sans CN-Bold';
    src: url(./SourceHanSansCN-Bold.otf)
}
@font-face {
    font-family: 'Source Han Sans CN-ExtraLight';
    src: url(./SourceHanSansCN-ExtraLight.otf)
}
@font-face {
    font-family: 'Source Han Sans CN-Heavy';
    src: url(./SourceHanSansCN-Heavy.otf)
}
@font-face {
    font-family: 'Source Han Sans CN';
    src: url(./SourceHanSansCN-Normal.otf)
}
@font-face {
    font-family: 'Source Han Sans CN-Regular';
    src: url(./SourceHanSansCN-Regular.otf)
}
@font-face {
    font-family: '字体名字';
    src: url(./SourceHanSansCN-Light.otf)
}

在main.js中引入font.css

import '@/font/font.css'

使用引入的字体

.class {
    font-family: '字体名字'
}