Javascript 如何在VueJS应用程序中使用Google Web字体?
我确实找到了这个插件 更新了使用初学者工具包生成的babel.config.js:Javascript 如何在VueJS应用程序中使用Google Web字体?,javascript,vue.js,vuejs2,google-fonts,Javascript,Vue.js,Vuejs2,Google Fonts,我确实找到了这个插件 更新了使用初学者工具包生成的babel.config.js: const GoogleFontsPlugin = require('google-fonts-webpack-plugin') module.exports = { presets: [ '@vue/app', ], plugins: [ new GoogleFontsPlugin({ fonts: [ { family: 'Inconsolata' }
const GoogleFontsPlugin = require('google-fonts-webpack-plugin')
module.exports = {
presets: [
'@vue/app',
],
plugins: [
new GoogleFontsPlugin({
fonts: [
{ family: 'Inconsolata' },
{ family: 'Oswald' },
],
/* ...options */
}),
],
};
将字体添加到#app
类
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
#app {
font-family: 'Inconsolata', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
家|
关于
#应用程序{
字体系列:“Incolata”,无衬线;
-webkit字体平滑:抗锯齿;
-moz osx字体平滑:灰度;
文本对齐:居中;
颜色:#2c3e50;
}
#导航{
填充:30px;
a{
字体大小:粗体;
颜色:#2c3e50;
&.路由器链路完全激活{
颜色:#42b983;
}
}
}
但字体仍然是Arial:
我刚弄明白,我必须像这样导入它:
<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Oswald');
#app {
font-family: 'Inconsolata', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
@导入url('https://fonts.googleapis.com/css?family=Inconsolata|奥斯瓦尔德';
#应用程序{
字体系列:“Incolata”,无衬线;
-webkit字体平滑:抗锯齿;
-moz osx字体平滑:灰度;
文本对齐:居中;
颜色:#2c3e50;
}
#导航{
填充:30px;
a{
字体大小:粗体;
颜色:#2c3e50;
&.路由器链路完全激活{
颜色:#42b983;
}
}
}
您可以使用webpack为Vue JS配置Google字体。
使用npm或Thread作为开发人员依赖项安装google字体网页包插件。
在根文件夹中创建webpack.config.js文件。然后将此添加到其中:
const GoogleFontsPlugin = require("google-fonts-webpack-plugin")
module.exports = {
"entry": "index.js",
/* ... */
plugins: [
new GoogleFontsPlugin({
fonts: [
{ family: "Source Sans Pro" },
{ family: "Roboto", variants: [ "400", "700italic" ] }
]
})
]
}
只需将Google Fonts样式表添加到要渲染到的主.html文件中即可。您可以像bootstrap一样(如果您使用的是vue loader和sass loader库),在scss模式下使用
@import
语句,如下所述: