尝试在Vue CLI 3中加载自定义本地字体时，字体仍然不会出现。我没有收到任何错误消息。检查员显示正在加载的正确规则，但字体在#app上回落到serif。字体不会出现在我的dist文件夹中的任何位置。
我尝试在vue.config.js中添加加载器，更改url路径，并将@ font-face规则移动到不同的位置，将公共路径更改为''和'/'，将scss导入main.js.
字体加载：
@font-face {
font-family: 'OpenSans-Regular';
src: url('/assets/fonts/OpenSans-Regular.eot');
src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
并在App.vue中使用：
<style lang="scss">
#app {
font-family: 'OpenSans-Regular', serif;
}
</style>
该样式放在我的main.scss文件中。文件结构如下：
src
assets
fonts
OpenSans-Regular.eot
OpenSans-Regular.woff
etc
styles
main.scss
App.vue
vue.config.js
vue.config.js文件如下：
module.exports = {
publicPath: '/',
css: {
sourceMap: true,
loaderOptions: {
sass: {
data: `@import "@/styles/main.scss";`
}
}
},
configureWebpack: {
module: {
rules: [{
test: /\.(ttf|otf|eot|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
}]
}
}
}
我也在vue.config.js尝试过一个chainWebpack无济于事：
chainWebpack: config => {
config
.module
.rule("file")
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/,)
.use("url-loader")
.loader("url-loader")
.options({
limit: 10000,
name: 'assets/fonts/[name].[ext]'
})
.end();
}
你试过了吗
@font-face {
font-family: 'OpenSans-Regular';
src: url('~@/assets/fonts/OpenSans-Regular.eot');
src: url('~@/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('~@/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
url('~@/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
url('~@/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
url('~@/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
适用于我Vue CLI 3，没有vue.config.js设置。
我正在加载我的样式：
import Vue from 'vue';
import router from './router';
import store from './store';
// eslint-disable-next-line
import styles from './scss/app.scss';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
不确定这是不是很好的做法。
我将自定义图标字体粘贴在我的初始index.html页面的head标签中，该页面也有自定义字体导入。你将坚持你的<div id="vue-app"></div>相同的页面。所有其他页面/组件都可以使用font-family。
<head>
...
<link rel="stylesheet" href="icon-font/styles.css" />
</head>
但如果我尝试在项目中的任何其他位置它失败。并且Scss甚至不编译。
我最终做的是转移到文件加载器方法来获取要打包的字体并设置公共路径。
vue.config.js
module.exports = {
assetsDir: 'assets/',
publicPath: '/', // Base directory for dev
css: {
sourceMap: true,
loaderOptions: {
sass: {
data: `@import "@/styles/main.scss";`
}
}
},
chainWebpack: config => {
config.module
.rule("fonts")
.test(/\.(ttf|otf|eot|woff|woff2)$/)
.use("file-loader")
.loader("file-loader")
.tap(options => {
options = {
// limit: 10000,
name: '/assets/fonts/[name].[ext]',
}
return options
})
.end()
}
};
文件加载器看不到文件，除非在js中调用，所以我在main.js中导入它们控制台日志是在linter中导航标记未使用的导入
// Fonts need to be called in js for webpack to see and copy over
import OpenSansReg from './assets/fonts/OpenSans-Regular.ttf';
import OpenSansLight from './assets/fonts/OpenSans-Light.ttf';
import OpenSansBold from './assets/fonts/OpenSans-Bold.ttf';
console.log(OpenSansReg, OpenSansBold, OpenSansLight);
然后在我的一个scss文件中
@font-face {
font-family: 'OpenSans-Regular';
src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/OpenSans-Regular.otf') format('opentype'),
url('/assets/fonts/OpenSans-Regular.woff') format('woff'),
url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'),
url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}