Vue 프로젝트 의 tff 오류 해결
{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"}
const path = require('path');
const htmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: path.join(__dirname,'./src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [
new htmlWebpackplugin({ // html
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
}),
new VueLoaderPlugin()
],
module: { //
rules: [
{test: /\.css$/, use:['style-loader','css-loader']},// .css
{test: /\.less$/, use: ["style-loader",'css-loader','less-loader']},
{test: /\.scss$/, use: ["style-loader",'css-loader','sass-loader']},
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"},
{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: "url-loader"},
{test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
{test: /\.vue$/, use: 'vue-loader'}
]
}
};
1.필요 한 글꼴 을 다운로드 합 니 다.ttf 형식 본 고 는(FZCYJ.ttf 를 예 로 들 면)
2.src 에서 common 파일 을 새로 만 듭 니 다.폴 더 에는 다음 파일 이 포함 되 어 있 습 니 다.
3、font.css 열기
@font-face {
font-family: 'FZCYJ'; //
src: url('FZCYJ.ttf'); //
font-weight: normal;
font-style: normal;
}
5.App.vue 글꼴 도입
6、body 에서 글꼴 설정 가능
body{
font-family: FZCYJ;
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
